es6 的解构赋值

娃哈哈哈哈呀2024-08-19 12:32

1.数组的结构赋值

以前，为变量赋值，只能直接指定值。

javascript 复制代码

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

javascript 复制代码

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

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于"模式匹配"，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

2.对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

javascript 复制代码

  let { bar1, foo } = { foo: 'aaa', bar1: 'bbb' };
        console.log(
            foo, // "aaa"
            bar1 // "bbb"
        );
  let { baz } = { foo: 'aaa', bar: 'bbb' };
  console.log(baz);// undefined

如果解构失败，变量的值等于undefined。

3.字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

javascript 复制代码

 const [a, b, c, d, e] = 'hello';
 console.log(a, b, c, d, e); // "h e l l o"