跟进 JavaScript 标准演进:聚焦 ECMAScript 6 后续版本中新增数组API

引言

自从 ECMAScript 6(简称ES6)发布以来,JavaScript编程语言经历了显著的演变,特别是在处理数组方面,引入了一系列强大的新特性与方法,从而让开发人员能够更加高效、优雅地操纵数组数据结构。这些新增的数组方法极大地提高了代码的可读性和简洁度,同时也降低了复杂操作的难度。接下来,我们将重点探讨JavaScriptES6及后续版本中针对数组所增加的一些核心方法。

  1. Array.from() 将类数组对象(如argumentsNodeList等)或可迭代对象转换为真正的数组。
javascript 复制代码
const divs = document.querySelectorAll('div');
const divsArray = Array.from(divs);

// 或者将字符串转为字符数组
const str = 'hello';
const charArray = Array.from(str);
  1. Array.of() 创建一个包含任意数量参数的新数组,解决了new Array()的歧义问题。
javascript 复制代码
const arrayWithThreeZeros = Array.of(0, 0, 0);
  1. Array.prototype.includes() 快速检测数组是否包含某个值,替代了indexOf()方法结合严格等于零的判断。
javascript 复制代码
const numbers = [1, 2, 3];
if (numbers.includes(2)) {
console.log('Number 2 is in the array');
}
  1. Array.prototype.find()Array.prototype.findIndex() 查找数组中第一个满足条件的元素或其索引,而无需使用循环。
javascript 复制代码
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const alice = users.find(user => user.name === 'Alice');
const aliceIndex = users.findIndex(user => user.name === 'Alice');
  1. Array.prototype.fill() 快速初始化或替换数组中的元素值。
javascript 复制代码
const array = new Array(10).fill(null); // 初始化长度为10的数组,所有元素为null
  1. Array.prototype.copyWithin() 在原数组内部移动或复制数组片段。
javascript 复制代码
const array = [1, 2, 3, 4, 5];
array.copyWithin(0, 3); // 结果为[4, 5, 3, 4, 5],将下标3开始的元素复制到下标0开始的位置
  1. 扩展运算符 ... 用于合并数组、解构赋值和克隆数组等操作。
javascript 复制代码
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // 合并两个数组
const clonedArray = [...originalArray]; // 浅拷贝数组
  1. 迭代方法: keys(), values(), entries() 用于遍历数组,并可与for...of循环一起使用。
javascript 复制代码
for (const value of ['a', 'b', 'c'].values()) {
 console.log(value);
}
  1. Array.prototype.map() 用于生成一个新的数组,其中的元素是原数组元素经过某种处理的结果。
javascript 复制代码
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]
  1. Array.prototype.filter() 根据提供的回调函数过滤数组元素,返回符合要求的新数组。
javascript 复制代码
const evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0); // [2, 4]
  1. Array.prototype.reduce()reduceRight() 对数组元素进行累积操作,如求和、计算平均值、聚合数据等。
javascript 复制代码
const sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0); // 10

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduceRight((previousValue, currentValue) => previousValue + currentValue);
console.log(sum); // 输出:15

// 在这个例子中,reduceRight() 从数组的最右侧(也就是索引为 4 的元素 5 开始)逐个向左累加数组中的每个元素,最终得到数组元素的总和。

// 此外,reduceRight() 还可用于数组的各种其他归约操作,比如拼接字符串、构建对象、找出最大值或最小值等。
  1. Array.prototype.flat()flatMap(): 用于扁平化嵌套数组,flatMap()同时进行映射和扁平化操作。
javascript 复制代码
const nested = [1, [2, [3]]];
const flattened = nested.flat(Infinity); // [1, 2, 3]

const mappedAndFlattened = [1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

写在最后

以上这些方法不仅丰富了JavaScript对数组的操作,而且使编写更高效、更易读的代码成为可能。随着ES6及后续版本的推出,还引入了更多高级数组方法和优化,进一步提升了开发体验。

喜欢的话帮忙点个赞 + 关注吧,将持续更新 JavaScript 相关的文章,还可以关注我的公众号 梁三石FE ,感谢您的关注~

相关推荐
永乐春秋25 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿26 分钟前
【前端】CSS
前端·css
ggdpzhk28 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app