携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第10天juejin.cn/post/712312…
基本用法
- ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(desctructuring)
- 以前变量赋值方式 let a=1; let b=2; let c=3;
- ES6数组解构赋值
let [a,b,c]=[1,2,3] - 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
数组的解构赋值
- 如果解构不成功,变量的值就等于undefined
例如:let [foo]=[];//解构不成功,因为数组里没有元素,所以返回就是undefined
let [bar,foo]=[1]//解构不成功,因为数组里只有一个元素,所以foot返回的值就是undefined
- 另一种情况是不完全解构,即等号左边的模式,只匹配一部分等号右边的数组,这种情况下,解构依然可以成功。
例如: let [x,y]=[1,2,3] //x=1,y=2
let [a,[b],c]=[1,[2,3],4]//b=2,因为内层数组有两个元素,解构赋值时只有一个变量
- 如果等号的右边不是数组(或者严格的说,不是可遍历的结构),那么将会报错。
例如:let [foo]=1;//报错,因为1无法遍历
let [foo]=false;
let[foo]=null;
默认值
解构赋值允许设置默认值 基本语法:
let [foo="hello"]=[]//如果数组里没有元素,那么foo=hello
let [foo="hello"]=[world]//foo:word; 如果foo能匹配到数组元素,就为数组元素
没有元素,foo的值才等于hello
注意:ES6内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候才会求值。
对象的解构也有暂存死区,但对象和数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
例如:let {name,age}={name:”tom“, age=18}
字符串的解构赋值
字符串也可以解构赋值,这是因为此时,字符串被转成一个类似数组的对象。
let [a,b,c,d,e]="hello";//a:h; b:e; c:l; d:l ;e:o