脚本宝典收集整理的这篇文章主要介绍了es6---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'

    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']);

    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

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

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

@H_360_226@    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;而这个内置的方法去转化undefined和null时或抛出TypeError的错误.因此当被解构的对象是undefined或null时，在发生解构前就会抛出错误。

数组模式

默认值

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

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

• 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。

脚本宝典总结

以上是脚本宝典为你收集整理的es6---desctructing全部内容，希望文章能够帮你解决es6---desctructing所遇到的问题。

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

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