【JavaScript进阶之旅 ES6篇 第五章】解构赋值深入、隐式转换、函数参数解构、解构本质

一、解构赋值深入

1、通过()运算符将{}产生的块作用域转换为表达式

let a;

// {a} = {a : 1}; // 报错

({a} = {a : 1}); 
console.log(a); // 1
1
2
3
4
5
6

2、模式匹配

let arr = [1, 2, 3],
    obj = {};

[obj.a, obj.b, obj.c] = arr;

console.log(obj); // {a: 1, b: 2, c: 3}
1
2
3
4
5
6

3、用let/var声明：加括号就报错(一句话声明的时候)

let [a] = [1]; 
// let [(a)] = [1]; // 报错
console.log(a); // 1
1
2
3

let {a : b} = {}; 

console.log(b); // undefined
1
2
3

// let {a : b} = {}; // 报错
// let ({a : b}) = {}; // let is not defined
// let {(a): b} = {}; // 报错
// let {a: (b)} = {}; // 报错

console.log(a);
1
2
3
4
5
6

4、函数参数不能加括号

// function foo([z]) { // 报错
//   return z;
// }

// function foo([(z)]) { // 报错
//   return z;
// }

function foo((([z]))) { // 报错
  return z;
}

console.log(foo(1));
1
2
3
4
5
6
7
8
9
10
11
12
13

5、对象解构数组(数组是特殊的对象)

let arr = [1, 2, 3];
let {
  0: first,
  [arr.length - 1]: last
} = arr;

console.log(first, last); // 1 3
1
2
3
4
5
6
7

6、匹配的规则不同，匹配不成功

[(a)] = [1];
console.log(a); // 1

([a]) = [2]; // 匹配规则不同 规则：() -> [] 应该是：[] -> []
console.log(a); // 报错
1
2
3
4
5

7、优先级问题

({a : (b) = {}});  // b的默认值（本身并没有匹配）
console.log(b); // {}
1
2

8、[(a.b)] = [3];

var a = {};
[(a.b)] = [3];
console.log(a); // {b: 3}
console.log(b); // 报错 b is not defined
1
2
3
4

9、({a: obj[a + b]} = {a: 2});

let a = 'x', b = 'y', obj = {};

// {a: obj[a + b]} = {a: 2}; // 会报错

({a: obj[a + b]} = {a: 2}); // 需要加括号变成表达式

console.log(obj); // {xy: 2}
1
2
3
4
5
6
7

10、利用解构赋值进行 变量交换

let a = 1, b = 2;
[b, a] = [a, b];
console.log(a, b); // 2 1
1
2
3

11、对象匹配允许匹配同源属性（同一个属性）

let {a: x, a: y} = {a: 1};
console.log(x, y); // 1 1
1
2

• 变量的解构就是变量的赋值，本质就是变量的模式匹配
• 模式匹配可以匹配同一个属性（同源属性）

12、★★ 慎用

var x = 200, y = 300, z = 100;

var obj1 = {
  x: {
    y: 42
  },
  z: {
    y: z // 100
  } 

  // y:  x = { y: 300 }
  // z: { y: }
}

// x = {y : y}}是变量y的默认值；y属性在obj1里没有，是undefined，则找默认值 y是属性，值y从外层找
({y: x = {y: y}} = obj1);   // y: x = {y: 300}

({z: y = {y: z}}) // z: y = {y: 100}

// obj1中有x的属性值 所以 z = x的属性值，即{y: 42} => {y: x} 
({x: z = {y: x}}) // x: z = {y: 42}

console.log(x.y, y.y, z.y); // 300 100 42
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

二、函数参数解构

function test([a, b]) {
  console.log(a, b);
}
test([1,2]);
test([1]); // 1 undefined
test([]); // undefined undefined
test(); // 报错
1
2
3
4
5
6
7

function foo({x, y}) {
  console.log(x, y);
}
foo({x: 1,y: 2}); // 1 2
foo({x: 1}); // 1 undefined
foo({}); // undefined undefined
foo(); // 报错
1
2
3
4
5
6
7

function foo({x = 10} = {}, {y} = {y: 10}) {
  console.log(x, y);
}

foo(); // 10 10
foo({}, {}); // 10 undefined
foo({x: 2}, {y: 3}); // 2 3
1
2
3
4
5
6
7

4. 注意这个写法

({x = 10} = {}); // -> x是属性的默认值，这里简写了 {x: x = 10}
({y} = {y: 10}); // -> y也简写了 {y: y}
1
2

三、解构的隐式转换

1、字符串进行解构(将字符串原始值隐式转换为String包装类)

const [a, b, c, d] = 'love';
console.log(a, b, c, d); // l o v e

let {length : len} = 'love';
console.log(len); // 4
1
2
3
4
5

2、数字进行解构(将数字原始值隐式转换为Number包装类)

let  {toString: s} = 1;
console.log(s === Number.prototype.toString);
1
2

3、布尔值进行解构(将布尔值原始值隐式转换为Boolean包装类)

let  {toString: s} = false;
console.log(s === Boolean.prototype.toString);
1
2

4、undefined null 不能隐式转换（没有包装类）