Skip to content

JS解构 ​

2023-6-29 11:47:01

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

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

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

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

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

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

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

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

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

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

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

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

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

Released under the MIT License.