解构赋值混淆

本章只是个人的一个笔记，边看边记录，怕自己混淆，特意记录下的随笔，如果有不一样的见解，欢迎指点。
一、解构赋值只是数组和对象？

---

let a,b,c = 1,'hello',undefined
//Uncaught SyntaxError: Unexpected string

但是，我们可以这样

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

如果对数值布尔型有疑惑可以看下

let ao = Number(124).toString();
console.log(ao); //"124"

let ab = Number(124).toString;
console.log(ab); //ƒ toString() { [native code] }

函数

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

注意看下面两组

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

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

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]

第一组{x = 0, y = 0} = {}是为函数move的参数指定默认值。
第二组{x, y} = { x: 0, y: 0 }被视为一个对象，如下

function move () {
  var _ref = arguments.length > 0 && arguments[0] !== undefined 
             ? arguments[0] 
             :{x:0, y:0},
             x = _ref.x,
             y=_ref.y;
  return [x, y];
}

二、在数组解构赋值过程中容易混淆的部分

正常情况下，我们一般这样用

let [a, b, c] = [1, 2, 3];
a //1
b //2
c //3

默认值

let [foo = true] = [];
foo // true

对undefined

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

可以看到y的解构赋值是undefined，也就是解构赋值失败，所以依然保持默认值'b'

三、在对象解构赋值过程中容易混淆的部分

正常的用法

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

当变量名与属性名不一致时

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

大括号不要当一行中的第一位

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

这种情况{x}会被JavaScript引擎认为是一个代码块

// 正确的写法
let x;
({x} = {x: 1});