美文网首页学习笔记
ES6变量的解构赋值

ES6变量的解构赋值

作者: 灬劣徒 | 来源:发表于2019-03-11 15:40 被阅读0次

    变量的解构赋值

    基本用法
    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 
    

    相关文章

      网友评论

        本文标题:ES6变量的解构赋值

        本文链接:https://www.haomeiwen.com/subject/jhcvpqtx.html