深入理解 ES6 的解构表达式

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

No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例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);// 输出：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

• 函数参数的简化：

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

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

functionfetchInfo(){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