3.解构赋值

解构的分类

1. 对象解构

2. 数组解构

3. 混合解构

4. 解构参数

对象解构

const obj = {
  str,
  arr:[1,2]
}

const {str = 'power',arr} = obj;
//解构可传默认值
console.log(str,arr); //power,[1,2]

解构赋值

let business = {
  a:1,
  b:2
},
a = 3,
b = 3;
//解构赋值
({a,b} = business);
console.log(a,b);//1,2

嵌套对象解构

let obj = {
  a:{
    b:{
      c:{
        d:5
      }
    }
  }
};
const {a:{b:{c:{d}}}} = obj;
console.log(d);//5

数组解构

数组解构

选择性的解构元素，不需要解构的元素就使用逗号代替(,)。不需要像对象解构一样使用key属性。

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

let arr2 = [1,2,3]
const [,d] = arr2
console.log(d)//3

解构赋值

如果你没有看明白上面说到的对象解构赋值的含义，那么看完下面的数组解构赋值，或许你会有比较清晰的理解。

这个例子中，正常情况下打印a的值是haha，但是将数组arr的第一个元素解构赋值给a，a的值就变成了1。

//初始化一个变量a
let a = "therefore";
//定义一个数组
let arr = [1, 2, 3];
//解构赋值a，将arr数组的第一个元素解构赋值给a，
[a] = arr;
console.log(a); // 1

使用解构赋值，还可以调换2个变量的值。

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

嵌套数组解构

let arr = [1,[11,22,33],2,3]
const [a,[b,c,d]] = arr
console.log(a,b,c,d);//1,11,22,33


//同于
"use strict";

var arr = [1, [11, 22, 33], 2, 3];
var a = arr[0],
    _arr$ = arr[1],
    b = _arr$[0],
    c = _arr$[1],
    d = _arr$[2];

console.log(a, b, c, d);//1,11,22,33
//so easy

不定元素解构

//使用扩展运算符解构赋值
let arr = [1,2,3,4]
const [...a] = arr
console.log(a);//[1,2,3,4]这种做法就是克隆arr数组

混合解构

let obj = {
  a:{
    aa:1
  },
  b:[2,3]
}
const {
  a:{aa},
  b:[...arr]
} = obj
console.log(aa,b)//1,[2,3]

解构参数

当给函数传递参数时，我们可以对每个参数进行解构，我给option的参数设置了默认值，这样可以防止没有给option传参导致的报错情况。

function Ajax(url, options) {
  const {timeout = 0, jsonp = true} = options
  console.log(url, timeout, jsonp)
};
Ajax('baidu.com', {
  timeout: 1000,
  jsonp: false
}) // "baidu.com" 1000 false

总结

本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。每一个都是重点，特别是最后一个，解构参数恐怕你经常在用了，只是通常你没发现。