JavaScript 解构：数组和对象的简化处理
ES6 引入的 JavaScript 解构功能，让数组和对象数据的提取和赋值变得高效便捷。它提升了代码的可读性和简洁性。
1. 数组解构
数组解构将数组元素直接赋值给变量：
1
2
3
4
5
6
const numbers = [1, 2, 3, 4];
const [x, y, z] = numbers;
console.log(x); // 输出：1
console.log(y); // 输出：2
console.log(z); // 输出：3
使用逗号占位符跳过数组元素：
1
2
3
4
5
const numbers = [1, 2, 3, 4];
const [x, , z] = numbers;
console.log(x); // 输出：1
console.log(z); // 输出：3
为缺失元素设置默认值：
立即学习“Java免费学习笔记（深入）”；
1
2
3
4
5
const numbers = [1];
const [x, y = 2] = numbers;
console.log(x); // 输出：1
console.log(y); // 输出：2
2. 对象解构
对象解构将对象属性赋值给变量，使用花括号 {}：
1
2
3
4
5
6
7
8
9
10
11
const person = {
firstName: "John",
age: 30,
city: "New York"
};
const { firstName, age, city } = person;
console.log(firstName); // 输出：John
console.log(age); // 输出：30
console.log(city); // 输出：New York
解构时可重命名变量：
1
2
3
4
5
6
7
8
9
const person = {
firstName: "John",
age: 30
};
const { firstName: name, age: years } = person;
console.log(name); // 输出：John
console.log(years); // 输出：30
为对象属性设置默认值：
1
2
3
4
5
6
7
8
const person = {
firstName: "John"
};
const { firstName, age = 25 } = person;
console.log(firstName); // 输出：John
console.log(age); // 输出：25
解构嵌套对象：
1
2
3
4
5
6
7
8
9
10
11
12
13
const person = {
firstName: "John",
address: {
city: "New York",
zip: "10001"
}
};
const { firstName, address: { city, zip } } = person;
console.log(firstName); // 输出：John
console.log(city); // 输出：New York
console.log(zip); // 输出：10001
3. 函数参数中的解构
在函数参数中直接使用解构：
数组解构1
2
3
4
5
6
function showCoords([x, y]) {
console.log(`x: ${x}, y: ${y}`);
}
const coords = [10, 20];
showCoords(coords); // 输出：x: 10, y: 20
1
2
3
4
5
6
function showPerson({ firstName, age }) {
console.log(`Name: ${firstName}, Age: ${age}`);
}
const person = { firstName: "Jane", age: 25 };
showPerson(person); // 输出：Name: Jane, Age: 25
4. 剩余运算符与解构
剩余运算符 (...) 收集剩余元素或属性：
数组1
2
3
4
5
const numbers = [1, 2, 3, 4];
const [first, ...rest] = numbers;
console.log(first); // 输出：1
console.log(rest); // 输出： [2, 3, 4]
1
2
3
4
5
6
7
8
9
10
const person = {
firstName: "John",
age: 30,
city: "New York"
};
const { firstName, ...rest } = person;
console.log(firstName); // 输出：John
console.log(rest); // 输出： { age: 30, city: New York }
总结
作者：Abhay Singh Kathayat
全栈开发人员，精通前后端技术，致力于构建高效、可扩展、用户友好的应用程序。
联系邮箱：kaashshorts28@gmail.com以上就是掌握 JavaScript 中的解构：简化数组和对象的详细内容，更多请关注php中文网其它相关文章！