JS解构

2023-6-29 11:47:01

使用与对象匹配的结构来实现对象属性赋值，比如

const obj = {
  name: 'Richard',
  age: '18'
}

const { name: myName, age: myAge } = obj
console.log(myName) // Richard
console.log(myAge) // 18

如果想让变量直接使用属性的名称，则可以使用简写语法

const obj = {
  name: 'Richard',
  age: '18'
}

const { name, age } = obj
console.log(name) // Richard
console.log(age) // 18

解构赋值不一定与对象的属性匹配，赋值时可以忽略一些属性，但是如果引用的属性不存在于对象中，则改变量的值为 undefined

const obj = {
  name: 'Richard',
  hobby: 'skiing'
}

// 解构时对象中没有 age 属性
const { name, age } = obj
console.log(name) // Richard
console.log(age) // undefined

此外解构还有其他的一些用法，解构会在内部使用函数 ToObject() 把源数据结构转换为对象，这意味着在对象解构的上下文中一些原始值会被当成对象，也意味着 undefined 和 null 不能被解构，否则会抛出错误。

const { length } = 'Richard'
console.log(length) // 6

const  { constructor: c } = 123
console.log(c === Number) // true 

const { _ } = null // TypeError
const { _ } = undefined // TypeError