es6常用的写法

关于取值

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}
const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;
// 或者
const f = obj.a + obj.d;
const g = obj.c + obj.e;

被吐槽： “不会用ES6的解构赋值来取值吗？5行代码用1行代码搞定不香吗？直接用对象名加属性名去取值，要是对象名短还好，很长呢？搞得代码中到处都是这个对象名。”

// 改进代码
const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

如果名字不是我想要的，这样取值还是要重新创造个遍历赋值，在改进下：

const {a:a1} = obj;
console.log(a1); // 1

注意： ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

关于合并数据

比如合并两个数组或者合并两个对象

// 合并数组 concat
const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

// 合并对象 Object.assign
const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

合并数组不考虑去重吗， 扩展运算符就很好用的啊

// 数组合并 ...new Set
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}

关于拼接字符串

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

在${}中可以做什么操作 ？ 在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

关于if中判断条件

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

es 6 的 includes 就很适合

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

关于列表搜索

项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

const a = [1,2,3,4,5];
const result = a.filter(item =>{
    return item === 3
})

精准搜索还是find 比较适合的，find找到了适合的项，就不会继续遍历数组。

const a = [1,2,3,4,5];
const result = a.find(item =>{
    return item === 3
})

关于扁平化数组

一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[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)]
// 输出  [1, 2, 3, 5, 8, 12, 14, 79, 64, 105]

获取对象的所有属性值这里遍历了全部属性,可以用Object.values，涉及到数组的扁平化处理，可以用到 flat ,还好这次的数组的深度最多只到2维，还要是遇到4维、5维深度的数组，是不是得循环嵌套循环来扁平化？

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

// 输出 [1, 2, 3, 5, 8, 12, 5, 14, 79, 3, 64, 105]

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。

注意 ： flat 不支持IE浏览器的。

关于获取对象属性值

const name = obj && obj.name;

可以使用链式操作符

const name = obj?.name;

关于输入框非空判断

if(value !== null && value !== undefined && value !== ''){
    //...
}

改进 ES6中新出的空值合并运算符

if((value??'') !== ''){
  //...
}