【ES6】解构赋值

一、解构赋值

• 解构赋值：主要用来从数组和对象中提取值，对变量进行赋值。
• []：是专门解构数组使用的
• {}：是专门解构对象使用的

二、解构数组

1. 变量赋值

• ES6之前的写法：

var a1 = 1,b1 = 2;
console.log(a1,b1)	// 1 2

var a2,b2;
a2 = 11;
b2 = 22;
console.log(a2,b2)	// 11 22

var arr = ['jack','rose'];
console.log(arr[0],arr[1])	// jack rose

• 解构赋值写法：

var [a1, b1] = [1, 2];
console.log(a1,b1)	// 1 2

var a2,b2;
[a2, b2] = [11, 22];
console.log(a2,b2)	// 11 22

var arr = ['jack','rose'];
var [a3,b3] = arr;
console.log(a3,b3)	// jack rose

- 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

2. 交换变量

• ES6之前的写法：

var a=1,b=2,c;
c = a;
a = b;
b = c;
console.log('a='+a,'b='+b)	// a=2 b=1

• 解构赋值写法：

var a=1,b=2;
[a, b] = [b, a];
console.log('a='+a,'b='+b)	// a=2 b=1

3. 默认值

• 如果解构不成功，变量的值就等于undefined。

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

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

let a, b, c, d;
[a=5, b=7] = [1];
[c,d] = [2]
console.log(a,b,c,d); // 1 7 2 undefined

• 当数组成员为null的时候，默认值就不会生效

let [x = 1] = [undefined];
console.log(x);	// 1

let [y = 1] = [null];
console.log(y); // null

4. 不完全解构

• 等号左边的模式，只匹配一部分的等号右边的数组。
• 这种情况下，解构依然可以成功。

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

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

5. 解构数组嵌套

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

6. 与...运算符结合使用

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

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

三、解构对象

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
如果变量与属性不同名，需要先匹配属性名，在定义变量。

• 左边定义的变量名与右边对象的属性名相同时

let {x, y} = {x: 1, y: 2,}
// 相当于 {x: x, y: y} = {x: 1, y: 2,}
console.log(x, y)	// 1 2

• 左边定义的变量名与右边对象的属性名不相时

let {x: a, y: b} = {x: 1, y: 2,}
// 此时x，y是用来匹配右边对象的属性名，a，b才是变量
console.log(a, b)	// 1 2

1. 获取成员

• 解构赋值对可以用来提取 JSON 对象中的数据

const obj = {
	name : 'jack',
	age : 18,
	gender : '男'
}
let name = obj.name;
let age = obj.age;
let gender = obj.gender;

• 解构赋值的方式从对象中获取成员

const obj = {
	name : 'jack',
	age : 18,
	gender : "男"
}
//前面的{}表示我要从obj这个对象中获取成员了
//name age gender 都得是 obj 中有的成员
//obj 必须是一个对象
let { name,age,gender } = obj;

2. 对象赋值

• 声明后赋值

let obj = {a: 6, b: 4};
let {a, b} = obj;
console.log(a,b); // 6 4

• 无声明赋值

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

3. 默认值

• 指定对象的解构默认值。

let {a = 3} = {};
console.log(a) // 3

let {b, c = 5} = {b: 1};
console.log(b, c) // 1 5

let {d: e = 3} = {};
console.log(e) // 3

let {f: g = 3} = {f: 5};
console.log(g) // 5

• 当对象成员为null的时候

let [x = 22] = {x: undefined};
console.log(x);	// 22

let [y = 1] = {y: null};
console.log(y); // null

4. 解构嵌套对象

• 与数组一样，解构也可以用于嵌套结构的对象。

let obj = {
  a: [
    'Hello',
    { y: 'JavaScript' }
  ]
};
let { a: [x, { y }] } = obj;
console.log(x, y); // Hello JavaScript

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

四、解构函数

1. 函数的参数

• 函数的参数也可以使用解构赋值。

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

• 函数参数的解构也可以使用默认值。

function fn({x = 8,y} = {}) {
  console.log(x,y);
  return [x, y];
}
fn(); 				// [8, undefined]
fn({}); 			// [8, undefined]
fn({x: 9}); 		// [9, undefined]
fn({x: 6, y: 4});	// [6, 4]

2. 函数返回值

• 当函数返回一个数组时，使用解构处理更方便

function fn() {
  return [1, 2];
}
let a, b;
[a, b] = fn();
console.log(a,b); // 1 2

• 忽略一个函数的某些返回值

function fn() {
  return [1, 2, 3];
}
let a, b;
[, b, c] = fn();
console.log(b, c); // 2 3

• 忽略一个函数的全部返回值

function fn() {
  return [1, 2, 3];
}
[ , , ] = fn();

四、其他解构

1. 字符串

• 字符串会被转换成了一个类似数组的对象。

let [a, b, c] = 'ES6';
console.log(a, b, c)	// E S 6

• 字符串的length属性也能进行解构赋值

let {length : l} = 'ES6';
console.log(l) // 3

3. 其他数据类型

• 当等号左边为对象，右边为 数值、布尔值、undefined和null时

let {a1: b1} = 666;
console.log(b1);	// undefined
let {a2: b2} = true;
console.log(b2);	// undefined
let {a3: b3} = undefined;
console.log(b3);	// 报错
let {a4: b4} = null;
console.log(b4);	// 报错