【ES6】变量的解构赋值

118 阅读3分钟

一、数组的解构赋值

解构指的是按照一定模式从数组和对象中提取值

数组解构过程中模式为 [index: variable],其中index为数组下标,variable指向数组中index下标的对应的值 index才是匹配的模式,variable是变量,数组解构赋值过程中,index省略

image.png

image.png

  1. 基本用法
let [a, b, c] = [1, 2, 3];
a // 1
b // 2
c // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

// 解构不成功
let [foo] = [];        // foo为undefined
let [bar, foo] = [1];  // foo为undefined

// 不完全解构
let [x, y] = [1, 2, 3];
x // 1
y // 2

解构不成功:如果结构不成功,变量的值等于undefined

不完全解构:等号左边的模式只匹配一部分的等号右边的数组

  1. 默认值 解构过程中为变量设定默认值,当数组的某个位置严格等于(===)undefined时,默认值才生效
let [foo = true] = [];
foo // true

let [x = 1] = [undefined];
x // 1

// 不严格相等的情况 null === undefined  => false
let [x = 1] = [null];
x // null

如果默认值是一个表达式,那么这个表达式是惰性求值的

function f() {
    console.log("aa");
}

let [x = f()] = [1]; // x能取到值,所以f()根本不会执行

二、对象的解构赋值

数组元素是按次序排列的,所以变量的取值由位置决定;而对象的属性没有次序,变量必须与属性同名才能取得正确的值

即对象解构赋值过程中模式是对象成员的key值,本质上对象解构形式为 { key: variable } = obj,即获取obj对象某个key的值,将其赋值给variable变量,默认情况下变量variable即为key

let { foo, bar } = {foo: "aaa", bar: "bbb"}
foo // "aaa"
bar // "bbb"

如果变量名与key不一样,必须显示指明变量名 image.png

同数组一致,也可为对象的解构指定默认值

默认值生效的条件是,对象的属性值严格等于undefined

三、字符冲的解构赋值

解构字符串时,字符串被转换成一个类似数组的对象

image.png

四、数值和布尔值的解构赋值

如果等号右边是数值或布尔值,则会先转为对象

image.png

数值和布尔值的包装对象都有toString属性,因此变量s都能取到值

Warning:

  • 如果模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错

    image.png

    原因是obj.foo为undefined,对foo为undefined取ttt便会报错,整个解构相当于 obj.foo.ttt

-** 将一个已经声明的变量用于解构赋值,必须非常小心**

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51be176d8ac046c895ae13e8a1a0928b~tplv-k3u1fbpfcp-watermark.image)

JavaScript将{x}理解成一个代码块,从而发生语法错误;将整个语句放在一个圆括号里面,这样就可以正确执行。
  • 解构赋值的规则是,只要等号右边的值不是对象或数组,先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值时都会报错

    image.png