ES6中变量的解构与赋值

今天来总结一下es6 为我们提供的变量的结构赋值。这个能在我们大量的去声明变量和遍历数组是很实用。es6提供的这种方法也很简单，很容易理解。

一、数组的赋值与解析

1.我们以前赋值变量这样赋值

var b = 1;
var c = 2;
var d = 3;
var e = 4;

而现在我们可以这样赋值：

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

2.数组赋值我们还可以这样

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

如果我们这样：

let [a,b=2] = [1，4];
console.log(a,b) // 1,4  b的值就会变成4，原来的2会被覆盖

重点内容 这种匹配的方式在es6中属于模式匹配，即作用两边结构相同就可以进行赋值。

二、对象的赋值与解析

1.对象的赋值与解析和数组有一个重要的不同点，数组赋值是根据位置去判断并赋值的，而对象是根据变量和属性对比去赋值的，例如：

let obj = {
name:"Jhone",
age:"23",
sex:"man"
}

let obja = {name,age,sex} = obj;
console.log(obja.name)

对象中的变量 name,age,sex 和对象obj中的属性 name,age,sex 去对比赋值。可能这样说你有些迷惑，那咱们看下面的这个例子：

let a= {name:"jhon"} = {name: 1};
console.log(a) // 报错 Invalid destructuring assignment target

上面报错是 无效的解构的任务目标, 这是因为

{name:"jhon"}

中的 jhon不是变量，而是个字符串，也就是name 本身是有固定值得，我们不能再去赋值了。

2.另外我们还可以这样赋值

let a= {name:jhon,age:ba} = {name:1,jhon:3,};
console.log(a) // {name:1,jhon:3}

这说明前面对象在赋值时，某些属性在后面的对象中没有，那么结果会删除该属性，如果后面的对象中含有某些前面对象不包含的属性，那么结果会将该属性添加进去。

3.如果我们事先用let声明了某些变量，像下面一样

let jhon;
let {name:jhon} = {name:"King"}

// 会报错 'jhon' has already been declared

这是因为解析器
c177
将大括号理解成了一个代码块，而不是一个赋值语句。 let声明的变量是不可以更改的（只能改变变量的值）

我们可以这样这做：

let jhon;
let ({name:jhon} = {name:"King"}); // 加一个大括号

如果声明的变量有冲突，加一个大括号是必须的。

三.数组和对象混合赋值

1.数组里面嵌套对象

let obj = [
name,
{age:"30"}
]

var ary = [a,{b}] = obj;
console.log(ary)

2.对象里面嵌套数组

let obj = {
ar:[
"name",
"age"
]
}
var ary = {ar:[a,b]} = obj;
console.log(ary)

3.对象里面嵌套对象

let obj = {
name:"jhon",
age:{one:1,two:2}
}
var ary = {name,age:{one,two}} = obj;
console.log(ary)

四.解构并赋值

1.字符串解构

let [a,b,c]="123"
// a = 1
// b = 2
// c = 3

let {length : len} = 'come';
//length = 5

2.数组解构

var ary = [1, 2, 3];
var {0 : one, 1 : two} = ary;
one // 1
two // 2

3.函数参数的解构赋值

function add([x, y]){
alert(x + y);
}

add([5, 5]); // 弹出10