(14/05/21) ES6 解构赋值(数组解构赋值 - 对象解构赋值)

一、 数组解构赋值

数组解构是按照元素位置一一对应进行解构赋值

1.1 完全解构

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

1.2 不完全解构

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

1.3 解构第一个

	const [a] = [1, 2, 3, 4]
	console.log(a)  // 1

1.4 解构最后一个

	const [ , , , d] = [1, 2, 3, 4]
	console.log(d)  // 4

1.5 嵌套数组解构

	const arr = [1, [2, [3, 4, [5]]]]
		  const [ , [ , [c,  , [e]]]]
	console.log(c, d)  //  3, 5

1.6 解构剩余数组元素 (剩余参数)

	const [one, ...args] = [1, 2, 3, 4]
	console.log(one, args)  // 1, [2, 3, 4]

1.7 数组解构赋值默认值

生效条件: 被解构数组中的元素等于undefined

const [a, b, c] = [11, 22]
console.log(a, b, c)  // 11, 22, undefined

const [a=1, b=2, c=3] = [11, 22]
console.log(a, b, c)  // 11, 22, 3   a和b被覆盖;c为默认值3

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

const = [a, b] = []
console.log(a, b)  // undefined undefined

二、 对象解构赋值

对象解构赋值是按照对象属性名进行匹配，匹配成功之后进行结构赋值

2.1 解构剩余参数

	const obj = { a: undefined, b: undefined, c: 33, d: 44, e: 55 }
	const { a, e, ...obj1 } = obj
    console.log(a, e); // undefined 55
    console.log(obj1); // {b: undefined, c: 33, d: 44}

2.2 对象结构赋值默认值

生效条件：匹配到的属性值为undefined

	const obj = { a: undefined, b: undefined, c: 33, d: 44, e: 55 }
	const {a=1, b=2, c=3, d=4, e, f=6} = obj
	console.log(a,b,c,d,e,f);  // 1 2 33 44 55 6

2.3 对象结构赋值别名

	const { a: aa, b: bb, c: cc, d } = { a: 1, b: 2, c: 3, d: 4 }
	console.log(aa, bb, cc, d); // 1, 2, 3, 4 

三、用途

1.1 交换变量的值

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

1.2从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

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

1.3 提取 JSON 数据

    let jsonData = {
        id: 42,
        status: "OK",
        data: [867, 5309]
    };
    let { id, status, data: number } = jsonData;
    console.log(id, status, number);  // 42 OK [867, 5309]