ES6解构赋值与扩展运算符实战指南：从基础到JSON处理

前言

近期在深入学习JavaScript时，接触到了ES6标准引入的解构语法。这一特性显著提升了代码的简洁度，且已在企业级开发中广泛应用。若未来工作中同事使用此特性而您无法理解，将严重影响协作效率。因此，掌握这一知识点至关重要。

您可以选择不使用它，但绝不能不懂其原理。

ES6引入诸多特性旨在简化代码编写流程，解构运算符便是其中的典型代表。它通过减少显式的赋值语句或降低对数据下标、对象属性的直接访问，使代码更加精简并增强可读性。

解构符号的核心作用

解构赋值本质上是赋值运算符的扩展形式。它针对数组或对象进行模式匹配，并将匹配到的值赋予相应的变量。

ES6允许按照特定模式，从数组和对象中提取值，进而对变量进行赋值，这一过程被称为解构（Destructuring）。

具体使用方法

基本使用场景


let [a,b,c] = [1,2,3];
// let a = 1, b = 2, c = 3;

嵌套结构解构


// 数组
 let [a, [[b], c]] = [1, [[2], 3]];
	console.log(a); // 1
	console.log(b); // 2
	console.log(c); // 3
// 对象
 let obj = { x: ['hello', {y: 'world'}] };
 let { x: [x,{ y }] } = obj;
	console.log(x); // hello
	console.log(y); // world

忽略特定元素


// 数组
 let [a, , b] = [1, 2, 3];
	console.log(a); // 1
	console.log(b); // 3

// 对象
 let obj = { x: ['hello', { y: 'world' }] };
 let { x: [x, { }] } = obj;
	console.log(x); // hello

不完全解构处理


// 数组
 let [a = 1, b] = [];
	console.log(a); // 1
	console.log(b); // undefined

// 对象
 let obj = { x: [{ y: 'world' }] };
 let { x: [{ y }, x] } = obj;
	console.log(x); // undefined
	console.log(y); // world

剩余运算符（Rest Operator）的应用


// 数组
 let [a, ...b] = [1, 2, 3];
	console.log(a); // 1
	console.log(b); // [2,3]

// 对象
 let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
	console.log(a); // 10
	console.log(b); // 20
	console.log(rest); // { c: 30, d: 40 }

字符串解构


let [a, b, c, d, e] = 'hello';
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

解构默认值设置


// 当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
 let [a = 2] = [undefined]; 
	console.log(a); // 2
// 对象
let {a = 10, b = 5} = {a: 3};
 	console.log(a); // 3
 	console.log(b); // 5

变量值交换技巧


let a = 1;
let b = 2;
[a,b] = [b,a];
	console.log(a); // 2
	console.log(b); // 1

解构赋值的实际应用场景


// 1. 浅克隆与合并
let name = { name: "aaa" }
let age = { age: 'bbb' }
let person = { ...name, ...age }
console.log(person) // { name: "aaa", age: 'bbb' }

let a = [1,2,3];
let b = [4,5];
let c = [...a,...b];
console.log(c); // [1,2,3,4,5]

// 2. 提取JSON数据
let JsonData = { id: 10, status: "OK", data: [111, 222] } 
let { id, status, data: numbers } = JsonData; 
console.log(id, status, numbers); //10 "OK" [111, 222]

// 3. 函数参数的定义
// 参数有序
function fun1([a, b, c]) { console.log(a, b, c) } 
fun1([1, 2, 3]); // 1 2 3

// 参数无序
function fun2({ x, y, z }) { console.log(x, y, z) } 
fun2({ z: 3, x: 2, y: 1 }); // 2 1 3

// 参数有默认值
function fun3 ([a=1,b]) {
console.log(a,b);
}
fun3([,3]) // 1 3

应用案例概述

JSON数据提取

上述列举了几种解构赋值的常见应用。其中，提取JSON数据是最常用的场景之一。后端向前端传输的数据通常为JSON格式，前端需将这些数据赋值给对象，此时解构赋值便发挥了关键作用。

扩展运算符（Spread Operator）的应用

我在LeetCode刷题过程中曾使用过该特性。例如，通过`arr.push(...arr1)`来合并两个数组，这类似于前文提到的浅克隆与合并操作。相较于传统的数组合并方式，这种方法极大地简化了代码逻辑。

以LeetCode第88题“合并两个有序数组”为例。


var merge = function(nums1, m, nums2, n) {
    nums1.length=m;
    nums2.length=n;
    nums1.push(...nums2);
    let arr=nums1.sort((a,b)=>{
        return a-b;
    })
    return arr;
};

该运算符的作用是将数组中的数据遍历出来，并拷贝到当前对象或数组中。

`arr.push(...arr1)`方法会将`arr1`数组的元素逐一解析并依次添加到`arr`中，从而完成两个数组的合并操作。

变量值交换

回顾变量交换的应用。曾有一位学长在面试中提出：在不占用额外内存空间的情况下，交换变量a与b的值。当时的解法包括使用异或运算或数学方法（如`a=a+b, b=a-b, a=a-b`）。如今，利用解构语法`[a,b] = [b,a]`也能实现相同效果，且代码更为直观。

总结

至此，关于JavaScript ES6解构运算符的理解与运用介绍完毕。如需了解更多ES6解构相关内容，请搜索本站过往文章或继续阅读后续相关文章。感谢大家的支持！

JavaScript ES6 解构赋值与扩展运算符详解

前言