初步探究ES6之解构
2015-11-19 09:04
323 查看
语法
解构可以使得我们用类似于数组或者对象文本的语法来指定数组的属性或者对象的属性。该语法比传统语法更加简便。光说可能不好理解,下面看看用传统的方法来表示数组的前三项:
var first = someArray[0]; var second = someArray[1]; var third = someArray[2];
有了解构语法后,我们可以使用下面的语法来完成同样的工作:
var [first, second, third] = someArray;
看起来是不是简单多了。
解构的一般语法格式为:
[ variable1, variable2, ..., variableN ] = array;
我们可以用var,let和const来修饰:
var [ variable1, variable2, ..., variableN ] = array; let [ variable1, variable2, ..., variableN ] = array; const [ variable1, variable2, ..., variableN ] = array;
如果不知道let和const,可以看这篇文章
解构还可以满足复杂的结构:
var [foo, [[bar], baz]] = [1, [[2], 3]]; console.log(foo); // 1 console.log(bar); // 2 console.log(baz); // 3
不仅如此哦,解构还可以利用剩余参数或者无参数:
var [head, ...tail] = [1, 2, 3, 4]; console.log(tail); // [2, 3, 4] var [,,third] = ["foo", "bar", "baz"]; console.log(third); // "baz"
下面看看解构生成器函数的demo吧:
function* fibs() { var a = 0; var b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } var [first, second, third, fourth, fifth, sixth] = fibs(); console.log(sixth); // 5
上面说的都是数组,那么对象呢?对象同样可以解构。
var robotA = { name: "Bender" }; var robotB = { name: "Flexo" }; var { name: nameA } = robotA; var { name: nameB } = robotB; console.log(nameA); // "Bender" console.log(nameB); // "Flexo" var { foo, bar } = { foo: "lorem", bar: "ipsum" }; console.log(foo); // "lorem" console.log(bar); // "ipsum" var complicatedObj = { arrayProp: [ "Zapp", { second: "Brannigan" } ] }; var { arrayProp: [first, { second }] } = complicatedObj; console.log(first); // "Zapp" console.log(second); // "Brannigan"
我们也可以在解构时对变量带上默认值:
var [missing = true] = []; console.log(missing); // true var { message: msg = "Something went wrong" } = {}; console.log(msg); // "Something went wrong" var { x = 3 } = {}; console.log(x); // 3
应用
好啦,说了这么半天的语法,大家也应该好奇这个解构虽然看起来比较炫,但实际上能够做些什么呢?毕竟大多数人是搞应用开发的,所以还是对应用更加重视啊。第一个应用场景就是函数参数的定义。作为开发人员,我们经常要为别的程序员提供api。我们希望他人可以接受作为参数的多个属性的单个对象而不是逼迫他们记住参数的顺序。这个时候就可以用到解构。
function removeBreakpoint({ url, line, column }) { // ... }
再想一想我们用过的jquery中的ajax方法,也可以利用解构来完成:
jQuery.ajax = function (url, { async = true, beforeSend = noop, cache = true, complete = noop, crossDomain = false, global = true, // ... more config }) { // ... do stuff };
这样就避免了一个一个的为属性赋值。
解构还可以配合其他ES6提出的方法一起来使用,比如map:
var map = new Map(); map.set(window, "the global"); map.set(document, "the document"); for (var [key, value] of map) { console.log(key + " is " + value); } // "[object Window] is the global" // "[object HTMLDocument] is the document" for (var [key] of map) { // ... } for (var [,value] of map) { // ... }
解构还有许多应用场景,这里就不一一描述了,总而言之,解构使javascript的语法变得更加简洁也更加富有表现力。
相关文章推荐
- Python基础之字符串处理方法的总结
- Java Object 类源码分析
- Win10系统关机后电源灯一直亮该怎么办?
- Spring 使用注解集成Log
- 一周开发app__Android开源计划
- 【Educational Codeforces Round 1A】【水题】Tricky Sum 1~n之和减去2的幂
- java学习笔记#从控制台输入整数,输出最大最小值,直到输入0结束
- 最不要命十件小事
- 每间隔N秒执行的线程
- ssh框架整合中出现的问题
- vmware workstation与WIFI共享大师
- libcurl教程
- XCode快捷键
- MySQL5.6.12源码编译安装详细过程
- 单片机裸奔框架1
- 跟我学习javascript的作用域与作用域链
- Objective-c:类目、延展、协议
- Android实现多层级Spinner列表选项实时更新树形层级
- UML画图文档总结
- TNS-12547: TNS:lost contact TNS-12537: TNS:connection closed as a result of ORA-609