ES6 解构赋值例子

水星上有水

1. 数组战工具综开解构赋值

1. // 初初化
2. const obj = {
3.     x:1,
4.     y:[2,3,4],
5.     z:{
6.         a:5,
7.         b:6
8.     }
9. }
10. // 解构赋值
11. const {x,y,y:[y1,y2,y3],z,z:{a,b}} = obj //y代表[2,3,4]，z代表工具{a:5,b:6}

复造代码

2. 字符串解构赋值

2.1 数组情势

1. const [,str1,str2] = "您好啊"
2. // 此中str1是好，str2是啊

复造代码

2.2 工具情势

1. const {0:kk,length} = 'abc'
2. // 此中kk是a，length是3，0代表索引值。

复造代码

3. 数字战布我值解构赋值

3.1 道理

先将等号右边的值转为工具，即new根本数据范例number战boolean。如许就能够操纵担当的属性或办法。
3.2 代码

1. const {h=1,toString} = true

复造代码

4. undefined战null解构赋值

1. const {toString} = null

复造代码

因为undefined战null没法转为工具，故会报错！
即：Uncaught TypeError: Cannot destructure property ‘toString’ of ‘null’ as it is null.
5. 函数默许值和解构赋值

5.1 show()无参时

1. const show = ({ username = '测试', age = 999 }={}) => console.log(username,age);

复造代码

输出“测试 999”

• 函数默许值为“{}”
  
• 解构赋值{ username = ‘测试’, age = 999 } = {}
  
• 解构赋值默许值{ username= ‘测试’, age = 999 }
  

6. 盈余元素和解构赋值

1. const {x,y,...args} = {x:1,y:2,z:999,pp:222}
2. // 此中agrs代表{z:999,pp:222}

复造代码

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！