ECMAScript6 解构赋值

Unsplash

在 ES6 中，关于解构的含义为：允许按照一定模式，从数组和对象中提取值，对变量进行赋值，而数组、对象和字符串，都能通过这种方式进行赋值

1 数组的解构赋值

以往我们想要把数组的值分别赋给变量，都是通过下面这种方式

var arr = [1,2,3],
    a = arr[0],
    b = arr[1],
    c = arr[2];
console.log(a);
console.log(b);
console.log(c);

而通过解构赋值，我们只需要写很少的代码即可完成赋值

var [a,b,c] = [1,2,3]; 
    console.log(a);
    console.log(b);
    console.log(c);

运行结果

接下来通过几段简单的代码，来加深大家对数组的解构赋值的理解

不完全解构

数组的解构赋值_1

嵌套

数组的解构赋值_2

设置默认值

数组的解构赋值_3

默认值可以被覆盖，但需要注意的是，当新的值为 undefined 的时候，是不会覆盖默认值的

数组的解构赋值_4

2 对象的解构赋值

对象的解构赋值跟数组的解构赋值类似，还是直接来看代码吧

对象的解构赋值_1

上面的代码输出结果和下面的代码相同，但对象里的属性顺序并不是一样的，所以我们就知道，对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才能成功赋值

嵌套

对象的解构赋值_2

设置默认值

对象的解构赋值_3

除了数组跟对象可以使用解构赋值之外，字符串也同样可以使用解构赋值

字符串的解构赋值

3 解构赋值的常见用途

交换变量的值，传统的方式如下：

var x = 1,
    y = 2,
    z = x;
x = y; 
y = z;
console.log(x);
console.log(y);

解构赋值_1

函数返回的多个值

解构赋值_2

定义函数参数，通过解构赋值的方式，我们能很轻松的提取 JSON 对象中想要的参数

解构赋值_3

函数参数的默认值，传统的方式如下：

function me(a){
    var name;
    if(a === undefined){
        name = "Nian糕"; 
    }else{
        name = a;
    }
    console.log(name);
}

解构赋值_4

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为优秀作者献上一发助攻吧，谢谢！^ ^