初步探究ES6之解构
来源:互联网 发布:python import路径 编辑:程序博客网 时间:2024/05/18 03:12
语法
解构可以使得我们用类似于数组或者对象文本的语法来指定数组的属性或者对象的属性。该语法比传统语法更加简便。
光说可能不好理解,下面看看用传统的方法来表示数组的前三项:
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);// 1console.log(bar);// 2console.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);// truevar { 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的语法变得更加简洁也更加富有表现力。
2 0
- 初步探究ES6之解构
- 初步探究ES6之生成器
- 初步探究ES6之箭头函数
- 初步探究ES6之Symbol类型
- 初步探究ES6之Proxy代理
- 初步探究ES6之class类
- 初步探究ES6之module模块化
- 初步探究ES6之序章
- 初步探究ES6之箭头函数
- 初步探究ES6之箭头函数
- 初步探究ES6之箭头函数
- 初步探究ES6之Proxy代理
- ES6之解构赋值
- ES6之-解构赋值
- ES6之解构赋值
- 初步探究ES6之for循环和Map,Set
- 初步探究ES6之for循环和Map,Set
- ES6之二(解构赋值)
- OC之继承、初始化、便利构造器
- object references an unsaved transient instance
- HTTP403(禁止访问)---WampServer 127.0.0.1 禁止访问
- webview 调用js 4.2之前与之后的区别
- Thread、AsycTask、IntentService的比较
- 初步探究ES6之解构
- NSXMLParser解析XML数据
- 工作周报067
- JavaScript DOM编程艺术—javascript实现移动元素动画
- my_zshrc
- PhoneGap插件调用Java流程源码分析(二)
- 代理模式(Proxy Pattern)
- excel to DataSet
- Python基础——拾遗