ES6知识点总结（一）

ES6知识点总结（一）

解构赋值

含义

是对赋值运算符的扩展，一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

使用场景

变量的解构赋值实用性很强，使用场景很多：
1.交换赋值
2.函数参数的定义
3.函数参数的默认值
4.从函数返回多个值
5.提取JSON数据
6.遍历Map结构

分类

数组解构、对象解构、字符串解构、数值解构、布尔值解构、函数参数解构

数组的解构赋值

基本用法

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];    // ... 扩展运算符/展开运算符
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

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

注意：
如果解构不成功，变量的值就等于undefined
没有变量接收的解构值会被忽略掉
如果赋值不是数组则会报错。

默认值

防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值

let [foo = true] = [];
console.log(foo); //true

let a, b;
[a=5, b=7] = [3];
console.log(a); // 3
console.log(b); // 7

默认值可以引用解构赋值的其他变量，但改变量必须已经声明，否则会报错。

let [x = 1, y = x] = [2];
console.log(x); // 2
console.log(y); // 2

对象的解构赋值

对象与数组解构赋值比较

1. 数组的元素是按次序排列的，变量的取值是由它的位置决定
2. 对象的属性没有次序，变量必须与属性同名才能取到正确的值。
3. 如果变量名与属性名不一致，必须明确对应关系

基本赋值

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

let obj = {
p: [
	'Hello’,
	{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;

对象解构赋值也指定默认值，且默认值生效条件是对象的属性严格等于undefined。

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

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

字符串的解构赋值

将字符串看作一个类似于数组的对象。

const [a, b, c, d] = 'hello';
console.log(a);  //h
console.log(b); //e
console.log(c); //l
console.log(d); //l

类似数组的对象都有一个length属性，因此还可以对这个属性进行解构。

let { length: len } = 'hello';
console.log(len);  //5