解构赋值

在js中，我们经常会将对象或者数组里面的一部分数据作为参数传递给函数，如果我们使用传统的.方法会很麻烦。

解构赋值就很好的解决了这样一种问题。

解构赋值是一种特殊的语法，可以将对象或者数组中的数据解构出来，然后赋值给变量。

数组解构

let arr = [1,2,3,4,5];
    let [a,b,c,d,e] = arr;
    console.log(a,b,c,d,e); // 1 2 3 4 5
复制代码

通过上面的例子，我们可以看到通过解构赋值，我们将数组的数据分别赋值给了变量a,b,c,d,e。

注意：

解构并不会破坏原来的数组，他只是将数组每个位置的数据赋值了某个变量，数组没有发生改变。

当然，有人会有这样一个问题，要是中间有一个数据我不需要，那该怎么办呢?

let arr = [1,2,3,4,5];
    let [a,,c,d,e] = arr;
    console.log(a,c,d,e); // 1 3 4 5
复制代码

上面的代码我们看到，数组里面2的数据是没有被复制的，这是因为我们使用了空位，空位就是在解构赋值的时候，如果某个位置没有数据，那么就会使用空位。

空位不会影响后面的数据，所以3的数据还是会被赋值给c。 上面代码有两个,连着，两个逗号中间就是一个空位。

对象解构

let obj = {
        name: 'zhangsan',
        age: 22,
    }
    let {name,age} = obj;
    console.log(name,age); // zhangsan 22
复制代码

通过上面的例子，我们可以看到，对象的解构赋值和数组的解构赋值是一样的，只不过对象的解构赋值是通过{}来进行解构的。

注意：

• 我们进行对象解构的时候，定义的变量要与对象里面的属性一样，不可以是其他字符，否则获取不到我们想要的数据。
  
• 还有就是，对象解构赋值的时候，如果对象里面没有我们想要的属性，那么就会报错(undefined)。
  

在数组解构中我们解构时变量顺序可以改变，不会影响到我们最后的结果。

let obj = {
        name: 'zhangsan',
        age: 22,
    }
    let {age,name} = obj;
    console.log(name,age); // zhangsan 22
复制代码

前面我们说到如果我们定义了一个对象不存在的属性，那么就会报错；我们可以这样解决：

我们可以给这些缺失的属性添加一个默认值。

let obj = {
        name: '海绵宝宝'，
        age: 22,
    }
    let {name, age, add:'比奇堡'} = obj；
    console.log(name,age,add); // 海绵宝宝 22 比奇堡
复制代码

上面的代码我们可以看到，我们给add属性添加了一个默认值，当我们获取add属性的时候，如果对象里面没有add属性，那么就会使用默认值。

剩余模式

前面我们提到过空位，那么要是我们只要前面一部分数据，后面所有数据想要赋值到其他地方，如果使用传统方法肯定费时费力。那么该怎么办呢？

这时候剩余模式就派上了大用场：

let arr = [1,2,3,4,5];
    let [a,...b] = arr;
    console.log(a,b); // 1 [2,3,4,5]
复制代码

这段代码中，我们将数组第一个数据赋值给a，其余全部数据保存在b里面。

嵌套解构

在实际开发中，我们难免会遇到，某个对象里面还包含着函数这样的结构，那么这种解构赋值又该如何操作呢？

嵌套解构可以做到，它的要求就是等号左侧的结构需要与右侧结构一致。

let obj = {
        ID: { name: '海绵宝宝', age: 22 },
        aihao: '抓水母',
        arr: [1, 2, 3],
    }
    let { ID: { name, age }, aihao, arr: [a, b, c] } = obj;
    console.log(name, age, aihao, a, b, c); // 海绵宝宝 22 抓水母 1 2 3