看到一篇文章牺蹄,很是受用忘伞,稍作總結(jié)。
一、取值
ES5例子:
const obj = { 'name':'小明', 'age':25,'subject':'英語'}
const name = obj.name;
const age = obj.age;
const subject = obj.subject;
解決方案 :ES6的解構(gòu)氓奈,寫法如下
const {name, age, subject} = obj;
也可以重新命名
const {name:new_name, age:new_age, subject} = obj;
要注意解構(gòu)的對象不能為undefined翘魄、null。所以一般要給解構(gòu)的對象一個(gè)默認(rèn)值舀奶。
const {name, age, subject} = obj || {};
二暑竟、合并對象
ES5例子
// 數(shù)組合并
const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b); // [1,2,3,1,5,6]
// 對象合并
const obj1 = { a: 1 }
const obj1 = { b: 1 }
const obj = Object.assgin({}, obj1, obj2); // {a:1,b:1}
ES6的改進(jìn),利用new Set實(shí)現(xiàn)數(shù)組的去重合并
// new Set()合并去重
const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])]; // [1,2,3,5,6]
// ...實(shí)現(xiàn)對象解構(gòu)合并
const obj1 = { a:1 }
const obj2 = { b:1}
const obj = {...obj1,...obj2}; // {a:1,b:1}
三育勺、字符串拼接
const name = '小明';
const score = 59;
let result = '';
if(score > 60){
result = `${name}的考試成績及格`;
}else{
result = `${name}的考試成績不及格`;
}
這種寫法看著就很冗余啰嗦但荤,正確高效的使用字符串模板
const name = '小明';
const score = 59;
const result = `${name}的考試成績${score > 60?'及格':'不及格'}`;
四、關(guān)于if
if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
//...
}
這可真是硬傷涧至,用ES6的includes吧
const arr = [1,2,3,4];
if( arr.includes(type) ){
//...
}
五腹躁、扁平化處理
ES5寫法:
const deps = {
'采購部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'運(yùn)輸部':[3,64,105],
}
let member = [];
for (let item in deps){
const value = deps[item];
if(Array.isArray(value)){
member = [...member,...value]
}
}
member = [...new Set(member)]
看著就不想去解讀的代碼,何不用ES6的Object.values和flat呢化借?一下子十幾行的代碼就用幾行就解決了潜慎,看著清清爽爽捡多,也更便于別人去看你的代碼
const deps = {
'采購部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'運(yùn)輸部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
六蓖康、獲取對象屬性值
let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '話題內(nèi)容';
改進(jìn)
let obj = {};
let index = 1;
obj[`topic${index}`] = '話題內(nèi)容';
七、關(guān)于非空的判斷
我們在處理業(yè)務(wù)代碼時(shí)經(jīng)常會(huì)需要作判空處理
if(value !== null && value !== undefined && value !== ''){
//...
}
ES6中新出的空值合并運(yùn)算符是不是會(huì)更簡潔
if(value??'' !== ''){
//...
}
八垒手、關(guān)于異步函數(shù)
const fn1 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 300);
});
}
const fn2 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 600);
});
}
const fn = () =>{
fn1().then(res1 =>{
console.log(res1);// 1
fn2().then(res2 =>{
console.log(res2)
})
})
}
照這么寫下去可真是人間地獄蒜焊,回調(diào)再回調(diào),還好有ES6
const fn = async () =>{
const res1 = await fn1();
const res2 = await fn2();
console.log(res1);// 1
console.log(res2);// 2
}