进军es6(2)---解构赋值
本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久。目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需要加快步伐掌握它,跟上前端改革的潮流。
上一篇大概提到了es6的一些变量声明基础,可能是有些乏味的,但今天所讲可能是在别的语言中都不存在的一种语法现象。它就是今天的主人公"解构赋值"。
解构赋值
es6代码可以在babel官网编写执行 -> http://babeljs.io/repl/
何为解构赋值,第一次听到这个名字,我也是相当陌生的。先分析一个小栗子:
//es5
var a = 1, b = 2, c = 3;
//es6
let [a, b, c] = [1, 2, 3];
这样看起来就很好理解了,解构赋值就是指从数组和对象中提取值,对变量进行赋值。解构可以理解为将对象的结构进行解析,并把值赋给声明的变量。不光是数组,在别的数据类型中也可以见到解构赋值的身影。
对象:
let {a, b} = {a : 'one', b: 'two'};
//a = one, b = two
字符串:
const [a, b, c, d, e] = 'apple';
//a='a',b='p'...
在函数的参数中:
function test({x, y} = {x:0, y: 1}) { return [x, y]; }
test(); // [0,1]
test({}); // [undefined, undefined]
test({a: 2, b: 3}); // [2, 3]
对解构赋值的写法有了大致了解后,我们接着研究下它的用途。
1.交换变量值
[x, y] = [y, x],千万不要以为这个是 x= y; y =x。在es6解析后会产生一个中间变量(babel上显示的是一个数组),所以是可以用作交换变量写法的。
2.函数参数无序定义以及默认值
使用自定义函数的时候,偶尔会记不准确函数参数的顺序以及个数。同样可以利用解构的方法进行参数定义:
// 无序定义
function f({x, y, z, a}) {};
f({a: 1, y:2, z:3, x: 4});
// 默认定义
function f({x, y, z, a=1})();
f({}); // x=undefined, y=undefined,z=undefined,a=1
3.提取JSON对象,可过滤信息
var jsonData = {a:1,b:2,c:[3,4]};
let {a,c} = jsonData;
4.提取模块中的方法或函数
import React, {Component, PropTypes} from 'react';
解构赋值在es6中是很简单的语法,如果还觉得很陌生,那一定要去babel上面多写写。