ES6

ES6(ECMAScript 6)笔记2-变量的解构赋值

概念

按照一定的模式，从数组和对象中提取值，对变量进行赋值，这个被成为解构。

数组的解构赋值

下面表示可以从数组中提取值，按照对应的位置对变量赋值。

1
2
3
4
5
6
7
8
9
10
11
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

不完全解构

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

1
2
3
4
5
6
7
8
let [x, y] = [1, 2, 3];
x // 1
y // 2

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

对undefined和null进行解构会出错。

因为解构只能用于数组或对象，其他原始类型的值都可以转换为对应的对象，但是undefined和null不能，所以报错。

1
2
3
// 报错
let [foo] = undefined;
let [foo] = null;

解构允许指定默认值

值得注意的是ES6内部使用严格相等（===），所以如果一个数组对象不等于undefined默认不会生效。

1
2
3
4
5
6
7
8
9
10
11
var [foo = true] = [];
foo // true

[x, y='b'] = ['a'] // x='a', y='b'
[x, y='b'] = ['a', undefined] // x='a', y='b'

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

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

对象的解构赋值

对象的解构与数组有一个重要的不同，数组的元素是按次数排列的，变量的取值由它的位置决定，对象没有次序，是按照属性名的。

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

如果变量名和属性名不一致，必须写成下面这样。

1
2
3
4
5
6
7
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

函数参数的解构赋值

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

add([1, 2]) // 3

用途

交换变量的值

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

从函数返回多个值

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 返回一个数组

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

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

函数参数的定义

方便的将一组参数与变量名对应起来。

1
2
3
4
5
6
7
8

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

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

提取JSON数组

1
2
3
4
5
6
7
8
9
10
var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
}

let { id, status, data: number } = jsonData;

console.log(id, status, number)
// 42, OK, [867, 5309]

函数参数的默认值

1
2
3
4
5
6
7
8
9
10
11
jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};