解构赋值（2）

解构赋值和扩展运算符相关知识

字符串的解构赋值

和数组的解构赋值使用方法是类似的，使用[]，空格也会被匹配到，不使用扩展运算符时返回的是字符，使用扩展运算符时会把每个剩余未匹配的字符作为一项组成一个数组。

let [a, b, c, ...oth] = "I am hlz" // 空格也会被识别
console.log(a, b, c, oth) // I a ['m', ' ', 'h', 'l', 'z']

let { length } = "I am hlz" // 提取属性【了解即可】
console.log(length) // 8

// 所以解构赋值+扩展运算符可以将字符串转为数组
let [...arrStr] = "I am hlz"
console.log(arrStr) // ['I', ' ', 'a', 'm', ' ', 'h', 'l', 'z']

• 等号左边是数组结构，右边是字符串
• 左边的[]中为需要赋值的变量
• 右边为需要解构的字符串

---

结合扩展运算符（...）将字符串转换为数组

使用扩展运算符时会把每个剩余未匹配的字符作为一项组成一个数组。

let str = "hello " // 空格也会被识别

let [ ...arrStr1 ] = "hello " // 注意理解结合扩展运算符
let arrStr2 = str.split('')
let arrStr3 = [ ...arrStr ]
// ['h', 'e', 'l', 'l', 'o', ' ']

• 例子中spStr1与spStr2、spStr3得到的都是一样的。
• spStr1使用的是字符串的解构赋值与扩展运算符结合。
• spStr2使用的是字符串的split方法。
• spStr3使用的是纯粹的扩展运算符，可以理解为“展开运算符”，较难理解，通过下面2个例子来解释：
  • 在创建数组(例子中的oStr)的时候，通过扩展运算符将字符串展开，字符串的每一个字符构成一个数组元素

    let str="我超级棒的！";
    
    const oStr = [...str];
    console.log(oStr);//["我", "超", "级", "棒", "的", "！"]

    或者

    let str = "antzone";
    console.log([...str]);// ["a", "n", "t", "z", "o", "n", "e"]

---

提取属性（了解即可）

let str = "我超级棒的！";
const { length, split } = str
// length 6
// split ƒ split() { [native code] }

---

数值与布尔值的解构赋值（了解即可）

数值与布尔值的解构赋值与对象的结构赋值方法类似。他获取到的是数值与布尔值的属性。

let { toString: ts } = 123;
console.log(ts) // ƒ toString() { [native code] }
console.log(ts === Number.prototype.toString) // true
console.log(ts.call(123)) // '123'
// 直接123.toString()会报错，js解析会把.当成小数点，改成(123).toString()可以正常使用

const { valueOf: vo } = 1;

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

在这个例子中我们先是获取到数值1的属性valueOf，并将其赋给vo，当然不赋给vo也是可以的，结果可以看到是获取成功了。（关于valueOf 方法）

然后我们获取布尔值true的属性toString，并将其赋给ts，当然不赋给ts也是可以的，结果可以看到也是获取成功的。

---

函数参数的解构赋值

• undefined 可以触发默认值
• 注意两种指定默认值的方法，一种是对变量指定，一种是对参数指定，会得到不同的答案

  let arr = [[1,2], [3, 4]]
  let res = arr.map([a, b] => a + b)
  console.log(res) // [3, 7]
  
  // undefined 可以触发默认值
  let arr = [1, undefined, 2]
  let res = arr.map((a = 'test') => a);
  console.log(res) // [1, 'test', 2]
  
  // 对参数指定默认值
  // 注意：如果函数调用时未传递参数或传递的参数不是一个对象，那么解构赋值将使用默认值
  // 使用场景：防止调用函数时没传参数的情况
  let func = ({x, y} = {x: 0, y: 0}) => {
  return [x, y]
  }
  console.log(func(1, 2)) // [undefined, undefined] 参数不是对象，解构赋值失败，x 和 y 都会得到 undefined 值，而不是指定的默认值 {x: 0, y: 0}
  console.log(func()) // [0, 0]
  console.log(func({})) // [undefined, undefined]
  console.log(func({x: 1})) // [1, undefined] 注意和“对变量指定默认值”的区别，这里传参是个对象，就一定不会取默认值
  
  // 对变量指定默认值
  // 如果函数调用时传递的参数是一个对象，但该对象缺少 x 或 y 属性时，解构赋值将使用相应的默认值 0
  let func = ({x=0, y=0}) => {
  return [x, y]
  }
  
  console.log(func({x:1,y:2})) // [1, 2]
  console.log(func()) // error
  console.log(func("123")) // [0, 0]
  console.log(func({})) // [0, 0]
  console.log(func({x: 1})) // [1, 0]

---

Node.js 函数引用 与解构赋值

为什么有时候引用外部js文件中的函数时要使用{}进行解构赋值？

可以看笔记“Node.js函数引用与解构赋值”

---

React.js与解构赋值

可以看笔记“React.js基础精讲(1)”

---