2017-02-04 12:18:48

ES6的数据访问特性——解构语法

在JavaScript中，我们通常将数据以对象字面量或数组的形式存储，当需要时我们通过一些方法来提取并存在同名的本地变量上。虽然语法简单，但当数据量增大时，或者数据结构比较复杂时，提取信息就会变得困难。ES6新增的结构语法就是为了解决这个问题。

解构语法

解构的应用场景有很多，但总体来看，解构的数据源都是基于对象或数组的格式，我们先从这两类的解构基础语法说起。

对象解构

用下面这个例子来分析。

let node = {
    type: "Identifier",
    name: "foo"
};

let {type, name: localName, value = true, sex} = node;
console.log(type); //"Identifier"
console.log(localName); //"foo"
console.log(value); //"true"
console.log(sex); //"undefined"

对象解构语句为等式，右侧为需要解构的对象，左侧为右侧的映射对象，对象中的每个参数同样为键值对形式的语法，由冒号分开，冒号左边为映射的变量名，右侧为解构成功的变量名。由type可知，映射变量名可省略，就是简写初始化的语法。实际为type:type。由name可知，映射变量名可自定。由value可知，也可以给变量添加默认值，同时也可以使用简写语法。实际为value:value = true。由sex可知，当需要结构的对象不存在该变量时，解构值为undefined。

数组解构

数组解构语法与对象结构相似，区别在于映射时不以对象的键名为基准而是以数组内部位置为基准。例子如下。

let colors = ["red", "green", "blue", "yellow"];
let [,firstColor,...restColors] = colors;
console.log(firstColor); // "green"
console.log(restColors); // ["blue", "yellow"]

由于映射时以位置为基准，所以需要跳过某些数据时就可以通过留空的方式。firstColor即取到第二个数据。在这里可以使用剩余操作符将剩余值压缩进一个新的数组。同样在数据解构时也可以使用默认值。在以上语法的基础上当然也支持更加复杂的嵌套结构和混合解构，但由于语法相同，只是在操作层面上增加了复杂度就不在此赘述。

function output(value) {
    console.log(value === node); //true
}
let node = {
    name: "foo"
},
name = "foo2",
type = "fun";
outputInfo({type, name} = node);

传参时解构

我们知道当某个函数需要接受大量参数时，通常是新建一个options对象并在其中附加参数，然后在函数内提出。有了解构我们就可以在创建函数时直接提出并在函数体内使用。例子如下：

function doSth(name, value, {a, b, c}){
// 函数体
}

doSth("type","5",{
a: 100,
b: 200,
c: 300
});

其实原理和声明时解构相同，只是将声明时机设置为进入函数上下文时。同理必须提供原解构对象，但有时这个参数可能是可选的。即不传入第3个参数时就会出错。可以通过解构默认值来解决这个问题。如下:

function doSth(name, value, {a, b, c} = {}){
// 函数体
}

-- EOF --

添加在分类「 前端开发 」下，并被添加 「JavaScript」 标签。

ES6的数据访问特性——解构语法

解构语法

对象解构

数组解构

解构使用场景

声明时解构

赋值时解构

传参时解构