初入ES6-解构

最新推荐文章于 2024-06-16 23:50:28 发布

转载最新推荐文章于 2024-06-16 23:50:28 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011475246

本文详细介绍了ES6中的解构赋值功能，包括数组和对象的解构方式、默认值设定、惰性求值及嵌套解构等高级用法。通过具体的示例帮助读者更好地理解和应用。

ES6允许按照一定的模式，从数组或者对象中取值，对变量进行赋值

数组

var a = 2;
var b = [1,2];
var c = 'thisi';
//ES6 解构的对象要具有Iterator接口也就是可以遍历
var [a,b,c] = [1,2,3]        //按照对应的关系进行取值
var [a,...b] = [1,2,3,4];
a = 1;
b = [2,3,4];
//如果解构不成功变量的值就是undefind;
var [a ] = [];
a = undefind;
//如果右侧的数值不是数组，就会报错
var [a] = 1;    //Uncaught TypeError: false is not iterable,注意字符串是可以遍历的
            =Nan;
            =fasle;
            =null;
            ={}
`
//也可以有默认值
var  [a,b = 3] = [5];//只要被赋值的变量不是严格===undefined;就是默认值，不包括 null 
a = 5;
b = 3;
//惰性求值
function fn(){return 1};
var[a =fn() ] = [2];
a //2
//变量的值可以是其他的变量，但是要已经声明过的
var [x = 1,y =x] = [];
x//1
y//1
let [x= y,y] = []    //Uncaught ReferenceError: y is not defined

对象

//使用var const let解构赋值，右侧必须有值进进行初始化，如果不是解构赋值，就正常使用
var obj = {
    a:1,
    b:3
}
var a = obj.a;
var b = obj.b;
var {a,b} = obj;        //更加的直接
a//1
b//3
var {a,b} = {a:1,b:2};       //属性的名称要一样，位置可以不一样没有的话就undefined
a//1
b//2
//也可以给已经存在的变量赋值
var a = 1;
var b = 2;
var obj = {
    a:11,
    b:22
}
({a,b} = obj)    //外侧有小括号，ES6大括号是代码块，不允许出现在赋值的左侧
//也可以有默认值，只有解构的值===undefined的时候有效
var {a,b,c=23} = {a:2,b:2}        //c =23

//不同名的属性变量
var obj = {
    a : 1,
    b:2
};
var {a:x,b:y} = obj
a//Uncaught ReferenceError: a is not defined
x//1
//嵌套的对象
var obj = {
    a:1,
    b:{
    x:{num:1}
    }
}
var {b:{x}} = obj;
x= {num:1}