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

引子

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

这是继 JavaScript 新旧替换一：变量声明的第二篇。

• Origin
• My GitHub

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 声明符，就必须用 () 括起来。若是不这么作，解析的时候就会被看成一个块语句而不是一个对象。

参考资料

• ECMAScript Standard
• JavaScript高级程序设计（第3版）
• 你不知道的JavaScript（下卷）
• ECMAScript 6 入门