ES6之变量的解耦赋值

401 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

变量的解耦赋值

解耦赋值是什么

ECMAScript 6 允许按照一定模式从数组或对象中提取值,对变量进行赋值。这种赋值方式被称为“解耦赋值”(Destructing)。

  • ECMAScript 5 为变量赋值方式如下:

    var a = 10;
    var b = 20;
    var c = 30
    
  • ECMAScript 6 为变量赋值方式如下:

    let[a,b,c]=[10,20,30];
    

ECMAScript 6 的 “解耦赋值” 本质上属于 “模式匹配” 。赋值运算符量变的模式相同,左边的变量会被赋予对应位置的值。


解耦赋值失败

如果解耦赋值失败的话,变量的值相当于undefined。

定义变量的数量大于值的数量——解耦赋值失败。

示例代码如下:

/*
    变量的索引值应该对应值的索引值
    目前这个状况,定义了一个变量a,并没有对应的值。相当于
    声明了一个变量a,但没有赋值(默认为undefined)
*/
// 解耦赋值失败1
let [a] = [];
console.log(a);//undefined
// 解耦赋值失败2
let [x,y] = [1]
console.log(x,y);//1 undefined

不完全解耦赋值

如果赋值运算符左边的变量的模式只匹配赋值运算符右边数组的一部分的话,则会解耦赋值不完全。但这种情况下,解耦赋值依旧可以成功。

// 不完全解耦赋值 - 定义变量的数量小于值的数量
let [a,b]=[1,2,3];
console.log(a,b)//1  2

默认值

/*
解耦赋值失败时,变量的默认值为undefined
默认值 - 指的就是在解耦赋值失败时,重写undefined默认值
*/
let [a = true] = [100];
console.log(a);//100

let [x,y=30] = [10];
console.log(x,y)//10  30

//ES 6底层将为变量赋值的值与undefined进行全等于比较,全等则默认值生效。
let [m,n=100] = [10,'undefined'];
console.log(m,n)//10 undefined
// ES6 底层将变量赋值的值只与undefined进行比较(null等没有意义)
let [d,b=100] = [10,null];
console.log(d,b)//10 null

值的注意的是,ECMAScript 6 内部使用全等运算符判断指定位置是否存在值。所以只有当数组中成员的值等于undefined 时,默认值才会生效。