JavaScript 新旧替换二：赋值和取值

引子

在取值或赋值的时候，经常会声明一个临时中间变量，新的语法可以省去这步。下面主要是关于 Object 和 Array 的赋值和取值新的方式。

ES5 方式

Object

Object 类型一般可以这样赋值：

var boy = { name: "Jack",age: 18 };
// 或者这样
var girl = {};
girl.name = "Rose";
girl.age = 18;

Object 类型一般可以这样取值：

var boy = { name: "Jack",age: 18 };
var name = boy.name;
var age = boy['age'];

Array

Array 类型一般可以这样赋值：

var colors = new Array("red", "blue", "green");
// 或者这样
var fruit = ['apple','banana','peach'];
// 或者这样
var flower = [];
flower[0] = 'rose';
flower[1] = 'carnation';
flower[2] = 'tulip';

Array 类型一般可以这样取值：

var colors = new Array("red", "blue", "green");
var color1 = colors[0];

ES2015+ 方式

在 ES2015 中引入了一个新的语法特性，名为解构（destructuring）。它可以从对象或数组中提取值，然后对变量进行赋值。简化了取值和赋值的代码。看下面的例子。

ES5 方式：

function getPersonInfo () {
  return { name: 'Jack',age: 18 };
}
var message = getPersonInfo();
var personName = message.name,personAge = message.age;
console.info(personName,personAge); // Jack 18

使用解构：

function getPersonInfo () {
  return { name: 'Jack',age: 18 };
}
let { name:name,age:age } = getPersonInfo();
console.info(name,age); // Jack 18

Object

在上面的例子中，如果使用的变量名跟对象中的属性名一样，可以写的更加简洁：

let { name,age } = getPersonInfo();
console.info(name,age); // Jack 18

对比简化之前的形式，是略去了 name: 还是略去了 :name？实际上是略去 name: 部分。如果想要赋给非同名变量，可以这样做：

let { name:personName,age:personAge } = getPersonInfo();
console.info(personName,personAge); // Jack 18

关于这种形式，需要关注这个细节。至于原因，先来思考一下一般对象字面值：

var x = 10,y = 20;
var o = { a:x,b:y };
console.info(o.a,o.b); // 10 20

对于 { a:x,b:y }，我们知道 a 是对象属性，x 是要赋给 a 的值。这种语法模式跟赋值符 = 的模式一样：target = source，我们可以很直观的理解这一点。在使用解构的时候：

let { name:personName,age:personAge } = getPersonInfo();

name:personName 中 name 表示属性的源值，personName 是要赋值的目标变量。可以发现，对象字面值是 target <-- source，而对象解构赋值是 source --> target。注意到这个反转，对解构语法的理解很有帮助。

还可以像下面这样对比的观察：

let m = 10,n = 20;
let o = { a:m,b:n };
let     { a:M,b:N } = o;

前面说解构是略去了 a: 这部分，把上面代码中两行的 a: 和 b: 都去掉，看起来就好像是把 m 赋值给了 M，把 n 赋值给了 N。

Array

function getColors() {
  return ["red", "blue", "green"];
}
let [color1,color2,color3] = getColors();
console.info(color1,color2,color3); // red blue green

数组解构跟对象解构不太一样，数组的元素是按次序排列，变量的取值由位置决定，而对象的属性是没有次序，变量必须跟属性同名，才能取到对应值。

数组解构的这种写法属于模式匹配：只要等号两边的模式相同，左边的变量就会被赋予对应的值。

数组解构的情况有：

完全解构

等号左边的模式，跟等号右边的数组完全匹配。

let [x,y,z] = [1,2,3];
console.info(x,y,z); // 1 2 3

let [a,,c] = [1,2,3];
console.info(a,c); // 1 3

部分解构

等号左边的模式，跟等号右边的数组部分匹配。

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

let [a, [b], c] = [1, [2, 3], 4];
console.info(a,b,c); // 1 2 4

解构失败

let [x] = [];
console.info(x); // undefined

let [a,b] = [1];
console.info(a,b); // 1 undefined

解构失败，变量的值会为 undefined。

默认值

解构可以制定默认值。使用默认值的条件是：

对象的属性值 === undefined。
数组成员 === undefined。

对象解构默认值：

let {x:y=1} = {};
console.info(y); // 1

let {a:b=1} = {a:2};
console.info(b); // 2

数组解构默认值：

let [x=1] = [undfined];
console.info(x); // 1

let [a=1] = [null];
console.info(a); // null

不只是声明

在上面的例子中，在 let 声明中应用了解构赋值，但解构是一个通用的赋值操作，不只是声明。

let m,n;
[m] = [1];
( {n} = {n:2} );
console.info(m); // 1
console.info(n); // 2

上面的例子中，变量都已经声明，这样解构就只是用于赋值。

对于对象解构，如果省略了 var/let/const 声明符，就必须用 () 括起来。如果不这么做，解析的时候就会被当作一个块语句而不是一个对象。