进军es6---解构赋值

Posted 2022-11-30 你不知道的sharlly

　　本该两周之前就该总结的，但最近一直在忙校招实习的事，耽误了很久。目前依然在等待阿里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上面多写写。