ES6中的解构语法

解构(Destructuring)的介绍

ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。我们可以划分为数组的解构和对象的解构。

数组的解构

知识点：

1. 数组解构的基本用法
2. 顺序解构
3. 解构出数组
4. 解构的默认值

var names = ["abc","cba","ccc"]
console.log(names); //[ 'abc', 'cba', 'ccc' ]

//知识点1. 对数组的解构
var [item1,item2,item3] = names
console.log(item1,item2,item3); //abc cba ccc

//知识点2. 顺序解构
//数组解构中只想解构后面的元素
//比如说只想解构最后一个
var[,,itemz] = names
console.log(itemz); //ccc

//知识点3. 解构出数组
//解构出一个元素，后面的元素放入一个新的数组中
var [itema,...newNames] = names //这里的...不是展开运算符，与函数的剩余参数比较相似
console.log(itema,newNames); //abc [ 'cba', 'ccc' ]

//知识点4. 解构的默认值
//应用场景：比如用户要解构4个值，但是数组只有3个值，就可以用到默认值了。
var [itema,itemb,itemc,itemd = "aaa"] = names
console.log(itemd); //aaa

对象的解构

知识点:

1. 任意顺序
2. 重命名
3. 默认值

let obj = {
    name : 'harry',
    age:21,
    height:1.98
}

//知识点1. 解构的无序性
let {age,height,name} = obj
console.log(name,age,height);//harry 21 1.98


//知识点2. 给解构出的属性重写定义一个新的名称
let {name:newName} = obj
console.log(newName); //harry

//知识点3. 设置默认值
let {address = "南京市"} = obj
console.log(address);
let {sex:manOrWoman = '男'} = obj
console.log(manOrWoman); //男

来自本人掘金文章 https://juejin.cn/post/7112610099813679118/