ES6解构赋值

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

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

Iterator（遍历器）：

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

数组结构：

 1 // 模式匹配
 2 let [a, b, c] = [1, 2 , 3]
 3 // a = 1 b = 2 c = 3
 4 
 5 // 嵌套数组进行结构
 6 let [a, [b, c], d] = [1, [2, 3], 4]
 7 // 同理,a,b,c,d分别为1，2，3，4
 8 
 9 // 只匹配对应位置的内容
10 let [a, , c] = [1, 2 ,3]
11 // a = 1 , c = 3
12 
13 // 使用扩展符
14 let [str, ..arr] = ['a', 'b', 'c', 'd']
15 // str = 'a'  arr = ['b', 'c', 'd']
16 
17 // 结构失败, 值为undefined
18 let [a] = []
19 
20 // null也是值，不是undefined
21 lel [a] = [null] 
22 // a = null
23 
24 // 不完整结构,匹配到就结构
25 let [a, [b], d] = [1, [2, 3], 4]
26 // a = 1, b =2 ,d =4
27 
28 // 非Iterator一律报错
29 
30 // Set结构解构
31 let [a, b, c] = new Set([’a‘, 'b', 'c'])
32 
33 // 默认值
34 // 默认值，结构有值使用结构的值，没有则用默认值
35 let [a, b = 2] = [1]
36 // a = 1, b = 2
37 
38 // 默认值可以引用其他变量， 但是引用的变量必须在前面定义，否则报错
39 let [a = b, b = 1] = []  // 出错
40 let [a = 1, b = a] = [] // 正常

对象结构：

 1 // 基本
 2 let { a, b } = { a: 1, b: 2 }
 3 // a = 1, b = 2 
 4 
 5 // 对象结构不看顺序，看KEY, 也就是键，当名字匹配时候结构
 6 
 7 let { b } = { a: 1, b: 2 }
 8 // b = 2
 9 
10 // 任何匹配不到的内容都是undefined
11 let { c } = { a: 1, b: 2 }
12 // c = undefined
13 
14 
15 // 变量取名
16 let { a: hello } = { a : 'hi' }
17 // 此时赋值到的是hello这个名字，而不是a, a此时为匹配的模式，最终不会赋值
18 // 输出a 报错，没有定义
19 console.log(hello) // 'hi'
20 
21 
22 // 对象嵌套结构
23 let obj = { a: {
24     name: '李华',
25     friend: [
26         b: {name: '韩梅梅'},
27         c:  {name: '李雷'}
28     ]
29 }}
30 
31 let { a: {name, friend}} = obj
32 // a没有值，只赋值模式匹配。
33 // name = '李华'， friend = [b: {name: '韩梅梅'},c:  {name: '李雷'}]
34 // 完整匹配如下
35 let {a, a: {name, friend}, a: {friend: [b , c]}}
36 // 只要一一对应，就能进行匹配
37 
38 // 子对象的父对象没有匹配值会引发报错
39 let { app } = { a: [1] } //  此时app为undefined
40 let { app: [a]} // 报错
41 
42 // 默认值，基本与数组一样
43 // 特殊一点就是别名这个东西
44 let {x: y = 3} = {}

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

1 let { random } = Math
2 
3 random()
4 // 生成随机数
5 // 结构后直接使用
6 
7 // 自己封装的对象中的方法也一样

字符串解构：

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

1 let { a, b} = 'hi'
2 // a = 'h', b = 'i'
3 
4 // 还可以使用字符串的属性进行结构，比如length
5 let { length } =  'hi'
6 // length = 2

函数参数解构：

 1 const arr = [1, 2]
 2 // 参数结构
 3 function add([a, b]) {
 4     return a +b
 5 }
 6 
 7 add(arr) // 传入数组进行结构
 8 
 9 // 函数参数也可以有默认值
10 function add2([a, b, c = 2]) {
11     return a + b + c
12 }
13 
14 add(arr)  // 5

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

欢迎指教，与君共勉。

原文地址：https://www.cnblogs.com/lsAxy/p/12757512.html

相关推荐