进军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上面多写写。