一. 解构赋值
const obj = {
a:1,
b:2,
c:3,
d:4,
e:5,
}
const {a,b,c,d,e} = obj || {};
const f = a + d;
const g = c + e;
这种结构赋值的方式可能大家都很熟悉, but, 如果想创建的变量名和对象的属性名不一致，还可以用解构赋值吗? 当然可以!
const {a:a1} = obj;
console.log(a1);// 1
二. 合并数据
const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}
ES6的扩展运算符是个好东西
三. 拼接字符串
const name = '小明';
const score = 59;
let result = '';
if(score > 60){
result = `${name}的考试成绩及格`;
}else{
result = `${name}的考试成绩不及格`;
}
很多前端开发对ES6字符串模板${}的了解不够深(没错说的就是我), 像上面的代码还不如不用${}, 在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;
四. 数组搜索
const a = [1,2,3,4,5];
const result = a.filter(
item =>{
return item === 3
}
)
像我经常就会有这样用, 但是es6中有更好的解决方法
const a = [1,2,3,4,5];
const result = a.find(
item =>{
return item === 3
}
)
find()可以优化性能, find方法中找到符合条件的项，就不会继续遍历数组。
五. 扁平化数组
const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
给定一个数组对象, 现在要把所有部门的成员id提取到一个数组中, 你会怎么做呢?
let member = [];
for (let item in deps){
const value = deps[item];
if(Array.isArray(value)){
member = [...member,...value]
}
}
member = [...new Set(member)]
换我以前一看到这种情况, 肯定第一时间想到的就是上面的解决方案(low爆了), 要是遇到3维以上的数组, 还得嵌套循环?
const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。(ps: flat方法不支持IE)
六. 获取对象属性值
const name = obj && obj.name;
我就是经常这么写, 当然es6有更简单的可选链操作符
const name = obj?.name;
七. 添加对象属性
当给对象添加属性时，如果属性名是动态变化的，该怎么处理。
let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';
嗯别骂了别骂了俺也习惯这么写, 原来ES6中的对象属性名是可以用表达式的
let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';
八. 输入框非空的判断
if(value !== null && value !== undefined && value !== ''){
//...
}
或许有人这么写, 但我习惯用强制类型转换
if(value){
//...
}
当然这种会把value为数字0时排除出去, 所以如果考虑0值的话, 还是用ES6中新出的空值合并运算符更好
if((value??'') !== ''){
//...
}
九. 异步函数Promise
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)
})
})
}
虽然本人在项目中很少会用到Promise, 但是上面的代码一看就感觉不对劲, 很容易造成回调地狱, 还是用async, await更好
const fn = async () =>{
const res1 = await fn1();
const res2 = await fn2();
console.log(res1);// 1
console.log(res2);// 2
}
但是要做并发请求时，还是要用到Promise.all()。
const fn = () =>{
Promise.all([fn1(),fn2()]).then(res =>{
console.log(res);// [1,2]
})
}
如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。
最后
今天的随笔就暂时记到这里了, 以上笔记摘自掘金, 感谢大佬的分享, 又get到了
