专栏首页小码农学习笔记总结 JavaScript 数组遍历的几种方式
原创

总结 JavaScript 数组遍历的几种方式

数组遍历的几种方式

方式一:原生的 for 循环

最简单的一种循环遍历方法,也是使用频率最高的一种。

let arr = [1, 2, 3, 4, 5, 6];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

有一种说法是,通过使用临时变量,将长度缓存起来,避免重复获取数组长度,这样当数组较大时能产生比较明显的优化效果,如下代码所示:

let arr = [1, 2, 3, 4, 5, 6];
for(let i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i]);
}

但我查阅了很多资料,发现这已经是一种过时的优化方案了。随着浏览器解释器的不断改进,现在不再需要手动来优化,像 Chrome 的 V8 引擎就会把能确定不变的代码移到循环外。

方式二:for...in...

这个循环用的人也很多,但是效率最低(输出的 key 是数组索引)。

let arr = ['我', '是', '谁', '我', '在', '哪'];
for(let key in arr) {
  console.log(key);
}

方式三:for...of...(ES6)

虽然性能要好于 for...in...,但仍然比不上普通的 for 循环(不能循环对象)。

let arr = ['我', '是', '谁', '我', '在', '哪'];
for(let key of arr) {
  console.log(key);
}

方式四:forEach

执行时,数组里的元素个数有几个,该方法里的回调就会执行几次。其中第一个参数是数组里的元素,第二个参数为数组里元素的索引,第三个参数则是数组自己。

该方法是数组自带的遍历方法,虽然使用频率略高,但是性能仍然比普通循环略低。

let arr = [1, 2, 3, 4, 5, 6];
arr.forEach(function (item, index, array) {
  console.log(item);
  console.log(array);
})

方式五:map

遍历每一个元素并且返回对应的元素(可以返回处理后的元素),返回的新数组和旧数组的长度是一样的

该方法使用比较广泛,但其性能还不如 forEach。

let arr = [1, 2, 3, 4, 5, 6];
let newArr = arr.map(function (item, index) {
  return item * item;
})

console.log(newArr);

方式六:filter

遍历数组,过滤出符合条件的元素并返回一个新数组。

let arr = [
  { id: 1, name: '买笔', done: true },
  { id: 2, name: '买笔记本', done: true },
  { id: 3, name: '练字', done: false }
]
    
let newArr = arr.filter(function (item, index) {
  return item.done;
})

console.log(newArr);

方式七:some

遍历数组,只要有一个以上的元素满足条件就返回 true,否则返回 false

let arr = [
  { id: 1, name: '买笔', done: true },
  { id: 2, name: '买笔记本', done: true },
  { id: 3, name: '练字', done: false }
]

let bool = arr.some(function (item, index) {
  return item.done;
})

console.log(bool);

方式八:every

遍历数组,每一个元素都满足条件 则返回 true,否则返回 false

let arr = [
  { id: 1, name: '买笔', done: true },
  { id: 2, name: '买笔记本', done: true },
  { id: 3, name: '练字', done: false }
]

let bool = arr.every(function (item, index) {
  return item.done;
})

console.log(bool);

方式九:find(ES6)

遍历数组,返回符合条件的第一个元素,如果没有符合条件的元素则返回 undefined

let arr = [1, 1, 2, 2, 3, 3, 4, 5, 6];

let num = arr.find(function (item, index) {
  return item === 3;
})

console.log(num);

方式十:findIndex(ES6)

遍历数组,返回符合条件的第一个元素的索引,如果没有符合条件的元素则返回 -1

let arr = [1, 1, 2, 2, 3, 3, 4, 5, 6];

let num = arr.findIndex(function (item) {
  return item === 3;
})

console.log(num);

方式十一:reduce、reduceRight

reduce 方法接收两个参数,第一个参数是回调函数(callback) ,第二个参数是初始值(initialValue)。

reduceRight 方法除了与 reduce 执行方向相反外(从右往左),其他完全与其一致。

回调函数接收四个参数:

  • accumulator:MDN 上解释为累计器,但我觉得不恰当,按我的理解它应该是截至当前元素,之前所有的数组元素被回调函数处理累计的结果。
  • current:当前被执行的数组元素。
  • currentIndex:当前被执行的数组元素索引。
  • sourceArray:原数组,也就是调用 reduce 方法的数组。

如果不传入初始值,reduce 方法会从索引 1 开始执行回调函数,如果传入初始值,将从索引 0 开始、并从初始值的基础上累计执行回调。

场景1:计算对象数组某一属性的总和

const list  = [
  { name: 'left', width: 20 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
];
const total = list.reduce((currentTotal, item) => {
  return currentTotal + item.width;
}, 0);
// total: 100

场景2:对象数组的去重,并统计每一项重复次数

const list  = [
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
];
const repeatTime = {};
const result = list.reduce((array, item) => {
  if (repeatTime[item.name]) {
    repeatTime[item.name]++;
    return array;
  }
  repeatTime[item.name] = 1;
  return [...array, item];
}, []);
// repeatTime: { left: 2, right: 3, center: 1 }
// result: [
//   { name: 'left', width: 20 },
//   { name: 'right', width: 10 },
//   { name: 'center', width: 70 },
// ]

场景3:对象数组最大/最小值获取

const list  = [
  { name: 'left', width: 20 },
  { name: 'right', width: 30 },
  { name: 'center', width: 70 },
  { name: 'top', width: 40 },
  { name: 'bottom', width: 20 },
];
const max = list.reduce((curItem, item) => {
  return curItem.width >= item.width ? curItem : item;
});
const min = list.reduce((curItem, item) => {
  return curItem.width <= item.width ? curItem : item;
});
// max: { name: "center", width: 70 }
// min: { name: "left", width: 20 }

总结

1. 性能对比

说了这么多,那这些遍历方法, 在性能上有什么差异呢?我们在 Chrome 浏览器中尝试。我采用每个循环执行 10 次,去除最大、最小值,取平均数,降低误差。

var list = Array(100000).fill(1)

console.time('for');
for (let index = 0, len = list.length; index < len; index++) {
}
console.timeEnd('for');
// for: 2.427642822265625 ms

console.time('every');
list.every(() => { return true })
console.timeEnd('every')
// some: 2.751708984375 ms

console.time('some');
list.some(() => { return false })
console.timeEnd('some')
// some: 2.786590576171875 ms

console.time('foreach');
list.forEach(() => {})
console.timeEnd('foreach');
// foreach: 3.126708984375 ms

console.time('map');
list.map(() => {})
console.timeEnd('map');
// map: 3.743743896484375 ms

console.time('for...of...');
for (let index of list) {
}
console.timeEnd('for...of...')
// forof: 6.33380126953125 ms

从打印结果可以看出,原生 for 循环的速度最快,for...of... 循环最慢。

2. 终止遍历的支持度、性能对比

是否可终止

<b>break</b>

<b>continue</b>

<b>return</b>

<b>性能(ms)</b>

for

终止 ✔️

跳出本次循环✔️

2.42

forEach

❌ ️

3.12

map

❌ ️

3.74

for...of...

终止 ✔️

跳出本次循环 ✔️

6.33

some

❌️

return true ✔️

2.78

every

❌️

return false ✔️

2.75

注意:不同浏览器内核会有些差异,具体情况需另行测试。


文章持续更新,本文 GitHub 前端修炼小册 已经收录,欢迎 Star。如对文章内容有不同见解,欢迎留言交流。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP数组遍历的几种常见方式总结

    conut($arr);用于统计数组元素的个数。 for循环只能用于遍历,纯索引数组!!!! 如果存在关联数组,count统计时会统计两种数组的总个数,使用...

    砸漏
  • 一文总结 JavaScript 对象遍历的几种方式

    要使用 (const i in obj) 而不是 (i in obj),因为后者将会创建一个全局变量。

    文渊同学
  • JavaScript中遍历数组的一些方法总结

    Js里面数组是很重要的一块内容,其实就是我们做项目的时候也是很重要的一种数据格式,大部分的数据都不会是一个个或者两个,那么数据多的时候一般是以数组的形式的存放的...

    何处锦绣不灰堆
  • c语言之遍历数组的几种方式

    第二种方式:数组名就是首元素的地址,因此通过数组名,使用*获取其中的值的方式来遍历。

    西西嘛呦
  • JS 中循环遍历数组方式总结

    JavaScript 中的 for 循环很古老,它在 ECMAScript 1 中就已经存在了。for 循环记录 arr 每个元素的索引和值:

    疯狂的技术宅
  • 数组的三种声明方式总结、多维数组的遍历、Arrays类的常用方法总结

    泰斗贤若如
  • Java HashMap进行遍历的几种方式

    Jerry Wang
  • python遍历数组的两种方法

    py3study
  • 盘点JavaScript中数组遍历的全部方式(上篇)

    JavaScript想必大家都不陌生了,其中的字符串和数组大家经常都会用到,今天就让我们来说说这里面的数组对象的遍历吧,因为遍历经常使用的缘故,所以小编带着大家...

    前端进阶者
  • 盘点JavaScript中数组遍历的全部方式(下篇)

    JavaScript想必大家都不陌生了,上篇文章盘点JavaScript中数组遍历的全部方式(上篇)已经给大家介绍了7种数组遍历的方式,这篇文章继续介绍7种数组...

    前端进阶者
  • 盘点JavaScript中数组遍历的全部方式(上篇)

    JavaScript想必大家都不陌生了,其中的字符串和数组大家经常都会用到,今天就让我们来说说这里面的数组对象的遍历吧,因为遍历经常使用的缘故,所以小编带着大家...

    Python进阶者
  • golang数据结构之树的三种遍历方式

    西西嘛呦
  • pandas按行按列遍历Dataframe的几种方式

    iterrows(): 按行遍历,将DataFrame的每一行迭代为(index, Series)对,可以通过row[name]对元素进行访问。 itertu...

    kirin
  • JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

    我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道...

    Fundebug
  • ES6复制拷贝数组,对象,json的几种方式总结

    数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。

    用户2323866
  • JavaScript中Array数组的几种方法

    涉及到数组的问题,以前基本上我们都是采用for循环的方法来进行遍历,后来在ES5中新增了几种方法来方便我们遍历。这几种方法分别为:forEach(js v1.6...

    OECOM
  • python遍历数组的两种方法的代码

    工作过程中,把开发过程中较好的一些内容段备份一下,下面内容是关于python遍历数组的两种方法的内容,希望对小伙伴有用途。

    py3study
  • JS中轻松遍历对象属性的几种方式

    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一...

    前端小智@大迁世界
  • Spark实现WordCount的几种方式总结

    大数据真好玩

扫码关注云+社区

领取腾讯云代金券