位置: 编程技术 - 正文
推荐整理分享解析JavaScript的ES6版本中的解构赋值(js excel解析),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:javascript es,js解析过程,js数据解析,js用什么解析json数据最方便,javascript解析器,js用什么解析json数据最方便,js解析过程,javascript es,内容如对您有帮助,希望把文章链接给更多的朋友!
什么是解构赋值?
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁,而且比传统的属性访问更加清晰。
在不使用解构赋值的情况下,访问数组的前三项:
使用解构赋值后,相应的代码变得更简洁和可读:
SpiderMonkey(Firefox 的 JavaScript 引擎)已经支持解构赋值的大部分特性,但还不完全。数组和可迭代对象的解构赋值
上面我们已经看到了数组解构赋值的例子,该语法的一般形式是:
这将把数组中对应的项依次赋给 variable1 到 variableN,如果同时需要声明变量,可以在解构表达式前面添加 var,let 或 const 关键字。
事实上,你还可以嵌套任意的深度:
此外,还可以跳过数组中的某些项:
你还可以用一个 Rest 表达式来捕获数组中的剩余项:
如果数组越界或访问数组中不存在的项,将得到和通过数组索引访问一样的值:undefined。
注意,数组解构赋值的方式也同样适用于可遍历的对象:
对象的解构赋值
对象的解构赋值允许你将变量绑定到对象不同的属性值。指定被绑定的属性名,后面紧跟要绑定的变量:
当绑定的属性名和接收属性值的变量名一样时,还有一个语法糖:
与数组一样,也可以嵌套:
解构一个不存在的属性时,将得到 undefined:
使用对象的解构赋值时还有一个潜在的陷阱,在解构赋值时没有声明变量(没有 var、let或 const 关键字):
这是因为 JavaScript 语法告诉引擎任何以 { 开始的语句都是语句块(例如,{console} 就是一个合法的语句块),解决方法是将整个语句用一对括号包裹:
其他情况
当你尝试解构 null 或 undefined,你将得到类型错误:
不过,你可以对其他基本类型(Boolean、String 和 Number)进行解构,将得到 undefined:
结果也许会让你感到意外,但深究一下,其实原因很简单。在进行对象解构赋值时,被解构的对象将被强制转换为 Object,除 null 和 undefined 外,其它类型都可以被强制转换为对象。进行数组的结构赋值时,要求被解构的对象有一个遍历器。默认值
可以为不存在的属性指定一个默认值:
实际应用函数参数
作为开发人员,我们经常把一个包含多个属性的对象作为函数的参数,来实现更灵活的 API,而不是让 API 的使用者记住一些特定顺序的参数。我们可以使用对象的解构赋值,来避免每次使用参数时的属性访问:
配置对象
完善上面的例子,我们可以为要被解构的对象属性提供默认值,这在对那些作为配置参数的对象非常实用,因为许多配置项都有一个合理的默认值。例如,jQuery 的 ajax 方法的第二个参数为一个配置对象,我们可以这样实现:
这避免了类似这样的重复代码:var foo = config.foo || theDefaultFoo;。与迭代器一起使用
当遍历 Map 对象时,我们可以使用解构赋值来遍历 [key, value]:
只遍历键:
返回多个值
返回一个数组,通过解构赋值提取到返回值:
或者,返回一个键值对的对象:
这两者都比使用中间变量好:
采用延续式:
导入 CommonJS 模块的指定部分
还没使用过 ES6 的模块吧,那至少使用过 CommonJS 吧。当导入一个 CommonJS 模块 X 时,模块提供的方法也许多余你实际使用的。使用解构赋值,你可以明确指定你需要使用模块的哪些部分:
如果你使用 ES6 的模块机制,你可以看到 import 声明时有一个类似的语法。结论
我们看到,解构赋值在很多场景下都很实用。在 Mozilla,我们已经有很多经验。Lars Hansen 在 年前就向 Opera 引入了解构赋值,Brendan Eich 在稍微晚点也给 Firefox 添加了支持,最早出现在 Firefox 2 中。因此,解构赋值已经渗透到我们每天对 JS 的使用中,悄悄地使我们的代码更简短、整洁。
使用AmplifyJS组件配合JavaScript进行编程的指南 事件分发的作用在为页面添加各类交互功能时,我们熟知的最简单的做法就是为页面元素绑定事件,然后在事件处理函数中,做我们想要做的动作。就
怎么通过onclick事件获取js函数返回值(代码少) 具体过程不做详细叙述,直接上代码:写一个弹出框,绑定onclick事件是好像控制不了它的返回值。代码如下functioncreateBtn(){for(vari=0;i_this.btn.length;i++){varb
JavaScript编程中的Promise使用大全 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同。但Promise的核心内容,是相通的
标签: js excel解析
本文链接地址:https://www.jiuchutong.com/biancheng/377573.html 转载请保留说明!友情链接: 武汉网站建设