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

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

一 对象解构

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

let node = {

type: true,

name: false

}

//既声明又赋值

let {

type,

name

} = node;

//或者先声明再赋值

let type, name

({type,name} = node);

console.log(type);//true

console.log(name);//false

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

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

默认值

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

let node = {

type: true,

name: false

},

type, name, value;

({type,value,name} = node);

console.log(type);//true

console.log(name);//false

console.log(value);//undefined

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

let node = {

type: true,

name: false

},

type, name, value;

({

type,

value = true,

name

} = node);

console.log(type);//true

console.log(name);//false

console.log(value);//true

赋值给不同的本地变量名

let node = {

type: true,

name: false,

value: "dd"

}

let {

type: localType,

name: localName,

value: localValue = "cc"

} = node;

console.log(localType);

console.log(localName);

console.log(localValue);

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

嵌套的对象结构

let node = {

type: "Identifier",

name: "foo",

loc: {

start: {

line: 1,

column: 1

},

end: {

line: 1,

column: 4

}

}

}

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 colors = ["red", "blue", "green"];

let [firstC, secondC, thirdC, thursC = "yellow"] = colors;

console.log(firstC//red

console.log(secondC);//blue

conmzNxMsole.log(thirdC);//green

console.log(thursC);//yellow

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

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

let [,,thirdC] = colors;

console.log(thirdC);//blue

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

解构赋值

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

firstColor = "black",

secondColor = "purple";

[firstColor,secondColor] = colors;

console.log(firstColor);//red

console.log(secondColor);//green

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

let a =1,b =2;

[a,b] = [b,a];

console.log(a);//2

console.log(b);//1

嵌套的解构

let colors = ["red", ["green", "blue"], "yellow"];

let [firstC, [, ssc]] = colors;

console.log(ssc);//blue

剩余项

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

let [firstC, ...restC] = colors;

console.log(firstC);

console.log(...restC);

console.log(restC[0]);//green

console.log(restC[1]);//blue

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

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

let [...restC] = colors;

console.log(restC);//["red", "green","blue"]

三 混合解构

let node = {

type: "Identifier",

name: 'foo',

loc: {

start: {

line: 1,

column: 1

},

end: {

line: 1,

column: 4

}

},

range: [0, 3]

}

let {

type,

name: localName,

loc: {

start: {

line: ll

},

end: {

column: col

}

},

range: [, second]

} =http:// node;

console.log(type);//Identifier

console.log(localName);//foo

console.log(ll);//1

console.log(col);//4

console.log(second);//3

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。