ES6-解构赋值

解构赋值解释

按照一定模式，从数组和对象中提取值，对变量赋值

数组解构赋值

提取数组中的值，对变量赋值 传统方式- - -

let arr = ['苹果', '芒果', '榴莲']

let fruit1 = arr[0]
let fruit2 = arr[1]
let fruit3 = arr[2]

console.log(fruit1, fruit2, fruit3)

解构赋值方式- - -

let arr = ['苹果', '芒果', '榴莲']

let [fruit1, fruit2, fruit3] = arr

console.log(fruit1, fruit2, fruit3)

简化了代码，左边变量的结构要和右边赋值的数组结构一致

如果前面结构一致，后面左边变量没有再右边找到对应值，则该变量值为undefined

这种两边结构不一样的会报错：

对象解构赋值

旧的赋值方式- - -

let obj = {
    name: '史迪仔',
    age: 2
}

let name = obj.name
let age = obj.age

console.log(name, age);

对象解构赋值- - -

let obj = {
    name: '史迪仔',
    age: 2
}

let {name, age} = obj
/* 
// 等效于以下这句：
let {age, name} = obj */

console.log(name, age);

其中的变量名name, age是以对象的属性名为准，赋值时前后顺序无所谓，如果想要和属性名不一样的变量名，可以这样：

let {属性名1: 别名1, 属性名2: 别名2} 后面的别名就是变量名

变量名已经不是原来的属性名了，写以前属性名会报错：

字符串解构赋值

字符串当成数组处理：