JavaScript 新旧替换二：赋值和取值
目录
引子
在取值或赋值的时候，经常会声明一个临时中间变量，新的语法可以省去这步。下面主要是关于 Object 和 Array 的赋值和取值新的方式。
这是继 JavaScript 新旧替换一：变量声明的第二篇。
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 声明符，就必须用 () 括起来。如果不这么做，解析的时候就会被当作一个块语句而不是一个对象。
