ECMAScript 6 变量的解构赋值_在es6中,数组的解构赋值中,var [ a,b,c ] = [ 1,2 ]结果中,a、b、c的值分-优快云博客

ECMAScript 6 变量的解构赋值

数组的解构赋值

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

这种从数组中提取值，按照对应的位置，对变量进行赋值。

下面的是一些嵌套数组解构的例子(解构不成功，变量的值就等于undefined)

	
	let [foo,[[bar],baz]] = [1,[[2],3]];
	foo  //1
	bar  //2 
	baz  //3

	let [, , third] = ["foo","bar","baz"];
	third  //"baz"

	let [x, , y] = [1,2,3]
	x  //1
	y  //3
	
	let [head,...tail] = [1,2,3,4];
	head  //1
	tail  //[2,3,4]
	let [x,y,...z] = ["a"]
	x  // "a"
	y  // undefined
	z  //[]

	
	var [foo] = [];
	var [baz,foo] = [1];
	
	这两种情况都属于解构不成功，所有 foo的值都等于undefined

不完全解构


	let [x,y] = [1,2,3];
	x  //1
	y  //2

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

默认值


	var [foo=true] = [];
	foo  //true
	
	[x,y='b'] = ['a'];
	x // 'a'
	y  //'b'
	
	[x,y='b'] = ['a',undefined]; //x ='a' y = 'b'

	  注意，ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于
	undefined，默认值是不会生效的。

	var [x = 1] = [undefined] // x = 1
	
	var [x = 1] = [null] //x =null

默认值是一个表达式那么表达式是惰性求值，即只有在用的时候，才会求值


	function f(){
		console.log("123");
	}
	let [x = f()] = [1];
	只有当 let [x = f()] = [undefined] 时 函数 f()才会执行

对象的解构赋值

	
	var {foo,bar} = {foo:"aaa",bar:"bbb"};
	foo  // "aaa"
	bar  //"bbb"
	
	对象赋值不取决于变量的位置，取决于属性名相同

	var { bar, foo } = { foo: "aaa", bar: "bbb" };
	foo // "aaa"
	bar // "bbb"

	变量名和属性名不一致的时候
	var [foo:baz] = {foo:'aaa',bar:'bbb'};
	baz  //'aaa'

嵌套对象

	
	var obj = {
		p:[
			'hello',
			{y:'world'}
		]
	}	
	
	var {p:[x,{y}]} = obj;
	x  // "Hello"
	y  //world
	//其中p是模式，不是变量，因此不会被赋值


	let obj = [];
	let arr = [];
	({foo:obj.pro,bar:arr[1]} = {foo:123,bar:true});

	obj  // {pro:123}
	arr  //{true}

字符串的解构赋值

	const [a,b,c,d,e] = 'hello';
	a // "h"
	b // "e"
	c // "l"
	d // "l"
	e // "o"
	
	//类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
	let {length : len} = "hello"
	len  //5

数值和布尔值的解构赋值


	//解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
	let {toString: s} = 123;
	s === Number.prototype.toString // true
	
	let {toString: s} = true;
	s === Boolean.prototype.toString // true
	//上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
	
	//解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，
	//所以对它们进行解构赋值，都会报错。
	let { prop: x } = undefined; // TypeError
	let { prop: y } = null; // TypeError

函数参数的解构赋值

	function add([x, y]){
	  return x + y;
	}
	
	add([1, 2]); // 3
	
	//函数参数的解构也可以使用默认值
	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]
	//上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。
	//如果解构失败，x和y等于默认值。

	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、交换变量的值

	[x,y] = [y,x]

2、从函数返回多个值

	
	// 返回一个数组
	function example() {
	  return [1, 2, 3];
	}
	var [a, b, c] = example();
	
	// 返回一个对象
	function example() {
	  return {
	    foo: 1,
	    bar: 2
	  };
	}
	var { foo, bar } = example();

3、函数参数的定义

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

4、提取json数据

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

5、函数参数的默认值

	
	jQuery.ajax = function (url, {
	  async = true,
	  beforeSend = function () {},
	  cache = true,
	  complete = function () {},
	  crossDomain = false,
	  global = true,
	  // ... more config
	}) {
	  // ... do stuff
	};

6、遍历Map解构

	
	var map = new 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