ES6 - 变量的解构赋值

太过爱你忘了你带给我的痛 2023-10-11 12:47 33阅读 0赞

## 数组的解构赋值 ##

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

// 请先看一段代码
    let a = 1
    let b = 2
    let c = 3
    console.log(a,b,c)//1 2 3

实现如上代码， ES6 却可以这么写：

// 数组中提取值
    let [a,b,c] = [1,2,3]
    console.log(a,b,c)//1 2 3

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值，本质上，这种写法属于 **“模式匹配”** ，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

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

**使用嵌套数组进行解构的一些例子：**

// 嵌套数组解构
    let [a, [[b], c]] = [1, [[2], 3]]
    console.log(a,b,c)//1 2 3
    
    // 存在空值解构
    let [ , , a] = ["1", "2", "3"];
    console.log(a)//3
    
    // 模式不匹配解构
    let [a, b, c] = ['1']
    console.log(a)//1
    console.log(b,c)//undefined undefined

可以看到，代码最后一段 **b / c** 没有解构成功，也就是它们没有被正确赋值，所以为 **undefined**。

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

**另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组：**

// 左边的模式不够全部匹配右边的模式(成功解构)
    let [x, y] = [1, 2, 3]
    console.log(x,y)//1 2
    
    // 存在嵌套数组(成功解构)
    let [a, [b], c] = [1, [2, 3], 4]
    console.log(a,b,c)//1 2 4

以上两种情况都不属于完全解构，但这种情况下解构依然可以成功。

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

**如果等号的右边不是数组(不是可遍历的结构)会报错：**

let [x] = 1;
    let [x] = false;
    let [x] = NaN;
    let [x] = undefined;
    let [x] = null;
    let [x] = { };

上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口(前五个表达式)，要么本身就不具备 Iterator 接口（最后一个表达式）。

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

**对于 Set 结构，也可以使用数组的解构赋值：**

// Set对象
    let [x, y, z] = new Set(['1', '2', '3'])
    console.log(x,y,z)//1 2 3

> 只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

**解构赋值允许指定默认值：**

let [a = true] = []
    let [b = false] = []
    console.log(a,b)// true false
    
    let [x, y = 2] = [1]
    console.log(x,y)//1 2
    
    let [x, y = 2] = [1, Error]
    console.log(x,y)//1 ƒ Error()
    
    let [x, y = 2] = [1, undefined]
    console.log(x,y)//1 2

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

**注意，ES6 内部使用严格相等运算符(===)，判断一个位置是否有值，所以只有当一个数组成员严格等于 undefined，默认值才会生效：**

let [x = 1] = [undefined]
    console.log(x)//1
    
    let [y = 1] = [null]
    console.log(y)//null
    
    console.log(undefined == null)//true
    console.log(undefined === null)//false

上面代码中，如果一个数组成员是 null，默认值就不会生效，因为 null 不严格等于 undefined。

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

**如果默认值是一个表达式，那么这个表达式是惰性求值，即只有在用到的时候才会求值：**

function Fun() { 
      return 0
    }
    
    // 惰性求值 => 不调用 Fun() 不会拿到值
    let [x = Fun()] = [1]
    console.log(x)//1

上面代码中，因为 x 能取到值(1)，所以函数 Fun 根本不会执行。

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

**如上代码等价于这段代码：**

let x;
    
    if([1][0] === undefined) { 
      x = Fun()
    }else{ 
      x = [1][0]
    }

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

**默认值可以引用解构赋值的其他变量，但该变量必须已经声明：**

let [x = 1, y = x] = []     // x=1 y=1
    let [x = 1, y = x] = [2]    // x=2 y=2
    let [x = 1, y = x] = [1, 2] // x=1 y=2
    let [x = y, y = 1] = []     // ReferenceError: y is not defined

最后一个表达式之所以会报错，是因为 x 用 y 做默认值时，y 还没有声明，正如标题所说。

## 对象的解构赋值 ##

解构不仅可以用于数组，还可以用于对象，请看：

let { one, two} = { one:'1', two:'2'}
    console.log(one,two)//1 2

对象的解构与数组有一个重要的不同，即数组的元素是按次序排列的，变量的取值由它的位置决定。

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

**对象的属性没有次序，变量与属性同名，就能取到正确的值：**

let { two, one} = { one:'1', two:'2'}
    console.log(one,two)//1 2
    
    // 变量与属性不同名
    let { error, two} = { one:'1', two:'2'}
    console.log(error)//undefined

第一个例子，等号左边的两个变量的次序与等号右边两个同名属性的次序不一致，但是对取值完全没有影响，但是第二个例子的变量没有对应的同名属性，导致取不到值，结果为 undefined。

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

**如果解构失败，变量的值等同于 undefined ：**

let { a} = { b:true}
    console.log(a)//undefined
    console.log(a == undefined)//true

可以看到，右边对象中没有 a 属性，所以 a 是取不到值的，这时访问就会抛出 undefined 。

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

**来个高级点的，将现有对象的方法赋值到某个变量：**

// console.dir
    const { dir} = console
    
    // 查看 dir
    console.log(dir)//ƒ dir() { [native code] }
    
    // 尝试使用(查看 Error 对象)
    dir(Error)//ƒ Error()
    
    //--------------------------------------------
    
    // console.log
    const { log} = console
    
    // 查看 log
    console.log(log)//log() { [native code] }
    
    // 尝试使用(打印 "成功!" 信息)
    log("成功")//成功

拿第二个例子来说(log)，通过解构赋值方法，将右边的 console 对象赋予左边的 log 方法，此时 log 变量携带的就是 console.log ，这样可以很方便的使用。

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

**如果变量名与属性名不一致，可利用 “别名” 获取：**

// 变量 b 与属性 c 不一致,拿不到值
    let { a,b} = { a:true,c:false}
    console.log(b)//undefined
    
    // 解决方法（1）
    let { a,c:b} = { a:true,c:false}
    // 测试
    console.log(b)//false
    console.log(a)//true
    
    // 解决方法（2）
    let obj = { a:true,c:false}
    let { a:a,c:b} = obj
    // 测试 
    console.log(b)//false
    console.log(a)//true

像上面这样，变量 b 想要获取属性 c 的值(false)，但由于命名不同，导致无法正常获取，系统抛出 undefined 理所当然，解决方法也很简单，利用别名来获取，最后通过访问别名的方式得到想要的值。

这也说明一个问题，对象的解构赋值是下面形式的简写：

let { a:a,b:b} = { a:true,b:false}
    console.log(a,b)//true false

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

**根据上面的例子，也就是说对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，其真正被赋值的是后者，而不是前者：**

let { a:b} = { a:true,c:false}
    
    // 后者(b)
    console.log(b)//true
    
    // 前者(a)
    console.log(a)//a is not defined

a 是匹配模式，b 才是变量，也就是说先找到同名属性 a ，然后将 true 赋予后者 b ，应了上面的话，后者(b)才是真正被赋值的变量，而前者(a)只负责找值(true)。