JavaScript高级学习：ES6新特性02——解构赋值

提示：
本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第二章

---

前言

本文讲解ES6新特性——解构赋值。

---

提示：以下是本篇文章正文内容，下面案例可供参考

解构赋值

正常的变量声明

let a=1;
let b=2;
let c=3,d=4;

数组解构赋值

数组解构赋值

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

嵌套解构

只要等号左右两边模式是匹配的就可以使用解构赋值，因此更高级的解构赋值被称为嵌套解构

let [d,[e,f],g]=[4,[5,6],7];
console.log(d);		//4
console.log(e);		//5
console.log(f);		//6
console.log(g);		//7

不完全解构

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

嵌套使用不完全解构

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

默认结构值

let [a,b=3]=[5];
console.log(a);		//5
console.log(b);		//3

let [c,d=3]=[5,6];
console.log(c);		//5
console.log(d);		//6

ES6中所有匹配标准都是===的比较，所以只有当赋的值是undefined的时候，才会使用默认值

let [e=1]=[null];
console.log(e);//null

let [f="fff"]=[undefined];
console.log(f);//fff

默认值可以是变量

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

let [c=1,d=c]=[5];
console.log(c);		//5
console.log(d);		//5

错误写法：

let [e=f,f=1]=[];
console.log(e);
console.log(f);

对象解构赋值

对象解构

对象解构，根据key的值来匹配

let {name, age} = {name: "张三", age: 18};
console.log(name, age);			//张三	18

对象解构时，即使等号前面的变量的顺序和对象中key的顺序不一致，也能正常解构。

对象解构只看key的值是否能匹配到，和顺序位置都没有关系，数组解构必须按照顺序。

let {z, x, y} = {x: 1, y: 3, z: 5};
console.log(z, x, y);		//5 1 3

当变量名与对象的key值不同时，冒号右边为变量名，左边为该变量名需要对应的对象的key。

let {xb, fs} = {sex: "男", score: 99};
console.log(xb, fs);

当变量名与属性相同的时候，可以省略指派的key不写(实际上是省略冒号左边的)。

let {a: a, b: b} = {a: 1, b: 9};
console.log(a, b);

嵌套解构

嵌套解构：对象和数组可以相互嵌套解构

let {c: {d, e}, f} = {c: {d: "d", e: "e"}, f: "f"};
// console.log(c);	报错。c is not defined
console.log(d);
console.log(e);
console.log(f);

let obj = {
    g: [
        "你好，世界",
        {
            i: "我不好"
        }
    ]
}
let {g: [h, {i}]} = obj;
console.log(h);		//你好，世界
console.log(i);		//我不好

数组对象的解构

let arr = [10, 20, 30];
let {0: first, [arr.length - 1]: last, 1: number} = arr;

console.log(first);     //10
console.log(last);      //20
console.log(number);    //30

对象解构默认值

let {aa, bb = "cc"} = {aa: "aa"};
console.log(aa);        //aa
console.log(bb);        //cc

变量、字符串、函数的解构赋值

变量的解构赋值（不推荐使用）

let {
     x}={
     x:10};

错误使用：

let y;
{y}={y:20};

直接这样大括号开头会报错，ES6中规定单独出现的大括号表示一个代码块

用小括号包起来才可以使用

({y}={y:20});
console.log(x,y);	//10 20

字符串解构赋值

let  str="kakarot";
let [a,b,c,d,e]=str;
console.log(a);		//k
console.log(b);		//a
console.log(c);		//k
console.log(d);		//a
console.log(e);		//r

字符串按照对象方式解构赋值

let {
     length:l}=str;
console.log(length);    //0
console.log(l);         //7

let {
     length}=str;
console.log(length);    //7

函数形参的解构赋值

function add([x,y]){
    /*从解构结构中拿出x变量和y变量*/
    return x+y;
}
console.log(add([1,2]));	//3

这里是把解构结构中x变量和y变量拿出来，组成数组进行返回：

function add2({x = 0, y = 0} = {}) {
    return [x,y];   //这里返回的是数组，不是两个变量
}
console.log(add2());				//0 0
console.log(add2({x:1}));			//1 0
console.log(add2({x:1,y:2}));		//1 2

因此，ES6中特殊的交换变量的值的方式：

let min=10;
let max=30;
[min,max]=[max,min];

等号左边是已经声明的变量等待赋值

等号右边就是一个普通数组，max和min此时表示的是他们。所代表的值