简单了解一下解构赋值

什么是解构赋值

解构赋值是 ES6 引入的一种语法，它允许从数组或对象中提取值并将其赋给变量。通过解构赋值，可以更简洁地提取数据，避免了使用传统的赋值方式。

数组的解构赋值

数组的解构赋值允许我们从数组中提取值并将其赋给变量。基本语法如下：

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

嵌套数组解构

解构赋值可以用于嵌套数组：

let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo); // 1
console.log(bar); // 2
console.log(baz); // 3

默认值

可以为解构赋值设置默认值：

let [x = 1, y = 2] = [undefined, 3];
console.log(x); // 1
console.log(y); // 3

对象的解构赋值

对象的解构赋值允许我们从对象中提取属性并将其赋给变量。基本语法如下：

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
console.log(foo); // "aaa"
console.log(bar); // "bbb"

属性名不一致

如果变量名与对象属性名不一致，可以使用冒号指定变量名：

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz); // "aaa"

嵌套对象解构

可以用于嵌套对象：

let obj = {
    p: {
        x: 1,
        y: 2
    }
};
let { p: { x, y } } = obj;
console.log(x); // 1
console.log(y); // 2

用法

解构赋值的用法非常广泛，主要如下：

1. 交换变量的值：

   let a = 1;
   let b = 2;
   [a, b] = [b, a];
   

2. 从函数返回多个值：

   function getCoordinates() {
       return [10, 20];
   }
   let [x, y] = getCoordinates();
   

3. 提取 JSON 数据：

   let jsonData = {
       id: 42,
       status: "OK",
       data: [867, 5309]
   };
   let { id, status, data } = jsonData;
   

4. 函数参数的解构赋值：

   function move({ x = 0, y = 0 } = {}) {
       console.log(`x: ${x}, y: ${y}`);
   }
   move({ x: 5 });
   

5. 遍历 Map 结构：

   const map = new Map();
   map.set('first', 'hello');
   map.set('second', 'world');
   for (let [key, value] of map) {
       console.log(key + " is " + value);
   }
   

小结

解构赋值是 ES6 中的一种语法特性，它允许从数组和对象中提取值并将其赋给变量。通过解构赋值，可以以更简洁和清晰的方式处理数据，减少冗余代码，提高代码的可读性。