深入理解ES6之—数据解构

2018-01-13 07:54:29来源:cnblogs.com作者:寻找石头鱼人点击

分享
第七城市

一 对象解构

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

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

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

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

默认值

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

let node = {    type: true,    name: false},    type, name, value;({type,value,name} = node);console.log(type);//trueconsole.log(name);//falseconsole.log(value);//undefined

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

let node = {        type: true,        name: false    },    type, name, value;({    type,    value = true,    name} = node);console.log(type);//trueconsole.log(name);//falseconsole.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//redconsole.log(secondC);//blueconsole.log(thirdC);//greenconsole.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);//redconsole.log(secondColor);//green

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

let a =1,b =2;[a,b] = [b,a];console.log(a);//2console.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]);//greenconsole.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]} = node;console.log(type);//Identifierconsole.log(localName);//fooconsole.log(ll);//1console.log(col);//4console.log(second);//3
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台