es6常用特性———解构

Dear 丶 2023-08-17 16:24 38阅读 0赞

## 1.解构的概念 ##

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

## 2.变量的解构 ##

没学习解构之前，我们要给变量赋值时采取以下的方式：

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

在进行对数组的解构赋值时，等号右边必须是可遍历的结构，比如说数组，Set集合，甚至Generator对象。否则会报错。

1）完全解构

let [a,b,c]=[1,2,3]; //要求=号两边的模式相同。
        console.log(a,b,c); //1 2 3

2）不完全解构（等号左右边的变量与值的个数不相等，就会发生部分解构）

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

我们可以清晰的看到，使用了解构之后代码清晰易懂，且简短。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

## 3.对象的解构 ##

要求：变量名与对象的属性名保持一致。  
1）完全解构

let obj = {
            name: 'lucy',
            age: 20,
            addr: 'aaa'
        };
        let { name, age, addr } = obj;
        console.log(name, age, addr); //lucy 20 aaa

2）不完全解构

let obj = {
                name: 'lucy',
                age: 20,
                addr: 'aaa'
            };
                let {name}=obj;
          console.log(name); //lucy

3） 给对象的属性名重新命名：

let obj = {
                name: 'lucy',
                age: 20,
                addr: 'aaa'
            };
             let { name: on } = obj;
            console.log(on); //lucy

## 4.字符串的解构 ##

字符串在解构时会被转化成一个类似数组的对象，因此可以用于数组的解构赋值。

1）完全解构：

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

2）不完全解构

let str = 'hello'；
             let [a, b] = str;
        console.log(a, b);//h e

## 5.参数的解构 ##

function show([a, b, c]) {
            console.log(a + b + c)
        }
        show([100, 200, 300])；//600
    
    
        function show1({ name: on, age }) {
            console.log(on, age)
        }
        let obj = {
            name: 'jack',
            age: 10,
        }
        show1(obj);//jack 10

在解构中，参数允许有默认值，当左边的变量解构时被赋值为undefined时将使用指定的默认值。

let [a, b, c = 0] = [100, 200];
        console.log(a + b + c);  //300
        //若c没有默认值，则  console.log(a + b + c)的结果为NaN;

需要注意的是，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x, y = 'a'] = ['hi', null]; 
        console.log(x, y);  // x='hi', y=null

## 6.解构的用途 ##

**1）交换变量的值**

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

**2）从函数返回多个值**

**3）提取json数据**

let jsonData = {
            id: '10010',
            name: '花花',
            like: ['run', 'walk']
        }
        let { id, name, like } = jsonData;
        console.log(id, name, like); // 10010 花花 (2) ["run", "walk"]

**4）遍历Map结构**

let map = new Map();
    map.set('name', 'jack');
    map.set('age', 20);
    map.set('no', 10001);
     for (let [k, v] of map) {
        console.log([k, v]);
    }
       //name is jack
        // age is 20
        // no is 10001