解构赋值

1，数组的解构赋值

---

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

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

let [a] = 1  //报错  因为要在数组内一一对应 ，1 不在数组

2，默认值

---

let [a,b=3] = [2]
// a 2
// b 3

let [a, b=2] = [3,4]
//a 3
//b 4

数组对值有没有？如果没有（数组对没有指undefined）就是用默认值，如果有就是用对应值

let [a=2, b=3] = [undefined, null]
a //2
b //null

let [a=1, b=a] = [2]
a// 2
b// 2
分析：a先解构赋值到2，b没有对应值，所以赋值到默认值a，就是2，所有b等于2

3.对象的解构赋值

---

前置知识：

在vue里面引入组件的时候都试过：要引入一个组件，直接写组件的名字就可以了，如我要引入Footer，
直接在components里面写Footer，其实相当于Footer:Footer，单写一个Footer是ES6的写法

let p1 = {name, age}
//等同于
let p2 = {name: name, age: age}

对象解构赋值.png

4.默认值

---

let {x,y=5} = {x:5}
x // 5
y // 5

5. 函数解构

---

function add([x=1,y=2]){
  return x+y
}

add() //error 因为没有传入参数，且无默认值，无法解构赋值（等号就是默认值）
正确写法：function add([x.y]=[1,2]){...} 这样他就有默认值是1和2

add([2]) //4 //此时Y的默认值为undefined
add([3,4]) //7

function sum({x, y}={x:0, y:0}, {a=1, b=1}){
    return [x+a, y+b]
}
sum({x:1, y:2}, {a:2}) //[3, 3]

如果运行sun({x:1,y:2})的话，就会报错，原因跟上面运行add()一样，因为ab没有参数传入，无法解构赋值

6.作用

---

交换

let [x,y] = [1,2];  //代码风格要改变 一定要有分号（数组后面 不然会连在一起）
 [x,y] = [y,x]
x    //  2
y    //  1

默认值使用

function ajax({url, type='GET'}){
  ...
}

ajax({'http://e1fang.github.io'}) //那么就会使用默认值 GET的方式去请求

ajax({'http://e1fang.github.io', 'POST'}) //这样的话 就会用对值POST去请求

这样的话，用户只需要输入一个url就可以了，我们可以不用去判断是否用什么方式去请求，即：如果type存在的话，就使用type的值，如果不存在的话，就使用默认值