ES6解构赋值

ES6作为JavaScript跨度毕竟大的一个规范（不是语言），变化还是毕竟大的。

ES6允许按照一定模式来提取值，从具备有Iterator接口的数据类型中来提取值，对变量进行赋值，被成为结构

Iterator（遍历器）：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

数组结构：

// 模式匹配
let [a, b, c] = [1, 2 , 3]
// a = 1 b = 2 c = 3

// 嵌套数组进行结构
let [a, [b, c], d] = [1, [2, 3], 4]
// 同理,a,b,c,d分别为1，2，3，4

// 只匹配对应位置的内容
let [a, , c] = [1, 2 ,3]
// a = 1 , c = 3

// 使用扩展符
let [str, ..arr] = ['a', 'b', 'c', 'd']
// str = 'a'  arr = ['b', 'c', 'd']

// 结构失败, 值为undefined
let [a] = []

// null也是值，不是undefined
lel [a] = [null] 
// a = null

// 不完整结构,匹配到就结构
let [a, [b], d] = [1, [2, 3], 4]
// a = 1, b =2 ,d =4

// 非Iterator一律报错

// Set结构解构
let [a, b, c] = new Set([’a‘, 'b', 'c'])

// 默认值
// 默认值，结构有值使用结构的值，没有则用默认值
let [a, b = 2] = [1]
// a = 1, b = 2

// 默认值可以引用其他变量， 但是引用的变量必须在前面定义，否则报错
let [a = b, b = 1] = []  // 出错
let [a = 1, b = a] = [] // 正常

对象结构：

// 基本
let { a, b } = { a: 1, b: 2 }
// a = 1, b = 2 

// 对象结构不看顺序，看KEY, 也就是键，当名字匹配时候结构

let { b } = { a: 1, b: 2 }
// b = 2

// 任何匹配不到的内容都是undefined
let { c } = { a: 1, b: 2 }
// c = undefined


// 变量取名
let { a: hello } = { a : 'hi' }
// 此时赋值到的是hello这个名字，而不是a, a此时为匹配的模式，最终不会赋值
// 输出a 报错，没有定义
console.log(hello) // 'hi'


// 对象嵌套结构
let obj = { a: {
    name: '李华',
    friend: [
        b: {name: '韩梅梅'},
        c:  {name: '李雷'}
    ]
}}

let { a: {name, friend}} = obj
// a没有值，只赋值模式匹配。
// name = '李华'， friend = [b: {name: '韩梅梅'},c:  {name: '李雷'}]
// 完整匹配如下
let {a, a: {name, friend}, a: {friend: [b , c]}}
// 只要一一对应，就能进行匹配

// 子对象的父对象没有匹配值会引发报错
let { app } = { a: [1] } //  此时app为undefined
let { app: [a]} // 报错

// 默认值，基本与数组一样
// 特殊一点就是别名这个东西
let {x: y = 3} = {}

对方法的结构，这往往很有用。

let { random } = Math

random()
// 生成随机数
// 结构后直接使用

// 自己封装的对象中的方法也一样

字符串解构：

字符串本质上是一种特殊的对象

let { a, b} = 'hi'
// a = 'h', b = 'i'

// 还可以使用字符串的属性进行结构，比如length
let { length } =  'hi'
// length = 2

函数参数解构：

const arr = [1, 2]
// 参数结构
function add([a, b]) {
    return a +b
}

add(arr) // 传入数组进行结构

// 函数参数也可以有默认值
function add2([a, b, c = 2]) {
    return a + b + c
}

add(arr)  // 5

这里参考阮一峰老师的ES6入门来进行个人整理，关于完整ES6这里推荐阮一峰老师的ES6入门。

欢迎指教，与君共勉。