Flower Of Life 发热巫女
  1. 1 Flower Of Life 发热巫女
  2. 2 Life Will Change Lyn
  3. 3 BREAK IN TO BREAK OUT Lyn
  4. 4 One Last You Jen Bird
  5. 5 Warcry mpi
  6. 6 Hypocrite Nush
  7. 7 かかってこいよ NakamuraEmi
  8. 8 Time Bomb Veela
  9. 9 Libertus Chen-U
  10. 10 Last Surprise Lyn
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即取到第二个数据。在这里可以使用剩余操作符将剩余值压缩进一个新的数组。同样在数据解构时也可以使用默认值。   在以上语法的基础上当然也支持更加复杂的嵌套结构和混合解构,但由于语法相同,只是在操作层面上增加了复杂度就不在此赘述。


解构使用场景

讲解了基本语法,再说下在什么地方能够用到解构以及不同场景下的注意点。

声明时解构

最常用的地方当然就是声明变量时解构了,毕竟该语法就是为了提取数据而创造的。当使用var,let,const声明变量时都可以使用解构语法,但在声明解构时必须提供原解构对象,否则会产生语法错误。

赋值时解构

如果我们想通过解构的形式更改已声明的值则必须使用表达式,因为暴露的花括号会被解析为语句。用圆括号包括赋值解构语句即可。数组赋值解构时没有这个要求。 赋值解构表达式的值为=之后的值,也就是说完成赋值解构的同时表达式的值不是映射后对象而是原解构对象。例子如下:

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」 标签。