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

╰+哭是因爲堅強的太久メ 2021-09-30 02:24 237阅读 0赞

**一、字符串的解构赋值**

// 字符串也能解构赋值，只是因为此时字符串被转换成了一个类似数组的对象（类似于字符串的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]

[变量的解构赋值 - 数组篇][-]

[变量的解构赋值 - 对象篇][- 1]

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

个人微信公众号：

![20200824115129512.png][]

[-]: https://blog.csdn.net/qq_43363884/article/details/95449122
[- 1]: https://blog.csdn.net/qq_43363884/article/details/95591610
[20200824115129512.png]: /images/20210812/15019b46c5dd47b9841dc74154c32526.png