deep-in-es6(五)

解构 Destructuring：

解构赋值允许使用类似数组或对象字面量的语法将数组和对象的属性赋值给给中变量。
一般情况访问数组中的前三个元素：

            var first = arr[0];

            var second = arr[1];

            var third = arr[2];

使用解构：

var [first,second,third] = arr;

1.数组与迭代器的解构：
语法形式：var/let/const [variablel1,variablel2,variablel3,...,variablelN] = array;

            var [foo,[[bar],baz] = [1,[[2],3]];

            console.log(foo);//

            var [,,third] = ["foo","bar","baz"];

            console.log(third);//baz

            //也可以通过不定参数模式获取数组中所有尾随的元素，依然数个数组。

            var [head,...tail] = [1,2,3,4,5,6];

            console.log(tail);//2,3,4,5,6

当访问空数组或者越界访问数组时，解构与索引的行为一致，最终得到的结果是undefined；
数组解构赋值的模式适用于任意的迭代器：

        function* fibs() {

            var a = 0;

            var b = 1;

            while(true) {

                yield a;

                [a,b] =[b,a+b];

            }

        }

        var [first,second,third,fourth,fifth,sixth] = fibs();

        console.log(fifth);//

2.对象的解构：
通过解构对象可以把对象的每个属性与不同的变量绑定，首先指定被绑定的属性，然后紧跟一个要解构的变量。

var robotA = { name: "alphago" };

var robotB = {name: "master"}

var {name: nameA} = robotA;

var {name: nameB} = robotB;

console.log(nameA+" "+nameB);

属性名与变量名一致时，可以简写

var {foo,bar} = {foo: "alphago",bar: "master"};

console.log(foo+" "+bar);

解构：

var obj = {

    arrayProp: ["Zapp",{second: "Assassin" }]

};

var {arrayProp: [first,{ second }]} = obj;

console.log(first);//Zapp

console.log(second);//Assassin

解构一个未定义的属性时，得到的值为undefined:

var {missing} = {};

console.log(missing);//undefined

注意：解构对象并赋值给变量时，如果没有声明会出现一个语法错误：Syntax error

{blowUp} = {blowUp:10}

//Syntax error 这是因为解析引擎解析到{开始的语句会认为这是一个代码块是一个语句块，解决的办法是将整个表达式用一对小括号包裹起来。

( {blowUp} = {blowUp:10} );

//显示未定义的提示错误而非语法错误

解构值不是对象，数组或迭代器。

var {blowUp} = null;//TypeError: Cannot destructure property `blowUp` of 'undefined' or 'null'.(null 没有属性)

当然可以解构其他原始的类型，如：布尔值，数值，字符串，但是你将会得到的是undefined：

var { whf } = NaN;

console.log(whf);//undefined

默认值：

当你要解构的属性未定义时可以提供一个默认值；

        var [missing = true] = [];

        console.log(missing);//true

        var {message: msg = "Something went wrong"} = {};

        console.log(msg);//Something went wrong

        var {x=3} = {};

        console,log(x)//

解构的实际应用：
函数参数定义：
为了设计良好的API,通常的做法是为函数世界一个对象作为参数，然后将不同的实际参数作为对象属性，以避免让API使用者记住多个参数的使用顺序。我们可以用解构特性来避免这种问题，当我们想要引用它的其中一个属性时，大可不必反复使用这一单以参数对象。

function removeBreakpoint({url,line,column}) {

    //...

}

配置对象参数：

eg:

jQuery.ajax = function(url,{

    async = true,

    beforeSend = noop,

    cache = true,

    complete = noop,

    crossDomain = false,

    global = true,

    //...

    }) {

   //...

}

这样我们可以避免对配置对象的每一个属性都重复 var foo = config.foo || theDefaultFoo;这样的操作。

与es6迭代器协议协同使用：
当我们迭代Maps(es6新加的对象)，可以得到一些列如[key,value]的键值对，我们可以对这些键值对解构，跟轻松的访问键和值：

var map = new Map();

map.set(window,"the global");

map.set(document,"the document");

for(var [key,value] of map) {

    console.log(key+"is "+value);

}

//[object Window]is the global

//[object HTMLDocument]is the document

只遍历键：

for(var [key] of map) {//...}

只遍历值：

for(var [,value] of map) {//...}

多重返回值：

JavaScript 语言中尚未整合多重返回值的特性，但是无须多此一举，因为我们可以返回一个数组并将结果解构：

function returnMultipleValues() {

    return [1,2];

}

var [foo,bar] = returnMultipleValues();

console.log(foo+" "+bar);//1 2;

或者可以使用一个对象作为容器并为返回值命名：

function returnMultipleValues1() {

    return {

        foo1 : 1，

        bar1 : 2

    }

}

var {foo1,bar1} = returnMultipleValues();

console.log(foo1+" "+bar1);

这两个模式都比额外保存一个临时变量要好得多。

function returnMultipleValues3() {

    return {

         foo2 : 1,

         bar2 : 2

    }

}

var temp = returnMultipleValues3();

var fo = temp.foo2;

var ba = temp.bar2;

console.log(fo+" "+ba);

使用解构导入部分CommonJS模块

我们导入CommonJS模块X时，很可能在模块X中道出了许多我们根本没打算用的函数。通过解构，可以显示定义模块的一部分来拆分使用，同时还不会污染我们的命名空间：

const { SourceMapConsumer, SourceNode } = require("source-map");

巴特西

deep-in-es6(五)

最新文章

热门文章