ES6学习-变量的解构赋值

说明：本文参考阮一峰的ECMAScript 6 入门

变量的解构赋值

1.数组的解构赋值

基本用法

ES6允许按照一定模式，从数组和对象中提取值为变量赋值，这被称为解构。就好像是把数组或对象里的值一个个分解出来构成单独的变量值（便于理解，我就这么从字面意思强行解释吧）。
以前为变量赋值，只能直接指定值

let a = 1
let b = 2
let c = 3

ES6允许写成下面形式

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

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质这种写法属于“模式匹配”,只要等号两边的模式相同，左边的变量就会被赋予对应的值。

默认值

结构赋值允许指定默认值

let [x = true] = []
x  //true
let [a, b = '2'] = [1] //a = 1,b = 2
let [x, y = '6'] = [5, undefined] //x = 5, y = 6

注意，ES6内部使用严格相等运算符(===),判断位置是否有值。所以当有一个数组成员严格相等于undefined时，默认值才会生效。

let [r = 1] = [undefined]
r	//1
let [r = 1] = [null]
r	//null

上面代码中，如果有一个数组成员是null，默认值就不会生效，因为null不严格相等于undefined。

~如果默认值是一个表达式，那么这个表达式不会立即求值，只有在默认值生效时该表达式才会求值。

function  f() {
	console.log(‘aaa’)
}
let [x = f()] = [1]

上述代码中，因为x能取到值，所以不会去执行f函数。
~默认值可以引用解构赋值的其他变量，但这个变量必须已经声明。

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] = []  ReferenceError: y is not defined

上面代码，最后一行之所以报错是因为x用y作默认值，但y此时还没有声明。

2.对象的解构赋值

解构不仅可以使用数组，还可以使用对象。

let { val1, val2 } = { val1:  'aaa',  val2: 'bbb' }
val1 //aaa
val2 //bbb

对象的解构和数组的解构有一个重要的不同。数组的元素是按次序取值的，变量的值取决于其在数组的位置；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

//例一
let { val1, val2 } = { val2: 'bbb', val1: 'aaa' }
val1 //aaa
val2 //bbb
//例二
let { val2, val1 } = { val1: 'aaa',val2: 'bbb' }
val1 //aaa
val2 //bbb

上面代码说明，等号两边的次序不一致，对取值完全没有影响。

~如果结构失败，变量的值等于undefined。

let { baz } = { foo: 'aaa'}
baz //undefined

上面代码中，等号右边的对象没有baz属性，所以变量baz取不到值，所以等于undefined.

~对象的解构赋值，可以很方便的把现有对象的方法，赋值到某个变量。

//例一
let { sin, cos } = Math
sin(Math.PI/2)  //1
//例二
let { log } = console
log('hello) //hello

上面的代码例一把Math对象的sin和cos方法，赋值到对应的变量，使用起来就方便很多。例二将console.log赋值到log变量。

~如果变量值与属性值不一致，就需要使用下面的方法。

let { foo: baz } = { foo: 'aaa' }
baz //aaa

上面代码说明，对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' } 

也就是说对象的解构赋值，是先找到同名属性，然后再赋给对应的变量。真正赋值的是后者，而不是前者。

let { foo: bar  } = { foo: 'aaa'}
//bar //aaa
foo  // error: foo is not defined

上面代码中，foo是匹配模式，bar才是变量。真正赋值的是bar，而不是模式foo。

默认值

对象的解构也可以指定默认值。

let  { x= 3 } = {}
x //3
var { x, y = 5 } = {x: 1};
x // 1
y // 5

var { x: y = 3 } = {};
y // 3

默认值生效的条件是，对象的属性严格相等于undefined。

let { x = 3 } = { x: undefined } 
x //3
let { x = 3} = { x: null }
x //null

上面代码中，null不严格相等于undefined，所以是有效赋值，值为null，默认值无效。

注意点

（1）如果将一个已经声明的变量进行解构赋值，必须非常小心。

//错误的写法
let x;
{ x } = { x: 1}
// SyntaxError: syntax error

上面的语法会报错，因为JavaScript引擎会把{x}解析成代码块，从而相当于是代码块
{x: 1}赋值给代码块 {x}这是不允许的，会发生语法错误。只有不将大括号写在行首，避免让js引擎解析为代码块，才能解决这个问题。

//正确写法
let x；
( { x } = { x: 1 })

（2）数组本身也是对象，因此可以对数组进行对象属性的解构。

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

上面代码对数租进行对象解构，数组arr的0键对弈值为1,[arr.length - 1]就是2键对应值为3。方括号这种写法，属于“属性名表达式”’。

3.字符串的解构赋值

字符串也可以解构赋值，这是因为字符串此时被转换成了类似数组的对象。

const [ a, b, c, d, e] = 'hello'
a //h
b //e
c //l
d //l
e //o

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

let { length: len} = 'hello'
len //5

4.数值和布尔值的解构赋值

解构赋值时，如果等号右边的值为数值或布尔值，会先转换成对象。

let { toString: s} = 123
s === Number.prototype.toString //true
let { toString: s] = true
s === Boolean.prototype.toString //true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
而对于null和undefined来说，因为无法转换为对象，所以对它们进行解构赋值就会报错。

let { prop: x} = undefined // TypeError
let { prop: x} = null // TypeError

5.函数参数的解构赋值

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

6.用途

(1)变换变量的值

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

(2)从函数返回多个值

//返回一个数组
function fuc () {
	return [1, 2, 3]
}
let [a, b, c] = fuc()

//返回一个对象
function fuc () {
	return {
		foo: 1,
		bar: 2
	}
}
let {foo, bar} = fuc()

(3)提取json数据

let jsonData = {
	id: 19,
	status: "ok",
	data: [867, 657]
}
let {id, status, data} = jsonData

(4)函数参数默认值

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

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。
(5)遍历map

let map = new Map()
map.set('first', 'hello')
map.set('last', 'world')

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

(6)输入模块的指定方法
加载模块时，有时候需要指定某个具体的方法。解构赋值使得输入语句非常清晰。

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