首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【JS代码优化二】ES6 数组篇

序:如何让代码看起来更优雅?代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息(状态)、表达相关的情绪(函数),所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的,就是带着大家如何实现更有效、更优雅的编程。笔记涵盖:运算符、流程语句、设计模式、ES6 新增方法等多个方面。

“Array.from”

这个方法用于将类数组对象(NodeList 节点列表、String 字符串、arguments 参数对象、HTMLCollection 元素列表等具有 length 属性的对象)转为真正的数组。

在这个方法之前,我们都是使用 apply 或 call 方法实现。

Array.from 实现

HTMLCollection 元素列表、NodeList 节点列表、Arguments 参数列表这些伪数组处理方式相同。参数求和、页面DOM排序等应用场景。

Array.from 第二个参数类似 “Array.prototype.map” 可以用于处理数据,这样看来就比 apply 功能更加强大。

“Array.of”

初学者在学习 Array 内置数组对象的时候,都感觉创建对象时,有一个很神奇的地方,就是你给 Array 传递不同的参数,得到不同的结果。

传递一个数字:得到的是一个长度为指定数字长度的空数组

传递一个非数字:长度为1,元素就是当前这个参数

传递两个以上数字类型或混合类型:得到的是以两个值为数组元素,长度为 2 的数组

Array.of 的出现弥补了 Array 的不足,使得我们创建数组对象时,传入的任何类型参数,都是数组元素

通常情况下,访问数组后面几个元素的做法是访问 length 并将其减去从末端开始的相对索引(因为中括号的方式不支持负索引)。例如,array[array.length - 1]。

而 at 方法的出现允许使用相对索引(支持负索引),因此上面的示例可以简化为 array.at(-1)。

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。

可以用其来做逻辑或运算的简化操作

逻辑或运算

includes 实现

应用示例演示

arguments 对象 + for 循环

arguments 对象 + Array.from(或者 apply、call)+ reduce

es6有arguments,但箭头函数是不识别arguments的,所以用rest(剩余参数)来取代arguments;剩余参数直接就固定到数组里了,而arguments是类数组(本质是个对象),还需要转换。剩余参数语法允许将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。

... 不定参数

… 拓展运算符 + reduce 求和

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20230308A075O000?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券