ES6变量的解构赋值

106 阅读2分钟

解构(Destructuring)赋值语法是一种JavaScript表达式,可以将属性/值从对象或者数组中取出,赋值给其他变量。

解构原理

解构是ES6提供的语法糖,其实是正对'可迭代对象'的Iterator接口,通过'遍历器'按顺序获取对应的值进行赋值。

解构基本语法

  1. 不需要的变量可以留空用逗号隔开
  2. 可以声明变量的同时进行赋值
  3. 外部可以直接访问已声明的变量

image.png

解构数组

1、设定默认值

为了防止从数组中取出值为undefined的对象,可以在表达式左侧的数组中为任意对象预设默认值:

image.png

2、利用解构交换变量

利用解构的特性,可以直接交换两个变量值 (注意解构那行代码前面要加个分号隔开,否则编辑器无法辨别出换行,可能会报错) image.png

3、将剩余元素赋值给一个变量

当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值为一个变量。

image.png

解构对象

对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历(enumerable)浅拷贝到另一个对象身上。

先声明变量再复制,解构赋值这行语句要加括号执行,因为{ name, age }会被当成一个块来处理。

image.png

基本赋值:

image.png

给新的变量名赋值

在解构赋值对象时,可给提取的属性一个不同的新名字并可以提供默认值,在目标对象没有该属性时则取默认值。

image.png

函数参数默认值

可以给函数参数进行解构赋值并设置默认值

image.png

image.png

解构动态属性

可以将属性设置为一个变量,从而实现动态解构

image.png

解构对象时会查找原型链

如果解构的属性不在对象自身,将从原型链中查找

image.png

image.png

解构嵌套对象、数组

解构对象

image.png 解构数组

image.png

解构String\Map\Set

任何部署了Iterator接口的对象,都可以用for...of循环遍历。可以作为"类数组"来进行解构

String

ES6为字符串添加了遍历接口,也可以用来解构

image.png

Map

Map结构原生支持Iterator接口,可解构

image.png

Set

Set结构类似于数组,但是成员都是唯一的,没有重复的值。Set结构也原生支持Iterator接口,可以使用解构语法:

image.png