解构

摘自《深入理解ES6》

  • ES6 为何要给对象与数组添加解构。当把数据结构分解为更小的部分时,从中提取你要的数据会变得容易许多。很多语言都能用精简的语法来实现解构,让它更易使用。
  • ES6 的解构实际使用的语法其实你早已熟悉,那就是对象与数组的字面量语法。
let node = {
  type: "Identifier",
  name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"

默认值

当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为 undefined

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

你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。若要这么做,需要在属性名后面添加一个等号并指定默认值,就像这样:

let node = {
  type: "Identifier",
  name: "foo"
};
let { type, name, value = 'yy' } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // "yy"

ES6有一个扩展语法,允许你在给本地变量赋值时使用一个不同的名称,而且该语法看上去就像是使用对象字面量的非简写的属性初始化。

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

嵌套的对象解构

每当有一个冒号在解构模式中出现,就意味着冒号之前的标识符代表需要检查的位置,而冒号右侧则是赋值的目标。当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中。

let node = {
  type: "Identifier",
  name: "foo",
  loc: {
    start: {
      line: 1,
      column: 1
    },
    end: {
      line: 1,
      column: 4
    }
  }
};
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1

数组解构

数组解构的语法看起来与对象解构非常相似,只是将对象字面量替换成了数组字面量。

数组解构时,解构作用在数组内部的位置上,而不是作用在对象的具名属性上。

let colors = [ "red", "green", "blue" ],
     firstColor = "black",
     secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

嵌套的解构

与解构嵌套的对象相似,可以用类似的方式来解构嵌套的数组。在整个解构模式中插入另一个数组模式,解构操作就会下行到嵌套的数组中,就像这样:

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 随后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

剩余项

使用 ... 语法来将剩余的项目赋值给一个指定的变量。

// 在 ES6 中克隆数组
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

剩余项必须是数组解构模式中最后的部分,之后不能再有逗号,否则就是语法错误。

参数解构

function setCookie(name, value,
                   {
                     secure = false,
                     path = "/",
                     domain = "example.com",
                     expires = new Date(Date.now() + 360000000)
                   } = {}
) {
// ...
}

对象与数组解构都能在属性或项未定义时为其提供默认值;在赋值表达式右侧的值为nullundefined 时,两种模式都会抛出错误。你也可以在深层嵌套的数据结构中使用对象与数组解构,下行到该结构的任意深度。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容