Skip to content

鼓励作者:欢迎 star 或打赏犒劳

结构赋值

TIP

结构赋值(Destructuring Assignment)是 JavaScript(以及 TypeScript)中一种表达式,它允许你从数组或对象中提取数据并直接将其分配给不同的变量。这一特性大大简化了访问和分解复杂数据结构的过程,使代码更加简洁易读。下面简要介绍数组和对象的结构赋值:

数组解构

js
let arr = [1, 2, 3]

// 解构赋值
let [a, b, c] = arr

console.log(a) // 输出: 1
console.log(b) // 输出: 2
console.log(c) // 输出: 3

你也可以跳过某些元素:

js
let [first, , third] = arr

对象解构

js
对象解构允许你基于属性名称提取值
let user = { name: 'Alice', age: 30 }

// 解构赋值
let { name, age } = user

console.log(name) // 输出: Alice
console.log(age) // 输出: 30

你还可以为解构的变量指定默认值:

js
let { name, age, city = 'Unknown' } = user

解构参数

在函数参数中使用解构可以更清晰地处理特定类型的参数:

js
function printDetails({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`)
}

printDetails({ name: 'Bob', age: 25 })

混合使用与嵌套结构

解构可以用于复杂的结构 包括嵌套的对象和数组

js
let complexObj = { data: [1, 2], info: { name: 'Charlie', role: 'Admin' } }

let {
  data: [num1, num2],
  info: { name, role },
} = complexObj

console.log(num1, num2) // 输出: 1 2
console.log(name) // 输出: Charlie
console.log(role) // 输出: Admin

结构赋值是现代 JavaScript 编程中一个非常实用且强大的特性,能够有效提升代码的可读性和编写效率。

驾狗师祝您今天快乐!