解构赋值之解构对象

现在有这样一个对象:

let person = {
     name:"Daniel",
     age:"100",
     city:"China"
};

在ES6之前如果想获取对象当中的值(比如年龄),我们可以这样来写:

person.age;
//或者
person['age'];

而使用ES6的解构赋值语法,我们可以这样写:

let { age : personAge } = person;

上面的personAge是新建的一个变量,我们现在直接打印personAge得到的就是person.age的值.
其实上面那句话就相当于:

let personAge = person.age;

实际上,还可以写的更简单一点:

let { age } = person;

直接把 key 值放到花扩号里面,上面这句话就相当于:

let age = person.age;

如果需要获取多个值,我们可以这样写:

let { age,location } = person;

这时你应该会想到如果用老方法应该是这样写:

let age = person.age;
let location = person.location;

解构赋值之解构数组

一个数组:

let numbers = [1,2,3,4];

我需要获取数组当中的前两项,老方法是这样写:

numbers[0];
numbers[1];

而使用解构赋值的语法,我们可以:

let [first,second] = numbers;

上面这句话就相当于:

let first = numbers[0];
let second = numbers[1];

如果我需要获取第1、2、4项,那么我们可以这样写:

let [first,second, , fourth] = numbers;

可以看到,中间有一个空位,fourth存的就是第4项,也就是numbers[3]的值。

我们还可以使用剩余参数(如果不知道剩余参数,可以查看一起学习ES2015(ES6入门)一文):

let [first,second,…theRest] = numbers;

这时的first,second,theRest的结果分别是:

first : 1
second : 2
theRest : [3,4]

解构赋值用于模块加载

比如我们在使用React时需要加载到react-router,而react-router里面是不只有一个组件的,比如里面有RouterRoute ,Link等,我们使用解构赋值就可以这样来引入:

import { Router,Route,Link } from 'react-router';

如果按常规的方法来写则是这样的:

var Router = require('react-router').Router;
var Router = require('react-router').Route;
var Link = require('react-router').Link;