ES6系列(二)变量的解构赋值

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6系列(二)变量的解构赋值脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

ES6变量的解构赋值

ES6允许按照一定的默认,从数组、对象等具有ITerator接口(后面系列会介绍到)的数据中提取值,对变量进行赋值,这称为解构赋值。

解构赋值有几点要求:

  1. 等号两边的模式相同。
  2. 等号右边的数据要具备Iterator接口。
  3. 解构不成功,变量的值等于undefined
  4. 解构赋值允许指定默认值,不过ES6内部使用严格相等运算符(===),来判断一个位置是否有值,如果某个位置的值不严格等于undefined, 那么默认值是不会生效的。默认值也可以引用解构赋值的其它变量,但是该变量必须已经声明。如下所示

    let [a=1] = [null];
     console.LOG(a); //null 不严格相等,其实就是对应位置的值必须是undefined
    let [b=2]=[undefined] || [];
    console.log(b); //2
    //引用解构赋值的其它变量,
     let [x=y, y=2] = []; //error y未声明
     let [x=2, y=x] = []; //x=2, y=2
  5. 如果在同一个作用域,某个变量被声明过,直接使用同一个变量名解构赋值,会报错。此时需要在首尾加一个(),解析器将认为这是另一个块作用域,解构赋值可以理解为声明变量并赋值。

    let a,b;
    {a} = {a:1}; //error a has already exited
    ({b} = {b: 2});  //2
  6. 解构赋值的规则是,如果等号右边不是对象,也不具备Iterator接口,会将其转换为对象,由于undefinednull无法转换为对象,对这两个解构赋值时,会报错。

数组的解构赋值

数组的解构赋值在于,左右的顺序严格对应

对象的解构赋值

1.对象的解构赋值在,左右的属性名称要严格对应

    let {some,anther } = { some: 1, anther:2 }

2.如果名字不对应(往往需要重命名)

    let {some: anther} = {some: 1};
    console.log(some); //ReferenceError: some is not defined
    console.log(anther); //

3.嵌套结构对象的解构

let pbj = {
    p: [
        x,
        {y:2}
    ]
};
let {p: [x, {y}]} = obj;
// 需要注意的是这里的p是模式,不是变量,因此不会被赋值,因为:的关系

字符串的解构赋值

1.字符串用于解构赋值时,字符串会被转换成为一个类似数组的对象

let [a,b,c,d] = "abcd";

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

let {length} = "hello"; //5

数值和布尔值的解构赋值

数组与布尔值进行解构赋值时,会先转换为对象。 如下所示:

    let {toString: s} = 123;
    s === Number.PRototyPE.toString; //true
    
    let {toString: t} = true;
    t === Boolean.prototype.toString; //true

函数参数的解构赋值

函数参数的解构赋值特点:
1.省略掉了let const等关键字
2.如果以数组,对象作为模式时,注意默认参数其实是模式,如下所示

function add(@H_916_304@[x,y]=[1,2]) {
  return x+y;
}

function move({x,y}={x:1, y:2}) {
  return [x, y]
}
move({x:1, y:3}); //[1,3]
move({x:1}); //[1, undefined]
move(); //[1, 3]
// 注意 
move({});  //[undefined, undefined] 这是因为,对象才是默认参数,是对该对象解构赋值得到x、y。
而不是为x,y指定默认值

括号问题

不可以使用圆括号的情况:
1.声明变量时,不能带有圆括号 : let [(e)] = [1]
2.函数参数中,模式不能带有圆括号 : function add([(a)]){}
3.赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号中: ([a]) = [5]

用途

1.交换变量值

[x,y]=[x,y]

2.从函数中返回多个值(伪)

function add() {
    return {
        a:1,
        b:2,
        c:3
    }
}
let {a,b,c} = add();

3.遍历Map解构

let map = new Map();
// 只取key,注意Map遍历返回的是[key,value]结构
for(let [key] of map){
    
}
//只取value
for(let [,value] of map){
    // some code
}

脚本宝典总结

以上是脚本宝典为你收集整理的ES6系列(二)变量的解构赋值全部内容,希望文章能够帮你解决ES6系列(二)变量的解构赋值所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。