跟进 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 ,感谢您的关注~

相关推荐
待磨的钝刨38 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端