ES6新特性：解构赋值

2018-01-22

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

关于给变量赋值，传统的变量赋值是这样的

var arr = [1,2,3];//把数组的值分别赋给下面的变量；
var a = arr[0];
var b = arr[1];
var c = arr[2];

console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3

将数组的元素值1，2，3分别赋值给变量a，b，c，结果也是如我们所愿，赋值成功，这是一种传统的赋值方式

变量的解构赋值：

var [a,b,c] = [1,2,3] //把数组的值分别赋给下面的变量；

console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3

不需要分别把变量a，b，c分别声明定义和赋值，只需要将变量a，b，c作为一个数组的元素，然后将数组[1,2,3]赋值给数组[a,b,c]即可，变量a，b，c即可分别得到对应的值。这种叫做数组的解构赋值。
数组的解构赋值的用法有以下几情况要注意：
1、结构赋值可以嵌套的
1
2
3
var [a ,b[ c1,c2] ] = [ 1,2,[ 3,4 ]]
console.log(c1);//结果：c1的值为3.1
console.log(c2);//结果：c2的值为3.2
如我们的预料，数组中即使再嵌套另一个数组，结构赋值也能为我们的变量准确的赋值，c1和c2的值分别为3.1 , 3.2，也就是赋值成功。
2、不完全解构
1
2
3
var [a,b,c] = [1,2];
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
当左边的模式（你可以理解为格式）与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分的变量赋值，例如：变量c没有在右边找到匹配的模式，所以无法进行赋值，但这并不影响变量a和变量b的赋值，因为它们在右边找到与之匹配的模式，这种叫做不完全解构。
3. 赋值不成功，变量的值为undefined
1
2
3
4
var [a,b,c] = [1,2];
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为undefined
变量a和变量b为不完全解构，那么变量c解构不成功会怎么样呢？记住，解构不成功，变量的值就等于undefined。相当于只声明了变量c，但是没赋值。
4. 允许设定默认值
1
2
3
4
var [a,b,c=3] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3
例子中变量c已经指定默认值为3，即使右侧没有与之对应的值赋给它也没关系，它都可以成功赋值为3，如果你想覆盖默认值3，只需赋一个有效的值即可。如下：
1
2
3
4
var [a,b,c=3] =[1,2,4];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为4

这个时候默认值3会被新的值4覆盖，c的值为4；注意：当新的值为undefined的时候，是不会覆盖默认值的。

以上是数组的解构赋值，除了利用数组可以解构赋值外，用JSON对象也可以。

对象的解构赋值跟数组的解构赋值很类似，

var { a,b,c} = {"a":1,"b":2,"c":3};
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为3

跟数组解构赋值不同的地方

var { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为3

我把右侧的对象属性b和属性c的位置进行了调换，但这并不会影响赋值的结果，变量b和变量c的值不会改变，依然是b为2，c为3。这就告诉我们对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。

如果变量找不到与其名字相同的属性，就会赋值不成功

1 2	var { a } = {"b":2}; console.log(a);//结果：a的值为undefined

变量a在右侧找不到与之名字匹配的属性a，所以变量a赋值不成功，a的值为undefined。
但也不是完全没有办法补救的，如果你想给一个变量名与属性名不一样的变量解构赋值，可以这样写：
1
2
var { b:a,} = {"b":2};
console.log(a);//结果：a的值为2

这样变量a同样可以赋值成功，a的值最终为2。

对象解构赋值也可以嵌套

let data = {
    title:'abc',
    text :[{
        title:'txte',
        desec:'dsasdsa'
    }]
}
let {title : a , text:[{title : b}]} = data;
console.log(a,b)//abc,txte

可以指定默认值

1 2	var {a,b=2} = {"a":1}; console.log(b);//结果：b的值为默认值2

字符串的解构赋值

var [a,b,c,d,e,f] = "我就是前端君";
console.log(a);//我
console.log(b);//就
console.log(c);//是
console.log(d);//前
console.log(e);//端
console.log(f);//君

这是因为在解构赋值的过程中，字符串被转换成了一个类似数组的对象。变量a，b，c，d，e，f都分别赋上了对应的值。

解构赋值的用途

一、交换变量的值

传统做法最常用的是引入第三个变量来临时存放，如下：

var x = 1;
var y = 2;
var z = x;//第三个变量临时存放x的值
x = y;  //把y的值赋给x；
y = z;  //把z的值赋值给y；
console.log(x); //结果：x为2
console.log(y); //结果：y为1

但是有了解构赋值，想交换两个变量的值就简单多了

1
2
3

var x = 1;
var y = 2;
[x,y] = [y,x];

二、提取函数返回的多个值

函数只能返回一个值，我们可以将多个值装在一个数组或者对象中，再用解构赋值快速提取其中的值。

function demo(){
    return {"name":"张三","age":21}
}
var {name,age} = demo();
console.log(name);//结果：张三
console.log(age);//结果：21

将demo函数的运行结果直接通过结构赋值赋给变量name和age，实现快速的提取对应的值。

三、定义函数参数

function demo({a,b,c}){
     console.log("姓名："+ a);
     console.log("身高："+ b);
     console.log("体重："+ c);
 }
 demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});

通过这种写法，很方便就能提取JSON对象中想要的参数，例如案例中，我们只需要获取实参中的：a，b，c，而不需要关其他的参数，比如：d或者其他更多的参数。

四、函数参数的默认值

传统的参数默认值的实现方式是，先判断该参数是否为undefined，如果是代表没传，需要手动给它赋一个值，如：

function demo(a){
    var name;
    if(a === undefined){//判断参数书否是否传值
   name= "张三"; //没传，赋默认值
 }else{
        name= a;
    }
    console.log(name);
}

但是有了解构赋值，一切都变得简单很多

function demo({name="张三"}){
    console.log("姓名："+name);//结果：姓名：张三
}
demo({});

上面的代码给我们展示了通过解构赋值设定函数参数的默认值，简洁地代码即可实现。函数调用的时候没有传入对应的name参数，此时name就会使用默认值：“张三”

解构赋值运用场景

变量交换

let a =1;
let b =2;
[a,b] = [b,a]
console.log(a,b)//2,1

在es5变量交换需要一个中间变量做存储，在es6轻松解决

拿到函数返回值
1
2
3
4
5
function f(){
return [1,2]
}
let [a,b] = f()
console.log(a,b)//1.2
在es5中要取到函数返回值要先用变量等于函数运行之后用下标拿到值

选择接收某几个值
1
2
3
4
5
6
function f(){
return [1,2,3,4,5,6]
}
let a,b;
[,a,,,b] = f()
console.log(a,b)//2,5
数组解构赋值对应的是下标可以取固定的某两个的值，忽略不想要的

不清楚返回值多少只关心第一个值
1
2
3
4
5
6
function f(){
return [1,2,3,4,5,6]
}
let a,b;
[a,...b] = f()
console.log(a,b)//1,[2, 3, 4, 5, 6]
总结：解构赋值给我们一种新的变量赋值方式，主要可以利用数组解构赋值和对象解构赋值。它的用途包括：交换变量值，提取函数返回值，函数参数定义，默认值设定等等，都给我们编程带来便利

关于给变量赋值，传统的变量赋值是这样的

变量的解构赋值：

数组的解构赋值的用法有以下几情况要注意：

1、结构赋值可以嵌套的

2、不完全解构

3. 赋值不成功，变量的值为undefined

4. 允许设定默认值