02 变量的解构赋值

1. 数组的解构赋值
2.对象的解构赋值
3.字符串的解构赋值
4.数值和布尔值的解构赋值
5. 函数的解构赋值

1. 数组的解构赋值

1. 基本用法
2. 默认值

1. 基本用法

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

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

本质上这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

注意还有结构不成功和不完全结构的情况。

let [foo] = [];
let [bar, foo] = [1];

这两个foo都结构不成功，值为undefined。

let [x, y] = [1, 2, 3];
x // 1
y // 2

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

不完全结构。

2. 默认值

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

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

2. 对象的解构赋值

1. 基本使用
2. 默认值

1. 基本用法

let {foo, bar} = { foo: 'aaa', bar: 'bbb'}
console.log(foo)  // aaa
console.log(bar)  // bbb
-----------------------------------------------
let {bar, foo} = { foo: 'aaa', bar: 'bbb'}
console.log(foo)  // aaa
console.log(bar)  // bbb
-----------------------------------------------
let {baz} = { foo: 'aaa', bar: 'bbb'}
console.log(baz)  // undefined

对象的解构赋值与数组的解构不同。
数组的元素是按次序排列的，变量的取值有他们的位置决定；
而对象的属性没有次序，变量必须与属性同名，才能解构成功；
解构不成功的值为undefined。

2. 默认值

var {x, y = 5} = {x: 1};
x // 1
y // 5

3. 字符串的解构赋值

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

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

4. 数值和布尔值的解构赋值

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

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

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

解构赋值时，只要右边的值不是对象或数组，就先将其转为对象
undefined和null无法转为对象，解构赋值会报错。

5.函数的解构赋值

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

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

默认值

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