avatar

解构赋值

记录稍微复杂一点的解构赋值

1
2
3
4
5
6
7
8
9
10
11
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
1
2
3
4
5
6
7
8
9
10
11
12
13
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}

上面代码有三次解构赋值,分别是对loc、start、line三个属性的解构赋值。注意,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式,不是变量。

1
2
3
4
5
6
7
8
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

1
2
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

用途

  1. 交换变量的值

  2. 从函数返回多个值

  3. 函数参数的定义

  4. 提取JSON数据

  5. 函数参数的默认值

  6. 遍历Map结构

  7. 输入模块的指定方法

文章作者: Kwin
文章链接: http://huangkun.host/2020/03/25/20190214-解构赋值/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kwin 's Blog
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论