ES6学习笔记5：解构赋值

Posted on
解构赋值（Destructing），赋值操作时对两边的绑定对象进行匹配解构，是一种很实用的语法糖。

解构赋值

解构赋值（Destructing），赋值操作时对两边的绑定对象进行匹配解构，是一种很实用的语法糖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 数组匹配，缺失匹配
var [a, ,b] = [1,2,3];
a === 1;
b === 3;

// 对象匹配
var { op: a, lhs: { op: b }, rhs: c } = getASTNode();
// getASTNode()返回的格式为{ op: 1, lhs: { op: 2 }, rhs: 3 }
// 如上则a，b，c，分别为1，2，3

// 对象匹配简写
// 绑定 `op`, `lhs` 和 `rhs`
var {op, lhs, rhs} = getASTNode()

// 可以被用作为参数
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// 容错解构
var [a] = [];
a === undefined;

// 带默认值的容错解构
var [a = 1] = [];
a === 1;

// 解构 + 默认参数
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23
1
2
3
4
5
6
7
8
9
10
// 一个复杂一点的默认值解构
// 如果不给参数，则默认值为{}，如果给了参数而不给size，默认值为'big'，cords，radis类似。
function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}
drawES6Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

如果有写过Python的话一定对解构赋值方式不陌生，解构赋值的逻辑一目了然，不习惯的读者可以自己多尝试练习。

知识点总结

  1. 对数组和对象进行解构赋值；
  2. 使用解构赋值作为函数参数；
  3. 熟练使用容错解构和默认参数。

参考

  1. BabelJS - Learn ES2015
  2. Destructuring assignment - MDN