一 对象解构
对象解构语法在赋值语句的左侧使用了对象字面量
type 与 name 标识符既声明了本地变量,也读取了对象的相应属性值.
let node = {
type: true,
name: false
}
//既声明又赋值
let {
type,
name
} = node;
//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false
解构赋值表达式的值为表达式右侧的值.当解构表达式的右侧的计算结果为 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
type:localType 这种语法表示要读取名为 type 的属性,并把它的值存储在变量 localType 上.该语法与传统对象字面量的语法相反
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);
嵌套的对象结构
当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中(loc: {start: localS,end: localE})
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}
二 数据解构
数组解构的语法看起来跟对象解构非常相似,只是将对象字面量换成了数组字面量.
你也可以在解构模式中忽略一些项,并只给感兴趣的项提供变量名.
let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow
thirdC 之前的逗号是为数组前面的项提供的占位符.使用这种方法,你就可以轻易从数组任意位置取出值,而无需给其他项提供名称.
let colors = ["red","green","blue"];
let [,,thirdC] = colors;
console.log(thirdC);//blue
解构赋值
数组解构有一个非常独特的用例,能轻易的互换两个变量的值.
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]
} = node;
console.log(type); //Identifier
console.log(localName); //foo
console.log(ll); //1
console.log(col); //4
console.log(second); //3
来源: http://www.jb51.net/article/132782.htm