资讯专栏INFORMATION COLUMN

es6---desctructing

DDreach / 1984人阅读

摘要:这种模式相当于数组结构适用于具有接口的数据哪里可以用到解构赋值声明变量赋值参数定义还可以在的循环过程中使用背景构造数据和解析数据通过一些操作来新建一个对象同时通过其他的一些操作来解析这个数据我们可以通过对象字面量去新建一个对象在中,解构允

Object desctructing
    const obj = {first: "jane", last: "Doe"};
    const {first: f, last: l} = obj;
    
    // f = "jane" l = "Doe"
    
    // {prop}这种模式相当于 {prop: prop}
    const {first, last} = obj;
    // first = "jane"  last = "Doe"
Array desctructing

数组结构适用于具有Iterator接口的数据:

    const iterable = ["a", "b"];
    const [x, y] = iterable;
    // x = "a"; y = "b"
哪里可以用到解构赋值?
    //声明变量
    const [x] = ["a"];
    let [x] = ["a"];
    var [x] = ["a"];
    
    //赋值
    [x] = ["a"];
    
    //参数定义
    function f([x]) {...}
    f(["a"]);

还可以在for-of的循环过程中使用

    const arr1 = ["a", "b"];
    for(const [index, element] of arr1.entries()) {
        console.log(index, element);
    }
    //0 a
    //1 b
    
    const arr2 = [
        {name: "Jane", age: 41},
        {name: "John", age: 40}
    ];
    for(const {name, age} of arr2) {
        console.log(name, age);
    }
    //Jane 41
    //John 40
背景:构造数据和解析数据

js通过一些操作来新建一个对象

    const obj = {};
    obj.first = "Jane";
    obj.last = "Doe";

同时通过其他的一些操作来解析这个数据

    const f = obj.first;
    const l = obj.last;

我们可以通过对象字面量去新建一个对象:

    const obj = {first: "Jane", last: "Doe"};

在ES6中,解构允许使用相同的语法形式去获取数据,这种方式被称为对象模式

    const {first: f, last: l} = obj;

就像使用对象字面量创建一个有多个属性的对象那样,对象模式允许我们去获取对象的不同的属性。

模式

需要被解构的目标可以是以下三种中的一种:

给目标对象进行赋值

对象 {first: pattern, last: pattern}

数组模式 [pattern, pattern]

如下:

    const obj = {a: [{foo: 123, bar: "abc"}, {}], b: true};
    const {a: [{foo: f}]} = obj;

    //f = 123

当然你可以解构你所需要的属性值,例如:

    const {x: x} = {x: 7, y: 3};
    //x = 7
    
    const [x, y] = ["a", "b", "c"];
    //x = "a" , y = "b"
模式是如何获取内部的值?

在一次赋值过程中 pattern = someValue, pattern是如何获取到someValue内部的值的?

对象模式强制将需要被解构的值转化为object(对象)
    const {length: len} = "abc";  // th = 3
    const {toString: s} = 123;    //s = Number.prototype.toString          

但是将需要被解构的值转化为object(对象)所调用的方法并非Object(); 而是内置方法ToObject;而这个内置的方法去转化undefinednull时或抛出TypeError的错误.因此当被解构的对象是undefinednull时,在发生解构前就会抛出错误。

数组模式 默认值

默认值是模式的一个特性: 如果对象的一个属性或者数组的一个元素没有在需要被结构的值中找到对应的属性或值,那么最后这个属性或者数组的元素的值将可能会是:

默认值(如果进行设置过)

undefiend(没有设置默认值)

来看下下面的例子:

    const [x = 3, y] = [];   //x = 3, y = undefined
    const {foo: x = 3, y} = {};     //x = 3, y = undefined

undefined将会触发默认值.例如:

    const [x = 1] = [undefined];   //x = 1
    const {prop: y = 2} = {prop: undefined};    //y = 2 

默认值可以在需要的情况进行计算后赋值,例如:

    const {prop: y = someFunc()} = someValue;

它事实上就相当于:

    let y;
    if(someValue.prop === undefined) {
        y = someFunc();
    } else {
        y = someValue.prop;
    }

默认值还可以通过任意的变量去设定:

    const [x = 3, y = x] = [];   //x = 3; y = 3
    const [x = 3, y = x] = [7];  //x = 7; y = 7
    const [x = 3, y = x] = [7, 2];  // x = 7, y = 2

但是要注意声明的顺序,

    const [x = y, y = 3] = [];   //ReferenceError

这种情况下是还未声明变量y,就将变量y赋值给变量x。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80276.html

相关文章

发表评论

0条评论

最新活动
阅读需要支付1元查看
<