解构(Destructuring)赋值语法是一种JavaScript表达式,可以将属性/值从对象或者数组中取出,赋值给其他变量。
解构原理
解构是ES6提供的语法糖,其实是正对'可迭代对象'的Iterator接口,通过'遍历器'按顺序获取对应的值进行赋值。
解构基本语法
- 不需要的变量可以留空用逗号隔开
- 可以声明变量的同时进行赋值
- 外部可以直接访问已声明的变量
解构数组
1、设定默认值
为了防止从数组中取出值为undefined的对象,可以在表达式左侧的数组中为任意对象预设默认值:
2、利用解构交换变量
利用解构的特性,可以直接交换两个变量值
(注意解构那行代码前面要加个分号隔开,否则编辑器无法辨别出换行,可能会报错)
3、将剩余元素赋值给一个变量
当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值为一个变量。
解构对象
对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历(enumerable)浅拷贝到另一个对象身上。
先声明变量再复制,解构赋值这行语句要加括号执行,因为{ name, age }会被当成一个块来处理。
基本赋值:
给新的变量名赋值
在解构赋值对象时,可给提取的属性一个不同的新名字并可以提供默认值,在目标对象没有该属性时则取默认值。
函数参数默认值
可以给函数参数进行解构赋值并设置默认值
解构动态属性
可以将属性设置为一个变量,从而实现动态解构
解构对象时会查找原型链
如果解构的属性不在对象自身,将从原型链中查找
解构嵌套对象、数组
解构对象
解构数组
解构String\Map\Set
任何部署了Iterator接口的对象,都可以用for...of循环遍历。可以作为"类数组"来进行解构
String
ES6为字符串添加了遍历接口,也可以用来解构
Map
Map结构原生支持Iterator接口,可解构
Set
Set结构类似于数组,但是成员都是唯一的,没有重复的值。Set结构也原生支持Iterator接口,可以使用解构语法: