解构赋值是ES6引入的一种语法特性，允许我们从数组或对象中提取值并赋给变量。中括号（ [] ）用于数组解构，大括号（ {} ）用于对象解构。下面详细对比它们的异同：

一、相同点

1.  核心目的相同 

都是为了简化从复杂数据结构中提取数据并赋值给变量的过程。

2.  都支持默认值 

当解构的目标不存在或值为 undefined 时，可以提供默认值。

// 数组解构默认值
const [a = 1, b = 2] = [3]; // a=3, b=2
   
// 对象解构默认值
const {name = "Unknown", age = 0} = {name: "Alice"}; // name="Alice", age=0

3.  都支持嵌套解构 

可以处理嵌套的数组或对象结构。

// 嵌套数组解构
const [a, [b, c]] = [1, [2, 3]]; // a=1, b=2, c=3
   
// 嵌套对象解构
const {user: {name, address: {city}}} = {user: {name: "Bob", address: {city: "New York"}}};
// name="Bob", city="New York"

4.  都可以与扩展运算符（…）一起使用 

使用 ... 收集剩余元素。

// 数组解构的剩余参数
const [first, ...rest] = [1, 2, 3, 4]; // first=1, rest=[2, 3, 4]
   
// 对象解构的剩余属性
const {a, b, ...others} = {a: 1, b: 2, c: 3, d: 4}; // a=1, b=2, others={c:3, d:4}

5.  都可以忽略某些元素/属性

可以跳过不需要的值。

// 数组解构忽略元素
const [, second, , fourth] = [1, 2, 3, 4]; // second=2, fourth=4
   
// 对象解构只提取需要的属性
const {name} = {name: "Alice", age: 30, city: "Paris"}; // name="Alice"

二、不同点

1.  作用对象不同 

  • 数组解构（ [] ）用于 有序数据结构 （如数组、类数组对象）。

  • 对象解构（ {} ）用于 键值对数据结构 （如对象、Map等）。

2.  匹配机制不同 

  • 数组解构通过 位置索引 匹配值。

  • 对象解构通过 键名 匹配值。

// 数组解构 - 按位置匹配
const [x, y] = [10, 20]; // x=10（第一个位置）, y=20（第二个位置）
   
// 对象解构 - 按键名匹配
const {y, x} = {x: 10, y: 20}; // x=10（键为x的值）, y=20（键为y的值）

3.  变量名要求不同 

  • 数组解构的变量名可以是 任意合法标识符 ，因为匹配基于位置。

  • 对象解构的变量名默认必须与 对象的键名相同 ，除非使用别名。

// 数组解构 - 变量名可任意
const [firstElement, secondElement] = [1, 2];
   
// 对象解构 - 默认要求变量名与键名相同
const {name: personName, age: personAge} = {name: "Alice", age: 30}; // 使用别名

4.  顺序重要性不同 

  • 数组解构中，顺序非常重要 ，变量的赋值严格按照数组中元素的顺序。

  • 对象解构中，顺序不重要 ，变量的赋值只与键名匹配有关。

 // 数组解构顺序改变，结果不同
 const [a, b] = [1, 2]; // a=1, b=2
 const [b, a] = [1, 2]; // b=1, a=2
   
 // 对象解构顺序改变，结果相同
 const {a, b} = {a: 1, b: 2}; // a=1, b=2
 const {b, a} = {a: 1, b: 2}; // a=1, b=2

5.  特殊用法不同 

  • 数组解构 支持以下特殊用法：

    • 交换变量值

    • 函数返回多个值

// 交换变量值
let x = 1, y = 2;
[x, y] = [y, x]; // 现在x=2, y=1

// 函数返回多个值
function getValues() {
    return [1, 2, 3];
}
const [a, b, c] = getValues();

  • 对象解构支持以下特殊用法：

    • 使用动态键名

    • 解构函数参数

// 使用动态键名
const key = "name";
const {[key]: value} = {name: "Alice"}; // value="Alice"

// 解构函数参数
function printUser({name, age}) {
    console.log(`${name} is ${age} years old`);
}
printUser({name: "Bob", age: 25});

6.  默认解构行为不同 

  • 数组解构对 null 或 undefined 会抛出错误。

  • 对象解构对 null 或 undefined 会抛出错误，但对空对象{}可以正常进行（只是属性为 undefined ）。

// 数组解构 - 报错
const [a] = null; // TypeError: Cannot read properties of null (reading 'Symbol(Symbol.iterator)')
   
// 对象解构 - 对空对象正常
const {a} = {}; // a=undefined
const {a} = null; // TypeError: Cannot destructure property 'a' of 'null' as it is null.

三、应用场景对比

总结

  • 数组解构（ [] ） ：适用于有序数据，通过位置索引匹配值，变量名可任意，顺序重要。

  • 对象解构（ {} ） ：适用于键值对数据，通过键名匹配值，变量名默认需与键名相同，顺序不重要。

在实际开发中，应根据数据结构的特性选择合适的解构方式。两种解构方式经常结合使用，以处理复杂的数据结构，提高代码的可读性和简洁性。