深入理解ES6之《解构》

wuyumin 发布于2019-08-29 13:12 / 966人阅读

摘要：对象解构如果使用解析声明变量，则必须提供初始化程序也就是等号右侧的值以下语句有语法错误解构赋值表达式也就是右侧的表达式如果为或会导致程序抛出错误，因为任何尝试读取或的属性的行为都会触发运行时错误上面代码是声明变量同时赋值相应的属性值那如果已

对象解构

如果使用var、let、const解析声明变量，则必须提供初始化程序（也就是等号右侧的值）
以下语句有语法错误

var { type, name };
let { type, name }
const { type, name }

解构赋值表达式（也就是右侧的表达式）如果为null或undefined会导致程序抛出错误，因为任何尝试读取null或undefined的属性的行为都会触发运行时错误

let node = {
  type: "Identifier",
  name: "angela"
}
let { type, name } = node

上面代码是声明type、name变量同时赋值node相应的属性值
那如果已经存在type、name，重新赋值使用解构的话则需要在表达式两侧加小括号

let node = {
  type: "Identifier",
  name: "angela"
},
  type = "demo",
  name = 1;
//添加小括号可以将块语句转化为一个表达式，从而实现整个解构赋值的过程
({ type, name } = node)

在任何使用值的地方你都可以使用解构赋值表达式

let node = {
  type: "Identifier",
  name: "angela"
},
  type = "demo",
  name = 1;
function outputInfo(value) {
  console.log(value === node)
}
outputInfo({ type, name } = node)//true

解构还可以使用默认值

let node = {
  type: "Identifier",
  name: "angela"
}
let { type, name, value = true } = node

为非同名局部变量赋值

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

解构嵌套对象，很可能会无意中创建一个无效表达式，比方说下面的loc后的大括号则不需要，更好的做法是定义一个默认值

let { loc: { } } = node

数组解构

let colors = ["red", "green", "blue"]
let [, , thirdColor] = colors

可以像如上所示只取数组第三个元素，忽略前两个

let colors = ["red", "green", "blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor, secondColor] = colors

对变量重新赋值利用解构时，数组解构不再需要左右两侧加小括号了
可能数组解构用的最多的莫过于交换值吧

let a = 1,
  b = 2;
[a, b] = [b, a]

同样数组解构中也可以添加默认值
数组解构中有一个不定元素的概念，可以通过...语法将数组中的其余元素赋值给一个特定的变量

let colors = ["red", "green", "blue"];
let [firstColor, ...restColors] = colors//restColors包含两个元素green和blue

concat方法的设计初衷是连接两个数组，如果调用时不传递参数就会返回当前函数的副本

let colors = ["red", "green", "blue"];
let cloneColors = colors.concat() //["red", "green", "blue"]

上述代码用ES6中不定元素也可以实现该目标

let colors = ["red", "green", "blue"];
let [...cloneColors] = colors //["red", "green", "blue"]

需要注意的是在被解构的数组中，不定元素必须为最后一个条目，在后面继续添加逗号会导致语法错误
解构参数

function setCookie(name, value, { secure, path, domain, expires }={}) {

}
setCookie("type", "js", { secure: true, expires: 6000 })

想的最全面的就是既使用解构又使用默认值

const setCookieDefaults = {
  secure: false,
  path: "/",
  domain: "example.com",
  expires: new Date(Date.now() + 360000000)

}
function setCookie(name, value,
  { secure = setCookieDefaults.secure,
    path = setCookieDefaults.path,
    domain = setCookieDefaults.domain,
    expires = setCookieDefaults.expires }) {
}

私有云 idc机房托管深入理解webrtc之aec 深入理解系列深入理解linux 深入理解webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112444.html

深入理解ES6之《解构》

摘要：对象解构如果使用解析声明变量，则必须提供初始化程序也就是等号右侧的值以下语句有语法错误解构赋值表达式也就是右侧的表达式如果为或会导致程序抛出错误，因为任何尝试读取或的属性的行为都会触发运行时错误上面代码是声明变量同时赋值相应的属性值那如果已对象解构如果使用var、let、const解析声明变量，则必须提供初始化程序（也就是等号右侧的值）以下语句有语法错误 var { type, n...

DTeam 2019-08-21 12:02 评论0 收藏0
《深入理解ES6》笔记——解构：使数据访问更便捷（5）

摘要：解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。总结本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。下面的代码你可能无法在浏览器上实时测试，推荐在babel官网在线测试代码：在线测试ES6代码...

Drinkey 2019-08-20 18:06 评论0 收藏0
深入理解ES6笔记（五）解构：使访问数据更便捷

摘要：当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中。在对象的嵌套解构中同样能为本地变量使用不同的名称提取数组解构结构赋值基本忽略一些选项重新赋值默认值数组解构赋值同样允许在数组任意位置指定默认值。主要知识点：对象解构、数组解构、混合解构以及参数解构showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...

_DangJin 2019-08-26 12:19 评论0 收藏0