深入理解 ES6 的解构表达式

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

ES6 的解构赋值（Destructuring Assignment）是一种新的声明和提取数组或对象属性的简洁方式，它允许我们从数组或对象中提取值并将这些值赋给相应的变量。这种方式简化了变量赋值和参数传递的过程，提高了代码的可读性和便利性。

一、 数组解构赋值

示例代码：

// 从数组中解构赋值
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出：1 2 3

// 默认值
let [x = 'default', y = 'fallback'] = [1];
console.log(x, y); // 输出：1 fallback

// 解构剩余部分
let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 输出：1
console.log(rest); // 输出：[2, 3, 4, 5]

// 解构嵌套数组
let [head, [nested1, nested2]] = [1, [2, 3]];
console.log(head, nested1, nested2); // 输出：1 2 3

二、对象解构赋值

示例代码：

// 从对象中解构赋值
let { firstName: fn, lastName: ln } = { firstName: 'Alice', lastName: 'Smith' };
console.log(fn, ln); // 输出：Alice Smith

// 如果对象没有该属性，可以通过默认值赋值
let { color = 'red' } = {};
console.log(color); // 输出：red

// 直接解构赋值给同名变量
let { firstName, lastName } = { firstName: 'Bob', lastName: 'Johnson' };
console.log(firstName, lastName); // 输出：Bob Johnson

// 解构嵌套对象
let obj = { profile: { name: 'Tom', age: 25 } };
let { profile: { name, age } } = obj;
console.log(name, age); // 输出：Tom 25

// 非必须存在的属性，可以放在单独的圆括号中
let { a, b, c } = { a: 1, b: 2 };
({ c } = { c: 3 }); // 不报错，即使c不在原始对象中
console.log(a, b, c); // 输出：1 2 3

三、应用场景

• 交换两个变量的值无需临时变量：

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 输出：2 1

• 函数参数的简化：

function processOptions({ width = 800, height = 600, title }) {
  // ...
}
processOptions({ title: 'My App', height: 400 });

• 函数返回多个值时的便捷处理：

function fetchInfo() {
  return [1, 2, 3];
}

let [info1, info2, info3] = fetchInfo();

• 处理 JSON 数据或 API 回调：

let jsonData = { id: 1, name: 'John Doe' };
let { id, name } = jsonData;
console.log(id, name); // 输出：1 John Doe