ES6变量解构赋值的用法

时间：2024-11-09 21:06:14

一、数组赋值（从数组中提取值，按照对应位置，对变量赋值）

1. 完全解构(变量与值数目相等)

    let arr = [1, 2, 3];

    let [a,b,c] = arr;

    console.log(a, b, c); // 1 2 3

2. 不完全解构(变量的数目小于值的数目)

    let arr = [1, 2, 3, 4];

    let [a,b,c] = arr;

    console.log(a, b, c); // 1 2 3

3. 解构不成功(变量的数目大于值的数目)

    let arr = [1, 2];

    let [a,b,c] = arr;

    console.log(a, b, c); // 1 2 undefined

备注：以上三种情况都可以给变量赋上值。

4. 默认值

默认值生效的条件是，变量严格等于undefined。

    let arr = [1, 2];

    let [a,b,c = 3] = arr;

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

    let [a,b,c = 3] = arr;

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

    let [a,b,c = 3] = arr;

    console.log(a, b, c); // 1 2 null

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

    function fun () {

      console.log(1);

    }

    let [x = fun()] = [1];
    console.log(x); // 1 
    // fun不会执行
    function fun () {

      console.log('hhhhhhhhhhh');

    }

    let [x = fun()] = [undefined];

    console.log(x); // hhhhhhhhhhh undefined
    // fun会执行
 

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

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] = [];     // y is not defined

二、对象的解构赋值(数组是按顺序，但是对象直接赋值需要按属性名来赋值)

1.  变量名即是属性名

    let obj = {

      name: 'lqw',

      age: 23

    };

    let {name, age} = obj;

    console.log(name, age); // lqw 23

2. 变量名不是属性名

    let obj = {

      name: 'lqw',

      age: 23

    };

    let {name:a, age:b} = obj;

    console.log(a, b); // lqw 23

其实对象的赋值是下面形式的简写（对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。）

    let {name: a, age: b} = {name: 'lqw', age: 23};

    console.log(a, b); // lqw 23

三、字符串解构赋值

let [a, b, c] = 'lqw';

console.log(a, b, c); // l q w

四、数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;

s === Number.prototype.toString // true

let {toString: s} = true;

s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError

let { prop: y } = null; // TypeError

五、函数参数的解构赋值

function add([x, y]){

  return x + y;

}

add([1, 2]); //

参考链接：http://es6.ruanyifeng.com/#docs/destructuring

相关文章