解构赋值之解构对象
现在有这样一个对象:
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
里面是不只有一个组件的,比如里面有Router
,Route
,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;