ES6变量的解构赋值

变量的解构赋值

基本用法
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
如果等号右边的值不是对象或者数组,就先将其转化为对象(由于null和undefined无法转为对象,所以对它们解构会报错)

数组的解构赋值

1.如果解构不成功,则变量的值赋值为undefined
  let [foo,[bar,baz]] = [1,[2,3]]
  let [,,foo] = ['a','b','c']
  let [foo,,bar] = [1,2,3]
  let [head,...tail] = [1,2,3,4]
  let [x,y,...z] = ['a']  //x = 'a',y = undefined,z = []

  这种写法属于模式匹配,两边模式相等,右边的值就会被赋值给左边的变量(以下是模式不相等的情况)

  let [x,[y,z]] = [1,2,3]

    原理:只要等号的右边是可遍历的数据解构(是否具备Iterator接口),那么就可以采用数组形式的解构赋值

    总结:解构赋值必须满足两个条件,①等号连边模式相等②等号右边的数据是可遍历的
2.ES6内部使用严格相等运算符(===)判断一个位置是否有值,所以只有当一个数组成员严格等于undefined的时候,默认值才生效.例如:
  let [x = true,y = 'a'] = [false,undefined] //x = false,y = 'a'
  //如果默认值是一个表达式,那么采用惰性求值,即只有在用到的时候才会求值
  function fn() { console.log('aaa') }      
  let [x = fn()] = [1] //
  等价于:
  let x;
  if([1][0] === undefined) { x = fn() } else {
    x = 1
  };
//默认值可以引用解构赋值的其他的变量,但该变量必须已经声明
let [x = 1,y = x ] =[];
let [x = 1,y = x] = [2]
let [x = 1,y = x] = [true,false]
let [x = y,y = 1] = []

对象的解构赋值

对象的解构与数组有一个重要的区别,数组的元素是按次序排列的,变量的取值由数组的位置决定.而对象的属性没有次序,所以变量必须与属性名一致

1.对象的解构机制,是先找到同名属性,然后再赋值给给变量,这说明真正被赋值的后者,而不是前者
2.默认值生效的条件是,对象的属性值严格等于undefined
3.解构失败,变量的值等于undefined
4.数组的本质是特殊的对象,因此可以对数组进行对象属性的解构
(难点:对嵌套解构的对象进行解构)

字符串的解构赋值

1.字符串也可以进行解构赋值,这是因为此时,字符串被转换成了一个类似数组的对象

const [a,b,c,d,e] = ['hello']

2.类似数组的对象都有一个length属性,因此还可以对这个属性就行解构赋值

let { length:len } = ['hello']

数值或布尔值的解构赋值

  let { toString:s} = 123;
  let { toString:s} = true

函数参数的解构赋值(有点不能理解map解构)

function add([x,y]) {
   return x+y;
}

[1,undefined,3].map((x = 'yes') => { x })

let { prop:x} = null
let { prop:y} = undefined

最后编辑于：2019.03.12 09:28:22