深入理解ES6之数据解构的用法

一对象解构

对象解构语法在赋值语句的左侧使用了对象字面量

//既声明又赋值
let {
type,name
} = node;

//或者先声明再赋值
let type,name
({type,name} = node);
console.log(type);//true
console.log(name);//false

type与name标识符既声明了本地变量，也读取了对象的相应属性值。

解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时，会抛出错误。

默认值

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

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

你可以选择性地定义一个默认值，以便在指定属性不存在时使用该值。

console.log(type);//true
console.log(name);//false
console.log(value);//true

赋值给不同的本地变量名

type:localType这种语法表示要读取名为type的属性，并把它的值存储在变量localType上。该语法与传统对象字面量的语法相反

嵌套的对象结构

let {
loc: localL,loc: {
start: localS,end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中（loc: {start: localS,end: localE}）

二数据解构

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

你也可以在解构模式中忽略一些项，并只给感兴趣的项提供变量名。

let [,thirdC] = colors;
console.log(thirdC);//blue

thirdC之前的逗号是为数组前面的项提供的占位符。使用这种方法，你就可以轻易从数组任意位置取出值，而无需给其他项提供名称。

解构赋值

数组解构有一个非常独特的用例，能轻易的互换两个变量的值。

嵌套的解构

剩余项

使用剩余项可以进行数组克隆

三混合解构

let {
type,loc: {
start: {
line: ll
},end: {
column: col
}
},range: [,second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/34188.html

深入理解ES6之数据解构的用法

一 对象解构

默认值