ES6基本的语法(四) destructuring 解构赋值

destructuring 解构赋值

解构也叫解构化赋值:解构过程中，具备赋值和变量声明两个功能。目的在于把等号左右长的相似的两个东西内部的值取出来

数组解构赋值

基本用法

// 可以从数组中提取值，按照对应位置，对变量赋值。
let [a, b, c] = [1, 2, 3];

// 模式匹配 解构
let [a, [[b], c]] = [1, [[2], 3]];
a // 1
b // 2
c // 3

let [ , , a] = ["1", "2", "3"];
a // "3"

let [a, , c] = [1, 2, 3];
a // 1
c // 3

let [a, ...b] = [1, 2, 3, 4];
a // 1
b // [2, 3, 4]

let [a, b, ...c] = ['1'];
a // "1"
b // undefined  如果解构不成功，变量的值就等于undefined。
c // []

let [b] = [];
let [a, b] = [1];
// b的值都会等于undefined

let [a, [b], c] = [1, [2, 3], 4];
a // 1
b // 2
c // 4
// 属于不完全解构，但是可以成功

let [a, b, c] = new Set(['a', 'b', 'c']);
a // "a" 对于 Set 结构，也可以使用数组的解构赋值。

事实上只要数据结构具有 遍历器(Iterator) 接口，都可以采用数组形式的解构赋值。

数组可以使用默认值

let [a = true] = [];
a // true

let [a, b = 'b'] = ['a']; // a='a', b='b'
let [a, b = 'b'] = ['a', undefined]; // a='a', b='b'

对象解构赋值

基本用法

let { a, b } = { a: 'aaa', b: 'bbb' };
a // "aaa"
b // "bbb"

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

let { b, a } = { a: 'aaa', b: 'bbb' };
a // "aaa"
b // "bbb"

let { c } = { a: 'aaa', b: 'bbb' };
c // undefined

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

const { log } = console;
log('hello') // hello

变量名与属性名不一致，必须写成下面这样

let { a: c } = { a: 'aaa', b: 'bbb' };
c // "aaa"

默认值

let {a, b = 5} = {a: 1};
a // 1
b // 5

let {a: b = 3} = {a: 5};
b // 5

字符串解构赋值

基本用法

const [a, b, c, d, e, f, g] = 'wuyanzu';
/*
    a: w,
    b: u,
    c: y,
    d: a,
    e: n,
    f: z,
    g: u
*/

const {length: len} = 'wuyanzu';

console.log(len) // 输出 7

解构赋值的原理是，如果等号右边的值不是对象或数组，就先将其转为对象。对于 undefined 和 null 这两个无法转成对象，所以没有办法解构，会报 // TypeError

函数解构赋值

基本用法

function sum([a, b]){
  return a + b;
}

sum([1, 2]); // 3

sum 函数里面的参数是个数组，里面的 1，2 会被 a，b 给解构

默认值

function box(a = 0, b = 0) {
  return (x, y);
}

box(3,8); // 3, 8
box(3); // 3, 0
box(); // [0, 0]

可以关注一下