全面感知ES6（5）解构赋值

ES6中的解构赋值

解构  绝对不是  结构（拼音没有过8级的，绝对说不好这两个词的区别）

     /*

解构

分为

数组解构

对象解构

作用

更快速，更方便的从数组和对象中提取值。

规则

1.等号两边结构必须一样

2.等号右边必须是个东西

这个东西指的是JS中的合法数据类型

3.声明和赋值必须在同一句话中完成

*/

下面我们就详细说下例子

数组解构

   

    let arr = [ 1, 2, 3];

// 常规写法

let a = arr[ 0];

let b = arr[ 1];

let c = arr[ 2];

// 解构写法

let [ a, b, c] = arr;

console. log( a, b, c); //1, 2, 3

     // 是不是很方便

再来看看对象解构

    

    let {

e,

d

} = {

e: 1,

d: 2

};

console. log( e, d); // 1 2

在来看个复杂点的

    let [{

a

},

[

[ b, c, d]

], num, str

] = [{

a: 1

},

[

[ 1, 2, 3]

], 4, ' abc '

];

console. log([{

a

},

[

[ b, c, d]

], num, str

]);

    //[{a:1},[1,2,3],2:4,3:"abc"]

是不是也很简单。

但是如果解构配合着运算符用的话会更简单

    

    let arr1 = [ 1, 2, 3];

let arr2 = [ ... arr1];

console. log( arr1); // [1, 2, 3]

console. log( arr2); // [1, 2, 3]

是不是跟简单了，

所以只要记住上面的三条规则，解构掌握很轻松的，

arr2        =     [...arr1]

解构的值             被解构的值

补充：如果解构的值和被解构的值数量不相等，解构多余的值为空；

   

关于ES6的解构我能分享给大家大概就是这么多了，

如果上述代码有错误和不足，请评论或私信，我好及时改正。