博文类型： 学习向
背景： 学习ES6语法并做学习笔记
目标： 跟着ES6教程实操，并记录实操结果

---

一、数组的解构赋值

1.匹配模式

---

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

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

let [, , c] = ["one", "two", "three"];
//c=three

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

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

let [a, b, ...c] = ["a"];
//a="a",b=undefined,c=[]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.不完全解构

---

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

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

3.不可遍历解构

---

let [a] = 1;
//报错

let [a] = false;
//报错

let [a] = NaN;
//报错

let [a] = undefined;
//报错

let [a] = null;
//报错

let [a] = {};
//报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.默认值

---

只有当数组成员严格等于（‘===’）undefined 的时候，默认值才会生效

let [a = true] = [];
//a=true

let [a, b = "b"] = ["a"];
// a='a', b='b'

let [a, b = "b"] = ["a", undefined];
// a='a', b='b'

let [a = 1] = [null];
//a=null,null不严格等于undefined
1
2
3
4
5
6
7
8
9
10
11

如果默认值是一个表达式，那么只有数组成员被赋值默认值的时候，表达式才会被调用。

function b() {
  console.log("c");
}
let [a = b()] = [1];
//这时候函数b不会被调用

let [a = b()] = [];
a;
//这时候控制台会输出c
1
2
3
4
5
6
7
8
9

默认值可以引用结构赋值的其他变量

let [a = 1, b = a] = [];
// a=1; b=1

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

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

let [a = b, b = 1] = [];
// ReferenceError: b is not defined
1
2
3
4
5
6
7
8
9
10
11

二、对象的解构赋值

1.基础用法

---

对象的解构赋值不需要排序一一对应，只要名字相同就行

let { a, b } = { b: "bbb", a: "aaa" };
//a="aaa",b="bbb"

let { c } = { a: "aaa", b: "bbb" };
//c=undefined
1
2
3
4
5

如果不想变量名相同，就要按照下面这样写

let { one: a, two: b } = { one: "aaa", two: "bbb" };
//a='aaa',b='bbb'
1
2

嵌套赋值

const node = {
  loc: {
    start: {
      line: 1,
      column: 5,
    },
  },
};

let {
  loc,
  loc: { start },
  loc: {
    start: { line },
  },
} = node;
//line=1,loc=Object {start: Object},start=Object {line: 1, column: 5}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.默认值

---

只有严格等于 undefined 的时候，默认值才会生效

var { x = 3 } = {};
//x=3

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

var { x: y = 3 } = {};
//y=3

var { x: y = 3 } = { x: 5 };
//y=5

var { message: msg = "Something went wrong" } = {};
//msg="Something went wrong"

var { x = 3 } = { x: null };
//x=null
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.注意

---

需注意：先声明变量，后解构赋值，要用“()”把解构赋值给括起来

let x
{x}={x:1}
//会报错

let x
({x}={x:1})
//正确
1
2
3
4
5
6
7

需注意：由于数组是特殊的对象，所以可以对数组进行对象的解构

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

三、字符串的解构赋值

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

let { length: len } = "hello";
//len=5
1
2
3
4
5

四、数值和布尔值的解构

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

let { toString: s } = true;
s === Boolean.prototype.toString; // true
1
2
3
4
5

五、函数参数的解构

1.基本用法

---

function add([x, y]) {
  return x + y;
}
add([1, 2]); // 3
1
2
3
4

2.默认值

---

设置 x、y 的默认值

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]
1
2
3
4
5
6
7
8

设置传参的默认值

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]
1
2
3
4
5
6
7
8