Ecmascript 6简称es6,是javascript下一代标准,还处在开发阶段,估计2014年底发布,有关更多浏览器对es6的支持情况,点击这里
今天说说es6里对赋值语句的改进,简称解构赋值.
解构赋值
所谓解构赋值其实就是按照模式匹配进行批量赋值
下面的是以往的赋值语句
var a = 1;
var b = 2;
var c = 3;
以往的方式对于赋值多个变量的时候代码比较多而且不方便,那么es6里对它是怎么改进的呢?
通过以对象或者数组结构组装数据进行赋值,要保证赋值左右值类型相同,先来说说数组赋值.
数组赋值
先上一段简单的代码
var [a, b, c] = [1, 2, 3]; // => 1 2 3
上面就是给变量a, b, c分别赋值1,2,3,是不是感觉代码立马简便不少呢.这只是赋值语句最简单的用法,下面一一列出别的赋值特点
- 左值支持默认值
var [a = 1] = []; // => 1
- 左值支持
...语法来装载剩余的右值，只能放在最后
var [a, b, ...c] = [1, 2, 3, 4, 5, 6]; // => 1 2 [3, 4, 5, 6]
- 左值支持嵌套多层,支持嵌套数组与对象,这里提前说下对象赋值要保证
键值相同
var [a, [b], [[c]] ] = [1, [2], [[3]]]; // => 1 2 3
var [a, [ {b} ], [c] ] = [1, [ {b: 2} ], [3] ]; // => 1 2 3
下面说说利用对象作为左右赋值类型来进行快速赋值
对象赋值
先上一段简单的代码
var { a, b } = { a: 'hello' , b: 'feenan'}; // => hello feenan
对象类型跟数组类型的区别在于对象是以键值来匹配的,而数组是以位置来匹配的,所以对象赋值对顺序没要求,但是数组需要以左值顺序来赋值的
下面列出一些关于对象赋值的一些特点,有些跟数组赋值相似
- 左值支持默认值
var { a = 1 } = {}; // =>1
- 左值支持嵌套多层,支持嵌套数组与对象
var { a: [b, {c}] } = {
a: ['hello', { c: 'feenan'} ]
};
// => undefined hello feenan
上面的赋值只会给b,c赋值,a没有赋值,经测试发现只要左侧内的变量包含子变量的话,则本身是不会赋值的
说完了数组与对象类型的赋值语句,下面再说说其它用途
赋值语句用途
变量互换
var [x, y] = [1, 4];
[x, y] = [y, x]; // x => 4 , y => 1
函数默认参数
function abc({
x = 1,
y = 2
}){
console.log(x, y);
}
abc({x:7}); // => 7 2
abc({y:7}); // => 1 7
abc({}); // => 1 2
导出指定模块的功能
var {open, close} = require('fs');
利用for...of语法获取map键值对
var map = new Map();
map.set('action', 'hello');
map.set('info', 'feenan');
for(let [key, value] of map){
console.log(key, value); // => action hello & info feenan
}
运行
关于上面的例子可以通过安装traceur模块来进行测试
npm install -g traceur
运行例子如下
traceur demo.js
总结
个人比较喜欢此次es6的赋值语法糖,希望各大浏览器厂商赶紧提供支持吧 :)
