变量的解构赋值 - 字符串、数值、布尔值、函数参数

一、字符串的解构赋值

  // 字符串也能解构赋值，只是因为此时字符串被转换成了一个类似数组的对象（类似于字符串的split方法）
  let str = 'abcdefg';
  let arr = str.split('');
  console.log(arr); // [a, b, c, d, e, f, g]

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

  // 类似数组的对象都有一个length属性，因此还可以对这个属性进行解构赋值
  let { length: len } = 'hello';
  console.log(len); // 5

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

// 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象,通过对象的原型进行解构
// 以下代码中，因为数值和布尔值的包装对象都有toString属性，因此s、m都能取到值
  let { toString: s } = 123;
  console.log(s);
  console.log(s === Number.prototype.toString); // true

  let { toString: m } = true;
  console.log(m);
  console.log(m === Boolean.prototype.toString); // true

// 解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象
// 由于undefined和null无法转为对象，所以对它们进行解构赋值时都会报错
  let { prop: x } = undefined; // 报错：TypeError
  let { prop: y } = null; // 报错：TypeError

三、函数参数的解构赋值

// 函数的参数也可以使用解构赋值
  function add([x, y]) {
    return x + y;
  }

  console.log(add([1, 2])); // 3

  const result = [[1, 2], [3, 4]].map(([a, b]) => a + b);
  console.log(result); // [3, 7]

  // 函数参数的解构也可以使用默认值
  function move({x = 0, y = 0} = {}) {
    return [x, y];
  }

  console.log(move({ x: 3, y: 8})); // [3, 8]
  console.log(move({ x: 3})); // [3, 0]
  console.log(move({})); // [0, 0]
  console.log(move()); // [0, 0]

  // 下面的写法会得到和上述代码不同的值
  function move2({x, y} = {x: 0, y: 0}) {
    return [x, y]
  }
  // 这段代码只是为函数move2的参数指定默认值，而不是为变量x和y指定默认值
  console.log(move2({ x: 3, y: 8 })); // [3, 8]
  console.log(move2({ x: 3 })); // [3, undefined]
  console.log(move2({})); // [undefined, undefined]
  console.log(move2()); // [0, 0]

  // undefined会触发函数参数的默认值
  const res = [1, undefined, 3].map((x = 'yes') => x);
  console.log(res); // [1, 'yes', 3]

变量的解构赋值 - 数组篇

变量的解构赋值 - 对象篇

如有问题，请指出，接受批评。

个人微信公众号：