1. 为何使用解构功能
let options = {
options1: 1,
options2: 2
}
let options1 = options.options1
let options2 = options.options2
如果options中的属性足够多，这样将会比较麻烦
2. 对象解构
let options = {
options1: 1,
options2: 2
}
let { options1, options2 } = options;
options1 // 1
options2 // 2
注意： 如果使用var let 或者const解构声明变量，则必须要提供初始化程序（也就是等号右侧的值）。下面几行代码为错误示范
let {option1, option2}; //语法错误
var {option1, option2}; //语法错误
const {option1, option2}; //语法错误
2.1 解构赋值
我们可以给变量赋值的时候使用解构语法。
let node = {
type: 'Identifier',
name: 'foo'
},
type = 'Literal',
name = 5;
({type, name} = {node});
// 注意使用括号包裹，因为js引擎会将{}视为代码块，语法规定 代码块不能出现在赋值语句左侧。()则表示表达式
type // Identifier
name // foo
let node = {
type: 'Identifier',
name: 'foo'
},
type = 'Literal',
name = 5;
function outputInfo(value) {
console.log(value === node); // true
}
outputInfo({type, name} = {node});
type // Identifier
name // foo
// 调用outputInfo使用了解构表达式，js中，表达式的值为右侧的值，所以传入的值就是node。
// 在解构的过程中为type和name赋予了新值
2.2 默认值
解构中，如果不存在对应名称的值，会为undefined。
let node = {
type: 'Identifier',
name: 'foo'
},
type = 'Literal',
name = 5;
({type, name, value} = {node})
type // Identifier
name // foo
value // undefined
不过可以
({type, name, value=true} = {node})
type // Identifier
name // foo
value // true
2.3 为非同名局部变量赋值
我如果想让名字不同的值对应起来，可以采用下面方法
let node = {
type: 'Identifier',
name: 'foo'
},
type = 'Literal',
name = 5;
({type, name} = {node})
let {type: localType, name: localName} = {node}
localType // Identifier
localName // 5
// 当然 我们也可以添加默认值
let {type: localType, name: localName = "bar"} = {node}
2.4 嵌套对象解构
可以将拆解来获取信息
let node = {
loc: {
start: {
line: 1
}
}
}
let {loc: {start}} = node;
// start.line = 1;
let {loc: {start: localStart}} = node;
// localStart.line = 1;
在上面所有冒号前的标识符，都表示在对象中检索位置，右侧表示被赋值的变量名；
但是如果冒号是花括号，则一位置要赋予的最终值嵌套在对象内部的更深层级中。
3. 数组解构
这个过程中，数组不会发生任何变化。
let color = ['red', 'green', 'blue'];
let [firstColor, secondColor] = color;
firstColor // red;
secondColor // green
let [, , thirdColor] = color;
thirdColor // blue
3.1 解构赋值
let color = ['red', 'green', 'blue'],
firstColor = 'black',
secondColor = 'purple';
[firstColor, secondColor] = color;
firstColor // red;
secondColor // green
可以用于两值交换
let a = 1, b=2;
[a, b] = [b, a];
a // 2
b // 1
3.2 默认值
let color = ['red'],
let [firstColor, secondColor='green'] = color;
firstColor // red;
secondColor // green
3.3 嵌套数组解构
let color = ['red', ['green', 'lightGreen'], 'blue'],
let [firstColor, [secondColor]] = color;
firstColor // red;
secondColor // green
// 如果是
let [firstColor, secondColor] = color;
firstColor // red;
secondColor // ["green", "lightGreen"]
3.4 不定元素
在之前的传参中就使用过。
let color = ['red', 'green', 'blue'],
// 如果是
let [firstColor, ...restColor] = color;
firstColor // red;
restColor // [ 'green', 'blue']
在es5中遗漏数组复制功能。经常使用concant克隆数组。eg:
let color = ['red', 'green', 'blue'];
let clonedColor = color.concat();
clonedColor // ['red', 'green', 'blue'];
// es6
[...clonedColor] = color;
不定元素后添加逗号会， 报错。
4. 混合解构
let node = {
loc: {
start: {
line: 1
}
},
range: [0, 3]
}
let {loc: {start}, range: [startIndex]} = node;
// start.line = 1;
// startIndex = 0;
5. 解构参数
5.1 必须传值的解构参数
function setItem (a, b, {c, d, e}) {
}
// setItem(1, 2) 会报错！！！
// 因为在函数内部做了这个操作
// let {c, d, e} = {c, d, e}; 如果后面没有值 会报错 我们可以使用默认值
function setItem (a, b, {c, d, e} = {}) {
}
5.2 解构参数的默认值
function setItem (a, b, {c, d, e} = {}) {
}
// 如果我们想给c, d, e赋予默认值呢？
function setItem (a, b, {c, d, e} = {c: 1, d: 2, e: 3}) {
}
// 但是当只给c传了值呢？这样就不能使用 = 后面的默认值了。因此
function setItem (a, b, {c:1, d:2, e:3} = {c: 1, d: 2, e: 3}) {
}
// 接下来消除冗余
let items = {c:1, d:2, e:3};
function setItem (a, b, {c:items.c, d:items.d, e:items.e} = items) {
}
