数组的解构赋值

  1. let [a, b, c] = [1, 2, 3]; // a=1 b=2 c=3
  3. let [foo, [[bar], baz]] = [1, [[2], 3]]; // foo=1 bar=2 baz=3
  5. // 这个很有用的方式
  6. let [ , , third] = ["foo", "bar", "baz"]; // third='baz'
  7. let [x, , y] = [1, 2, 3]; // x=1 y=3
  9. // 如果解构不成功，变量的值就等于undefined
  10. let [x, y, ...z] = ['a']; // x='a' y=undefined z=[]
  12. // 解构时使用默认值.
  13. // 注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
  14. // 所以，如果一个数组成员不严格等于undefined，默认值是不会生效的
  15. let [x = 1] = [undefined] // x=1
  16. let [x = 1] = [null] // x=null

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

  1. let { foo, bar } = { foo: "aaa", bar: "bbb" }; // foo='aaa' bar='bbb'
  2. let { bar, foo } = { foo: "aaa", bar: "bbb" }; // foo='aaa' bar='bbb'
  3. let { baz } = { foo: "aaa", bar: "bbb" }; // baz=undefined
  5. // 如果变量名与属性名不一致，必须写成下面这样
  6. // 对象的解构赋值的内部机制，是先找到同名属性
  7. // 然后再赋给对应的变量。真正被赋值的是后者，而不是前者
  8. let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; // baz='aaa'
  9. let { foo: baz } = { foo: "aaa", bar: "bbb" }; // baz='aaa' foo会报错error: foo is not defined
  11. let obj = {
  12.   p: [
  13.     'Hello',
  14.     { y: 'World' }
  15.   ]
  16. };
  17. let { p, p: [x, { y }] } = obj; // x='Hello' y='World' p=["Hello", {y: "World"}]
  19. let obj = {};
  20. let arr = [];
  21. ({ foo: obj.prop, bar: arr[1] } = { foo: 123, bar: true }) // obj={prop: 123} bar=[empty, true]
  23. // 指定默认值
  24. let {x = 3} = {}; // x=3
  25. let {x: y = 3} = {}; //y=3
  26. let {x: y = 3} = {x: 5}; // y=5
  27. let { message: msg = 'Something went wrong' } = {}; // msg="Something went wrong"
  28. let {x = 3} = {x: undefined}; // x=3
  29. let {x = 3} = {x: null}; // x=null

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

  1. let [a, b, c, d, e] = 'hello'; // a='h' b='e' c='l' d='l' e='o'
  2. let {length : len} = 'hello'; // len=5

参考

  1. 数组的解构赋值