ES6对比ES5写法

一、关于取值

es5的取值方式

var obj = { a:1, b:2, c:3 };

var a = obj.a; 
var b = obj.b;
var c = obj.c;

es6之后可以利用解构赋值来取值

const obj = { a:1, b:2, c:3 };
const {a, b, c} = obj;
console.log(a, b, c) // 1,2,3

如果命名冲突或不想用原来的命名还可以这样

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

二、关于判断条件

对于判断type 或者 states 判断条件是数字类型的。

es5的判断方式

if( type == 1 || type == 2 || type == 3 || type == 4 || ){
    // 此处为执行代码
}

es6的判断方式

const condition = [1, 2, 3, 4]; 
if( condition.includes(type) ){
    // 此处为执行代码
}

includes() 方法用来判断一个数组或字符串是否包含一个指定的值，如果是返回 true，否则false。

三、获取对象属性值

在于后台对接口的时候，可能对象层级比较深，就会出现下面这种情况。

var title = res.data.content.meaasge.title;

这种层级较深的情况下，如果，content或者message没有值（为null）的情况下，代码就会报错，不在向下执行

es5的解决方式

var title = res.data&&res.data.content&&res.data.content.message&&res.data.content.message.title;

es6的解决方式

const title = res?.data?.content?.message?.title;

链判断运算符`?.`有三种写法。

-   `obj?.prop` // 对象属性是否存在
-   `obj?.[expr]` // 同上
-   `func?.(...args)` // 函数或对象方法是否存在

四、数组扁平化

es5的解决方法

var arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]];
function myFlat(arr){
    var res=[];
    for(var i = 0;i<arr.length;i++){
        if(arr[i] instanceof Array){
            res= res.concat(myFlat(arr[i]))
        }else{
            res.push(arr[i])
        }
    }
    return res;
}

利用递归，函数重复调用

es6的解决方法

let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]];

arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

`flat()`默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将`flat()`方法的参数写成一个整数，表示想要拉平的层数，默认为1,如果不管有多少层嵌套，都要转成一维数组，可以用`Infinity`关键字作为参数

五、拼接字符串

es5的处理方法

data(){
    return {
        name: '前端挖坑人',
        address: '沈阳'
    }
}
var message = '我是' + this.name + ',我在' + this.address; // 我是前端挖坑人,我在沈阳

es6的处理方式

data(){
    return {
        name: '前端挖坑人',
        address: '沈阳'
    }
}

let message = `我是${this.name}，我在${this.address}`; // 我是前端挖坑人,我在沈阳

六、合并数据

es5的处理方法

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]

es6的处理方法

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

展开运算符...允许一个表达式在某处展开，存在多个参数（用于函数调用），多个元素（用于数组字面量）或者多个变量（用于解构赋值）

七、待续...

自己写着当做笔记，亦是交流，有写错或者不足的地方，还请大佬留言指出更正，我是前端挖坑人!!!