ECMAScript 6（4）变量的解构赋值

╰+攻爆jí腚メ 2022-07-13 13:56 180阅读 0赞

# 变量的解构赋值 #

解释：

1. 简单的来说，可以粗暴地理解为，等号左右两边的数组/结构类似时，将右边的值直接赋给左边对应位置的变量；
    2. 主要面对的是数组和对象；
    3. 虽说数值、字符串以及函数参数也能用，但核心思想是基于数组和对象的，理解好第二点，那么理解后面的也不难；

--------------------

### **数组的解构赋值** ###

#### 【1】标准情况： ####

等号左右数组结构相同，左边的变量直接拿右边对应位置的变量的值。  
如以下代码；

//基本版
    var [a,b,c]= [1, 2, 3];
    a;    //1
    b;    //2
    c;    //3

左边是一个长度为3的数组，右边也是一个长度为3的数组。  
区别是左边是变量，右边是已知的值。  
这样左右一一对应，变量a、b、c就分别被赋值了；

#### 【2】左右结构相同，但有些位置没有对应的值； ####

如以下代码，原本b的位置没有变量了，这样的代码是可以跑通的。

//左缺失
    var [a,,c]= [1, 2, 3];
    a;    //1
    c;    //3

又如以下代码，左边齐全，但是右边某个位置缺少变量。  
这种情况下，无法对应的变量将被赋值undefined

//右缺失，解构不成功但不报错 
    var [a,b,c]= [1, , 3];
    a;    //1
    b;    //undefined
    c;    //3

#### 【3】数组中嵌套数组 ####

普通嵌套，一一对应的，此时对应位置对应值，理解起来简单暴力；

//数组嵌套 
    var [a, [b, c], d]= [1, [2, 3], 4];
    a;    //1
    b;    //2
    c;    //3
    d;    //4

假如在以上基础上，左右位置有缺少，则如同【2】中缺少的情况一样，变量的值则为undefined，或者右边某个值没有找到左边对应的某个变量。

代码略

左边和右边非完全对应，如以下代码，则右边非对应的部分可以视为一个整体，或者左边解构失败报错

//左边对应右边某个元素 
    var [a, b, c]= [1, [2, 3], 4];
    a;    //1
    b;    //[2,3]，视为整体
    c;    //4

//无法解构，抛出异常
    var [a, [b, c], d]= [1, 2, 3];    //Uncaught TypeError: undefined is not a function

//扩展运算符... （三个句号，更多了解请参照以后的内容） 
    var [a, ...b]= [1, 2, 3, 4];
    b;    //[2, 3, 4]

#### 【4】会报错的情况 ####

具体来说，右边不是数组（严格的说，不是可遍历的结构），那么将会报错。

// 报错的情况 
    let [foo] = 1;    //number
    let [foo] = false;    //boolean
    let [foo] = NaN;    //NaN
    let [foo] = undefined;    //undefined
    let [foo] = null;    //null
    let [foo] = {};    //object

这时，我们回过头看【3】中抛出异常的那段代码，之所以报错，是因为实质上是\[b, c\] = 2，无法结构，所以报错。

#### 【5】var、let、const都适用 ####

#### 【6】对于Set结构，也可以使用其来结构（在Set写完后补充）； ####

#### 【7】继续拓展，凡是具有Iterator接口的数据结构，都可以使用数组的形式进行结构赋值。 ####

别问我什么是Iterator接口，请看后面专门讲Iterator的内容。

--------------------

### **带默认值的数组解构赋值** ###

解释：

1. 简单来说，就是在解构赋值时，给一个默认值；
    2. 然后先看能不能解构成功，如果成功则取解构到的值，如果失败则取默认值；

#### 【1】标准情况下： ####

var [a, b = 2, c, d = 10]=[1, , 3, 4];
    a;    //1
    b;    //2
    c;    //3
    d;    //4

在以上代码中，a和c和普通的解构赋值相同。

除此之外，左边多了一个b = 2和d = 10。于是，b的默认值是2，d的默认值是10，  
而这两者的区别是右边对应解构位置，b的位置对应的是空内容，而d的位置对应的是4

因此，有默认值但解构失败的（准确的说是undefined）b，取了自己的默认值2；  
有默认值但解构成功的的，则取了自己解构成功后的值4；

#### 【2】右边不写和undefined是一样的 ####

var [a = 1] = [undefined];  //1
    var [a = 1] = [null];   //null
    var [a = 1] = [3];  //3
    var [a = 1] = ["abc"];  //"abc"
    var [a = 1] = [{m: 1}]; //{m:1}
    var [a = 1] = [true];   //true
    var [a = 1] = [NaN];    //NaN

#### 【3】在使用之前已经被声明的变量可以作为默认值使用。 ####

简单来说，假如变量a先被声明，然后作为b解构时的默认值，那么是可以的；

var a = 1;
    var [b = a] = [];
    b;    //1

如果你不使用let、const等ES6新规定的声明模式，那么即使你先使用后声明也可以（变量提升），虽然没有什么用，并且不推荐

var [b = a] = [];
    var a = 1;
    b;    //undefined

另外，严格模式下，以上这种声明方式不会报错。

--------------------

### **对象的解构赋值** ###

解释：

1. 简单来说，对象解构是根据key给变量赋值该key的val，数组解构是根据顺序给对应位置的变量赋值；

#### 【1】标准情况 ####

最简单的如以下代码：

var {
       'abc': a} = {
       'abc': 1};
    a;    //1

两边都是对象，都有一个key是abc，区别是左边是变量名a，右边的是值1

于是同key的被赋值了。

#### 【2】变量名就是key ####

如以下代码，右边有key是abc，左边直接放一个和key相同的变量名，则该变量被赋值同名key的值

var {abc} = {
       'abc': 1};
    abc;    //1

以上代码的实质是：

var {abc: abc} = {
       'abc': 1};

声明时，第一个abc是key，第二个abc是变量名

#### 【3】解构失败，简单来说，就是该变量没有对应的key，取值undefined ####

var {abc} = {};
    abc;    //undefined

#### 【4】脑洞一下，【1】和【2】情况结合下是什么？ ####

答案是都起作用

var {a: b, a} = {a: 1};
    a;    //1
    b;    //1

第一个a是key，于是变量b被取值；  
第二个a是变量名，所以该变量a被取值1；

#### 【5】对已有变量进行解构赋值 ####

具体来说，之前我们都是在声明变量时进行结构赋值（注意有var），那么假如已经声明了一个变量，然后进行解构赋值呢？  
答案是可以，但需要用圆括号将解构赋值那段代码括起来。  
假如该行没有被括起来，那么就会报错；  
原因在于，没有var且没有被括号括起来的话，\{a\}被认为是代码块，而一个对象显然是不能被赋值给一个代码块的

var a;
    ({a} = {a: 1});    //括号括起来，正常运行

var a;
    {a} = {a: 1};    //Uncaught SyntaxError: Unexpected token =

以下代码是可以正常运行的，相当于声明了2次变量a

var a;
    var {a} = {a: 1};

使用let和const时，不能声明两次，否则会报错（见const和let相关内容），但var可以

let a;
    let {a} = {a: 1};    //报错，因为let不能2次

var a;
    var {a} = {a: 1};    //不会报错, 2次var是允许的

一句话总结：  
**已声明变量，在解构赋值时需要用括号括住整行代码。**

#### 【6】解构赋值时，赋值形式并非深度复制 ####

具体来说，如果被赋值的变量，对应的是一个对象（或数组），那么解构赋值时，赋值形式是以按引用传递时赋值的。

如以下代码，变量a的属性b是一个对象，他被赋值给变量b；  
然后修改变量b中的属性c时，变量a中的属性b的属性c的值也随之变化了；  
说明这是按引用传递，就像在正常情况下，将一个对象赋值给另外一个变量一样。

var a = {
        b: {c: 1}
    };
    a.b.c;  //1
    var {b} = a;
    b.c;    //1
    
    b.c = 2;
    b.c;    //2
        a.b.c;  //2

一句话总结：  
**解构赋值时，赋值形式【不是】深度复制**

#### 【7】用解构赋值可以方便的取出其他对象中的某个方法或属性 ####

如以下代码中，将对象computed的方法取出来使用，简单明了

或者某个对象中有一个属性是对象，我们只需要修改这一个对象而不用修改其他属性时，就可以采用这样的方法将属性赋值给一个变量，然后修改这个变量即可（利用对象被赋值时的按引用传递的性质）

#### 【8】数组可以视为带key的对象来进行解构赋值 ####

简单来说，假如有一个数组arr，那么arr\[0\]就是数组的第一个元素，arr\[1\]就是数组的第二个元素，0和1就是这个数组的key

如以下代码

var arr = [2, 4, 6, 8];
    var {
            0:a,
            1:b,
            [arr.length - 1]:d,
            [arr.length - 2]:c
    }= arr;
    a;    //2
    b;    //4
    c;    //6
    d;    //8

但相反情况下，是不可以的。

var obj = {
        0: 1,
        1: 2
    }
    var [a,b] = obj;    //Uncaught TypeError: undefined is not a function

一句话总结：  
**左边数组右边只能是数组；左边对象，右边可以是数组，或对象**

#### 【9】对象的默认值 ####

简单来说，就是对象在解构赋值时也可以赋默认值，如果解构成功不是undefined，则取解构的值，否则取默认值

如代码：

var {
                a: A = 10,
                b:B,
                C=20
        }={b: 1};
        A;    //10
        B;    //1
        C;    //20

--------------------

### **字符串的解构赋值** ###

解释：

1. 字符串可以被解构赋值，视为一个类似数组的对象

#### 【1】右边可以当做一个数组看待 ####

如以下代码的str，就类似\[“H”, “e”, “l”, “l”, “o”, ” “, “w”, “o”, “r”, “l”, “d”, “!”\]这样一个数组

var str = "Hello world!";
    var [first,second] = str;
    first;    //H
    second;    //e

#### 【2】但他终究还是一个字符串，可以用解构赋值的形式，取出他作为字符串的各种方法 ####

比如在以下代码中，就取出了split这个方法，并且用apply来让另外一个字符串作为this而调用

var str = "Hello world!";
    var {split:method} = str;
    method.apply("abc", [""]);    //["a", "b", "c"]

但是仔细想想，这个似乎也没有什么意义。  
字符串继承的是String的方法，如果需要字符串的方法，干嘛不直接从String中去获取呢？

--------------------

### **其他基本类型的解构赋值** ###

解释：

1. 尝试转为对象，如果能转则可以解构赋值，比如布尔类型和数值类型；
    2. 不能转则不能解构赋值，比如null和undefined；

#### 【1】数值和布尔的值不能被取出 ####

因为不能被转为数组或对象，因此他的值不能被取出；

但是可以取出他的方法，准确的说，是Number和Boolean的方法，参照上面的字符串的【2】内容；

#### 【2】null和undefined无法解构 ####

准确的说，是会报错，因为他不能被转为对象。

var un = undefined;
    var {abc} = un;    //Uncaught TypeError: Cannot match against 'undefined' or 'null'.

--------------------

### **函数参数的解构赋值** ###

解释：

1. 函数参数可以解构赋值，解构方法和上面相同。
    2. 函数参数可以有默认值，有点类似c++函数参数声明时的默认值。

#### 【1】函数参数的解构赋值 ####

先看代码

function add({x, y}) { 
        return x + y;
    }
    add({x: 1, y: 2});    //3

Babel是这么处理以上代码以适配es5的，即将参数变为一个变量，然后分别将该变量的x属性和y属性赋值给变量x和遍历y，然后拿去用。

function add(_ref) { 
        var x = _ref.x,
            y = _ref.y;
    
        return x + y;
    }
    add({ x: 1, y: 2 });

类似的还有数组，道理是相同的，注意需要按格式写，比如function(\[a, b\])和function(a, b)是完全不同的，前者可以被解构赋值，而后者不行

#### 【2】函数参数的默认值 ####

函数参数也可以有默认值，比如以下代码

function add({x=10, y=20}) { 
        return x + y;
    }
    add({x: 1, y: 2}); //3
    add({x: 1});    //21
    add({});    //30

函数也可以这么声明，效果是一样的。

function add({x=10, y=20}={}) { 
        return x + y;
    }

另外，右边的\{\}可以写东西，至于写了有什么用，要参考下面的代码，应该是完整版了  
左、右都有默认值的情况下，各种情况

简单总结一下：  
（1）有传参时，永远优先使用传的参数的值；  
（2）有传参时，传的参数未传的属性，如果等号左边有默认值，则取等号左边的值；  
（3）有传参时，忽略等号右边的默认值；  
（4）无传参时，先取等号右边的默认值，剩下的取等号左边的默认值。

一句话总结：  
**传参大于非传参，无传参时，右边的当做传参**

--------------------

### 关于解构赋值时的圆括号 ###

#### 【1】简单的看了一下，能不使用圆括号就避免使用圆括号，因为是容易出错。 ####

具体来说，禁止使用的情况：  
（1）变量声明语句禁止；  
（2）函数参数中，使用解构时禁止；  
（3）先声明后解构赋值时，左边、或者右边，全部被圆括号括起来，禁止；（只有上面说允许的那个情况才可以，具体看上面）

允许的情况：  
（1）赋值语句的非模式部分。

以上具体总结来说，就是有的代码，赋值时是正常可以跑的，但是前面加个var之类变成声明语句，就会报错。  
具体参照阮一峰的博客吧，我就不细写了，个人建议还是如非必要，尽量避免使用圆括号；  
[禁止和允许使用圆括号的链接][Link 1]

--------------------

### 变量解构赋值的用途 ###

#### 【1】交换变量的值 ####

不适合交换对象的属性，会出错

//交换对象会出错，因为按引用传递
    var obj = {
        x: 1,
        y: 3
    };
    console.log(obj);    //{x:1, y:3}
    ({
        x: obj.y,
        y: obj.x
    } = obj);
    console.log(obj);    //{x:1, y:1}

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

#### 【2】在函数返回多个值时方便取出 ####

函数默认只能返回一个值，  
虽然我们也可以通过返回数组或者对象，来变相达到返回多个值，但将对象取出使用时就比较麻烦。

通过解构赋值，我们可以轻松将返回值分别赋给多个变量

function test() { 
        return [1, 2, 3];
    }
    var [a,b,c] = test();
    [a,b,c];    //[1,2,3]

#### 【3】函数参数的定义 ####

比如说，我们需要函数的参数有a，b，c三个。但是他们顺序是不确定的，我们传参的时候就需要注意顺序，  
即function test(a, b, c)\{\}，假如参数a，b，c的值分别是2，4，6，那么就应该这样调用test(2,4,6)

有了解构赋值，我们就可以这么写，无视顺序了：

function test({a, b, c}) { 
        console.log([a, b, c]);
    }
    test({b: 4, c: 6, a: 2});    //[2,4,6]

#### 【4】提取json的值 ####

比如ajax拿到一个用户信息，他是一个对象，比如是变量result，我们正常来说需要通过比如result.id, result.name等来获取值。  
但现在可以通过结构变量，直接赋给变量id和name就行。

#### 【5】函数参数给默认值 ####