ES6解构

ES6解构-->更加方便快捷的赋值
旧方式:

ES6解构_第1张图片

新方式:

ES6解构_第2张图片

解构时等号右边必须要有值:

ES6解构_第3张图片

已经声明过的变量重新解构赋值,省略let并用圆括号括起来:

ES6解构_第4张图片

调用方法时可以对传递的参数解构:

ES6解构_第5张图片

解构时未对应的变量赋值为undefined:

ES6解构_第6张图片

解构时未对应的变量可以自定义默认值:

ES6解构_第7张图片

解构时属性名称可以自定义,根据左右两个对象属性的位置对应赋值:

ES6解构_第8张图片

自定义属性名称时同样可以设置默认值:

ES6解构_第9张图片

解构时可以多级嵌套,只要左右两个对象属性的'位置'对应即可:

ES6解构_第10张图片

多级嵌套同样可以自定义属性名:

ES6解构_第11张图片

目前合法但将来可能非法的没有任何意义的书写格式:

数组可以解构,根据索引位置对应赋值:

ES6解构_第12张图片

ES6解构_第13张图片

ES6解构_第14张图片

解构可以快捷的互换两个变量的值:

ES6解构_第15张图片

数组解构指定默认值:

ES6解构_第16张图片

数组可以嵌套解构:

ES6解构_第17张图片

数组解构时可以使用剩余项,通过...语法将剩余的参数作为数组进行赋值:

ES6解构_第18张图片

旧方式进行数组克隆:

ES6解构_第19张图片

新方式进行数组克隆:

ES6解构_第20张图片

对象和数组解构时可以混合:

ES6解构_第21张图片

旧方式定义函数,调用方法时需要传递的参数不明确,需要查看方法体才确定:

ES6解构_第22张图片

新方式定义函数,参数列表清楚地显示哪些参数是需要的:
注意:新方式定义的函数在调用时,解构部分的参数必须传递,否则报错

ES6解构_第23张图片

解构部分的参数未传递导致如下报错:

ES6解构_第24张图片

解构部分的参数未传递时,可以通过空对象默认值避免报错:

 

ES6解构_第25张图片

参数解构的实用案例,可以为每个参数提供默认值:

ES6解构_第26张图片

 

你可能感兴趣的:(深入理解ES6)