重要知识点:对象解构、数组解构、夹杂解构以及参数解构
对象解构
对象解构
对象解构简朴的例子
let node = {
type: "Identifier",
name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
解构赋值
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
//运用解构来分派差别的值
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"
在函数中运用解构赋值
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
function outputInfo(value) {
console.log(value === node); // true
}
outputInfo({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"
默许值
当你运用解构赋值语句时,假如所指定的当地变量在对象中没有找到同名属性,那末该变量会被赋值为 undefined 。
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // undefined
能够挑选性地定义一个默许值,以便在指定属性不存在时运用该值:
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true
赋值给差别的当地变量名
let node = {
type: "Identifier",
name: "foo"
};
//读取名为 type 的属性,并把它的值存储在变量 localType 上
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"
也能够给变量别号增加默许值,依然是在当地变量称号后增加等号与默许值,比方:
let node = {
type: "Identifier"
};
//该语法实际上与传统对象字面量语法相反,传统语法将称号放在冒号左侧、值放在冒号右边;而在本例中,则是称号在右边,须要举行值读取的位置则被放在了左侧。
let { type: localType, name: localName = "bar" } = node;
console.log(localType); // "Identifier"
console.log(localName); // "bar"
嵌套的对象解构
运用类似于对象字面量的语法,能够深切到嵌套的对象构造中去提取你想要的数据:
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
//每当有一个冒号在解构形式中涌现,就意味着冒号之前的标识符代表须要搜检的位置,而冒号右边则是赋值的目的。当冒号右边存在花括号时,示意目的被嵌套在对象的更深一层中。
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1
在对象的嵌套解构中一样能为当地变量运用差别的称号:
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
// 提取 node.loc.start
let { loc: { start: localStart }} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1
数组解构
构造赋值
- 基础
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
- 疏忽一些选项
let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"
- 从新赋值
let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
默许值
数组解构赋值一样许可在数组恣意位置指定默许值。当指定位置的项不存在、或其值为undefined ,那末该默许值就会被运用:
let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
嵌套的解构
在全部解构形式中插进去另一个数组形式,解构操纵就会下行到嵌套的数组中,就像如许:
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 随后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
盈余项
数组解构有个名为盈余项( rest items )的观点,它运用 … 语法来将盈余的项目赋值给一个指定的变量:
三个点的解构赋值必须放在一切解构元素的最末端,不然报错。
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"
也能够举行数组的克隆操纵:
/ 在 ES5 中克隆数组
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"
// 在 ES6 中克隆数组
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"
夹杂解构
夹杂解构指的是对象和数组夹杂起来,实行解构操纵
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
},
range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
参数解构
原函数写法:
// options 上的属性示意附加参数
function setCookie(name, value, options) {
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
// 设置 cookie 的代码
}
// 第三个参数映射到 options
setCookie("type", "js", {
secure: true,
expires: 60000
});
题目:没法仅经由过程检察函数定义就推断出函数所希冀的输入,必须浏览函数体的代码。
重写函数:
function setCookie(name, value, { secure, path, domain, expires }) {
// 设置 cookie 的代码
}
setCookie("type", "js", {
secure: true,
expires: 60000
});
解构的参数是必须的
参数解构有一个奇异点:默许情况下挪用函数时未给参数解构传值会抛出毛病:
// 失足!
setCookie("type", "js");
能够如许写防止毛病:
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}
参数解构的默许值
function setCookie(name, value,
{
secure = false,
path = "/",
domain = "example.com",
expires = new Date(Date.now() + 360000000)
} = {}
) {
// ...
}