【学习笔记】ES6的解构赋值

MDN给出解构赋值的概念：
解构赋值语法是一种 Javascript 表达式。通过解构赋值,
可以将属性/值从对象/数组中取出,赋值给其他变量，也就是说ES6​允许按照一定模式，从​数组​和​对象​中​提取值​，对变量进行​赋值。
解构赋值​不仅适用于​var​命令，也适用于​let​和​const​命令

比如下面的变量

	var a=1;
	var b=2;
	var c=3;

在ES6语法中可以写为

	// 如果等号的右边不是数组（​不是可遍历的结构​），将会​报错​
	// 如果解构​不成功​，变量的值就等于​undefined
	var [a,b,c]=[1,2,3];    // 等号两边的模式相同​

可以嵌套

	var [foo, [[bar], baz]] = [1, [[2], 3]];    //可以嵌套
	foo // 1
	bar // 2
	baz // 3

可以忽略

	var [ , , third] = ["foo", "bar", "baz"];    // 可以忽略
	third // "baz"
	
	var [x, , y] = [1, 2, 3];  // 可以忽略
	x // 1
	y // 3

剩余运算符

	var [head, ...tail] = [1, 2, 3, 4];    // ... 表示剩余运算符
	head // 1
	tail // [2, 3, 4]

不完全解构

	let [a = 1, b] = [];                // 不完全解构
	a  //  1
	b  //  undefined

设置默认值
解构赋值 ​允许指定​ 默认值​。
当​解构模式​有匹配结果，且匹配结果是 ​undefined ​时，会触发​默认值​作为返回结果。

语法： let [变量=默认值]=[赋值]

	let [num=2]=[];    // 输出为2
	let [num1,num2=10]=[5];     //输出 num1为5, num2为10
	let [x = 1, y = x] = [];     // x=1; y=1
	let [x = 1, y = x] = [2];    // x=2; y=2
	let [x = 1, y = x] = [1, 2];     // x=1; y=2
	let [x = y, y = 1] = [];     // 报错,因为x用到默认值y时，y还没有声明
	[x, y = 'b'] = ['a', undefined];     // x='a', y='b'

对象的解构赋值

	// 注意 ​变量 ​必须与​ 属性 ​​同名​，才能取到正确的值，位置顺序没关系
	var { name, age } = { name: "sss", bar: "12" };    // name：sss ，age：12
	// 如果 ​变量名​ 与​ 属性名​ 不一致，必须写成这样
	var { foo: baz } = { foo: 'aaa', bar: 'bbb' };     //  baz ："aaa"
	let obj = { first: 'hello', last: 'world' };
	let { first: a, last: b } = obj;        //a的值为hello，b的值为world

函数参数的解构赋值

	function add([x, y]){
	  return x + y;
	}
	add([1, 2]);     // 3
	//函数参数​的​解构​也可以使用​默认值
	function move({x = 1, y = 2} = {}) {    // 默认参数 x=1,y=2
  		return [x, y];
	}
	//函数​move​的参数是一个​对象​，通过对这个对象进行​解构​，得到变量​x和y​的值。
	//如果解构失败，x和y等于默认值
	move({x: 3, y: 8});     // [3, 8]
	move({x: 3});     // [3, 2]
	move({});     // [1, 2]
	move();     // [1, 2]

解构赋值的使用场景

• 交换变量的值​

	[x, y] = [y, x];

• 方便从函数取值

 	function func() {
  		return [1, 2, 3];
  	}
	var [a, b, c] = func();

• 提取JSON数据

	var jsonData = {
	  id: 12,
	  name: "sss",
	  data: [867, 5309]
	};
	
	let { id, name, data: number } = jsonData;

• 函数参数的定义

// 参数是一组无次序的值
	function f({x, y, z}) { ... }
	
	f({z: 1, y: 2, x: 3});

• 函数默认参数值

	function move({x = 1, y = 2} = {}) { // 默认值
	  return [x, y];
	}
	
	move({x: 3});     //   y使用默认值，x：3， y：2

• 遍历Map结构

	map.set('first', 'hello');
	map.set('second', 'world');
	
	for (let [key, value] of map) {
	  console.log(key + " is " + value);
	}
	// first is hello
	// second is world

• 输入模块的指定方法

	const { SourceMapConsumer, SourceNode } = require("source-map");

笔记内容来至w3cschool