ES6数组、对象、字符串的解构赋值/默认值

316 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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]
  • 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

数组的解构赋值

  1. 如果解构不成功,变量的值就等于undefined
例如:let [foo]=[];//解构不成功,因为数组里没有元素,所以返回就是undefined

   let [bar,foo]=[1]//解构不成功,因为数组里只有一个元素,所以foot返回的值就是undefined
  1. 另一种情况是不完全解构,即等号左边的模式,只匹配一部分等号右边的数组,这种情况下,解构依然可以成功。
例如: let [x,y]=[1,2,3] //x=1,y=2
      let [a,[b],c]=[1,[2,3],4]//b=2,因为内层数组有两个元素,解构赋值时只有一个变量
  1. 如果等号的右边不是数组(或者严格的说,不是可遍历的结构),那么将会报错。
   例如: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