ES6：解构赋值

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

一、数组解构

1、简单的数组解构

let [a,b,c] = [1,2,3]

//a=1,b=2,c=3

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

2、嵌套数组解构

let [a,[b,c],d] = [1,[2,3],4]

3、可忽略

//第一个例子
let [a, , ,d] = [1,2,3,4]
a // 1
d // 4

//第二个例子
let [, , ,d] = [1,2,3,4]
d // 4

4、剩余操作符

//第一个例子
let [...a] = [1,2,3,4]
a // [1,2,3,4]

//第二个例子
let [foo,...a] = [1,2,3,4]
foo // 1
a // [2,3,4]

//第三个例子
let [foo,bar,...a] = [1,2,3,4]
foo // 1
bar // 2
a // [3,4]

5、默认值

//当有默认值，且等号右边不能‘模式匹配’到值赋值给x时，则x取默认值
let [x = 3] = []
x // 3

//反之
let [x = 3] = [1]
x // 1

//特殊情况
//1）当模式匹配到右边的值为undefined时，则x取默认值
let [x = 3] = [undefined]
x // 3

//2）当模式匹配到右边的值为null时，则x取null
let [x = 3] = [null]
x // null

6、解构失败

谁结构失败，谁的值就为：undefined

//第一个例子
let [x] = []
x // undefined

//第二个例子
let [x , y] = [1]
x // 1
y // undefined

7、不完全解构

//第一个例子
let [x] = [1,2]
x // 1

//第二个例子
let [a, [b], d] = [1,[2,3],4]
a // 1
b // 2
d // 4

8、如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

二、对象解构

1、简单地对象解构

let {foo,bar} = {
    foo:1,
    bar:2
}
foo // 1
bar // 2

2、等号左边次序可不一样

let {bar,foo} = {
    foo:1,
    bar:2
}
foo // 1
bar // 2

3、可嵌套

//第一个例子
let {foo,foo:{bar}} = {
    foo:{
        bar: 1
    }
}
foo // {bar: 1}
bar // 1

//第二个例子.
//在最后一次解构中foo:{bar:[baz]},foo和bar都是模式，baz才是变量
let {foo,foo:{bar},foo:{bar:[baz]}} = {
    foo:{
        bar: [1]
    }
}
foo // {bar: 1}
bar // [1]
baz // 1

//第三个例子
//如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。
let {foo:{bar}} = {
    bar: "aa"
}
//Uncaught TypeError: Cannot read property 'bar' of undefined

4、剩余操作符

//第一个例子
let {...bar} = {
    x: 1,
    y: 2,
    z: 3
}
bar // {x: 1, y: 2, z: 3}

//第二个例子
let {x,...bar} = {
    x: 1,
    y: 2,
    z: 3
}
x // 1
bar // {y: 2, z: 3}

5、默认值

//第一个例子
let {x = 2,y} = {
    y: 3
}
x // 2
y // 3

//第二个例子
let {x = 2,y} = {
    x: 'aa',
    y: 'bb'
}
x // "aa"
y // "bb"

6、解构失败

//第一个例子
let {foo} = {
    bar: 'aaa'
}
foo // undefined

//第二个例子
let {foo,bar} = {
    bar: 'aaa'
}
foo // undefined
bar // "aaa"

7、不完全解构

常用于json数据的取值

let {foo} = {
    foo: 'aaa',
    bar: 'bbb'
}
foo // "aaa"

8、对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

let obj = {
    foo: 'aa',
    bar: 'bb'
}
let {foo,bar} = obj
foo // "aa"
bar // "bb"

9、变量名与属性名不一致

//对象的解构赋值的内部机制，是先找到同名属性(key值)，然后再赋给对应的变量。真正被赋值的是后者(对应的变量)，而不是前者(同名属性)
let {bar: x,foo: y} = {
    bar: 'aa',
    foo: 'bb'
}
x // "aa"
y // "bb"

10、先声明后解构

注意：一定要把解构用括号括起来

let foo,bar
({foo,bar} = {
    foo: 'aa',
    bar: 'bb'
})
foo // "aa"
bar // "bb"

11、解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。

下列表达式虽然毫无意义，但是语法是合法的，可以执行。

({} = [true, false]);
({} = 'abc');
({} = []);

12、由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = ['a','b','c','d','e']
let {0: first,...array} = arr
first // "a"
array // {1: "b", 2: "c", 3: "d", 4: "e"}

三、字符串解构

1、简单地字符串解构

let letters = 'hello'
let [a,b,c,d,e] = letters
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

2、扩展运算符

let letters = 'abcdefg'
let [...letter] = letters
letter //  ["a", "b", "c", "d", "e", "f", "g"]

四、函数参数解构赋值

1、数组参数

function count([x,y]){
    return x + y
}
count([1,2]) // 3

2、数组参数可有默认参数

function count([x = 2,y]){
    return x + y
}
count([,3]) // 3

3、对象参数

function count({x,y}){
    return x + y
}
count({y: 3,x: 2})  // 5

4、对象参数可有默认值

function count({x = 2,y}){
    return x + y
}
count({y: 3}) // 5

ps：对象传参目前我遇到有个非常好的应用地方，就是Vue需要自己编写插件时，对象传参可以默认很多值插件的值，且如果需要修改参数的值时，只需要修改某个需要的默认值即可，比如需要自己编写一个 toast插件，需要最基础的四个属性，是否显示：isShow，显示内容：content，显示位置：position，多久自动消失：time，传入参数，然后调用时，传入需要修改的参数即可this.$toast({message: "UID不能为空"，time: "3000"});