ES6允许按一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 ‘解构’。
一. 数组的解构赋值
<script type="module">
//ES5
var a = 1;
var b = 2;
var c = 3;
//ES6
var [a,b,c] = [1,2,3];
console.log(a); //1
console.log(b); //2
console.log(c); //3
let[, , third] = ["first","second","third"];
console.log(third); //third
let[one, ,three] = ["One","Two","Three"];
console.log(one); //One
console.log(three); //Three
let[head, ...tail] = [0,1,2,3,4,5,6,7,8,9];
console.log(head); //0
console.log(tail); //[1,2,3,4,5,6,7,8,9]
</script>
2） 不完全解构：等号左边的模式，只匹配一部分的等号右边的数组
<script type="module"> let[x,y] = [1,2,3]; console.log(x); //1 console.log(y); //2 let[a,[b],c] = [1,[2,3],4]; console.log(a); //1 console.log(b); //2 console.log(c); //4 </script>
3） 指定默认值：ES6内部使用严格的相等运算符（===）判断一个位置，所以如果一个数组成员不严格等于undefined，默认值是不会生效的
<script type="module">
var [temp = "string"] = [];
console.log(temp); //string
var [temp = "string"] = ["tempString"];
console.log(temp); //tempString
var [x = "aaa",y] = ["bbb"];
console.log(x); //bbb
console.log(y); //undefined
var [m, n = "aaa"] = ["bbb"];
console.log(m); //bbb
console.log(n); //aaa
var [p,q = "aaa"] = ["bbb",undefined];
console.log(p); //bbb
console.log(q); //aaa
</script>
注：非遍历结构报错
<script type="module">
var [temp] = 1; // Error: 1[Symbol.iterator] is not a function at eval
</script>
二. 对象的解构赋值
<script type="module">
var {name, age} = {name:"Conan", age: 23};
console.log(name); //Conam
console.log(age); //23
</script>
2） 变量属性名不一致：
<script type="module">
var {person_name, person_age, person_id} = {id:"007", name:"Conan", age: 23};
console.log(person_name); //undefined
console.log(person_age); //undefined
console.log(person_id); //undefined
var {name: person_name,age: person_age, id: person_id} = {id:"007", name:"Conan", age: 23};
console.log(person_name); //Conan
console.log(person_age); //23
console.log(person_id); //007
let object = {first: "Hello", last: "World"};
let {first:firstname, last:lastName} = object;
console.log(firstname);
console.log(lastName)
</script>
3） 对象解构默认值：
<script type="module">
var{ x = 3 } = {};
console.log(x); //3
var{ x, y = 5} = {x: 1};
console.log(x); //1
console.log(y); //5
var { message: msg = "u are crazy" } = {};
console.log(msg); //u are crazy
</script>
三. 字符串解构赋值
字符串被转换成一个类似数组的对象
<script type="module"> const [a, b, c, d, e] = "Hello"; console.log(a);// H console.log(b);// e console.log(c);// l console.log(d);// l console.log(e);// o </script>
2） 字符串的属性解构赋值：
<script type="module"> const {length: len} = "Hello"; console.log(len); //5 </script>
四. 函数参数的解构赋值
<script type="module">
function sum([x,y]){
return x + y;
};
console.log(sum([1,2])); //3
</script>
2） 函数参数解构赋值的默认值：
<script type="module">
function fun({x = 0, y = 0} = {}){
return[x,y];
};
console.log(fun({x:100,y:200})); //[100,200]
console.log(fun({x:100})); //[100,0]
console.log(fun({})); //[0,0]
console.log(fun()); //[0,0]
</script>
五. 解构赋值的用途
1） 交换变量的值：
<script type="module">
//ES5:
console.log("ES:5");
var a = 100;
var b = 200;
console.log("交换前：");
console.log("a="+a); // a=100
console.log("b="+b); // b=200
var temp;
temp = a;
a = b;
b = temp;
console.log("交换后");
console.log("a="+a); // a=200
console.log("b="+b); // b=100
//ES6:
console.log("ES:6");
var x = 100;
var y = 200;
console.log("交换前：");
console.log("x="+x); // x=100
console.log("y="+y); // y=200
[x, y] = [y, x];
console.log("交换后：");
console.log("x="+x); // x=200
console.log("y="+y); // y=100
</script>
2） 从函数返回多个值：
<script type="module">
function fun(){
return [1, 2, 3];
};
var [x, y, z] = fun();
console.log(x); //1
console.log(y); //2
console.log(z); //3
</script>
<script type="module">
function fun(){
return{
id: "007",
name: "Conan",
age: 28
}
}
var {id:person_id, name, age} = fun();
console.log(person_id); // 007
console.log(name); // Conan
console.log(age); // 28
</script>
3） 函数参数的定义：（☆）
<script type="module">
//参数是一组有次序的值
function fun([x, y, z]){
};
fun([100, 200, 300]);
//参数是一组无次序的值
function fun({x, y, z}){
};
fun({
x: 100,
y: 200,
z: 300
})
</script>
4） 提取 json 数据：（☆）
<script type="module">
var jsondata = {
id: "007",
name: "Canon",
age: 28,
score: {
Chinese: 98,
Math: 148,
English: 107
}
}
//ES:5
console.log("ES:5");
console.log("Person's name is:" + jsondata.name);
//ES:6
console.log("ES:6");
let {id: number, name, age, score} = jsondata;
console.log(number); // 007
console.log(name); // Canon
console.log(age); // 28
console.log(score.Chinese); // 98
</script>