深入理解 ES6 的解构表达式

点击全文阅读

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

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

文章目录

一、 数组解构赋值示例代码： 二、对象解构赋值示例代码： 三、应用场景

---

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); // 输出：1console.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

点击全文阅读