Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >数组遍历

数组遍历

作者头像
wade
发布于 2020-04-23 09:21:58
发布于 2020-04-23 09:21:58
1.3K00
代码可运行
举报
文章被收录于专栏:coding个人笔记coding个人笔记
运行总次数:0
代码可运行

之前讲了一些数组的方法,今天整理一下数组的遍历方法,有些方法不会用到,但是了解一下也是好的。

我们最常用的循环遍历方法是for循环,这个是最基础的,就不附上代码了,不过说一点,倒叙循环在性能上能优化一点点,不清楚的可以去看性能优化知识点,里面有提到。

for in,很少用到的一个遍历方法,也不推荐:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = ['a', 1, 2, 3];
arr.len = 'len';
for(var i in arr){
    console.log(i + 5);
    console.log(arr[i]);
};

因为for in 会把原型上的东西也遍历出来,然后数组下标i是字符串,在进行加操作的时候会按字符串走,还有就是循环的顺序不是一定的。一般用来循环json。

forEach方法,也比较常用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = ['a', 1, 2, 3];
arr.forEach(function (item, index, arr) {
  console.log(item);
  console.log(index);
  console.log(arr);
});

传入一个方法参数,这个方法有三个参数,分别是当前元素,下标和循环数组。也不推荐用来循环数组,因为基于循环的迭代性能是基于方法迭代的8倍。

map方法,这个方法会返回一个数组

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = ['a', 1, 2, 3];
var newArr = arr.map(function (item, index, arr) {
  console.log(item);
  console.log(index);
  console.log(arr);
  return item + 5;
});
console.log(newArr); //["a5", 6, 7, 8]

跟forEach一样,传入一个方法,这个方法有三个参数,分别是当前元素,下标和循环数组,不同的是这个方法会返回一个数组,数组的元素就是每一次循环return回去的数据,没有返回就会默认是undefined。

enery和some,很不常用的方法,我认为属性这些方法,有助于编写业务代码时候性能的优化。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [5, 7, 3, 8];
var flag = arr.some(function (item, index, arr) {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item > 5;
});
console.log(flag);  //true
var arr = [5, 7, 3, 8];
var flag = arr.every(function (item, index, arr) {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item > 5;
});
console.log(flag); //false

跟map和forEach一样,一个方法和三个参数,some只要有一个条件是true就直接返回true,之后的不会再判断执行,every则是判断只要有一个条件是false就会返回false,false之后的也不再判断执行,所有条件都为true才返回true。

filter,一个过滤的方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [5, 7, 3, 8];
var newArr= arr.filter(function (item, index, arr) {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item > 5;
});
console.log(newArr); //[7, 8]

也是传入一个方法,方法三个参数,这个方法返回一个数组,在判断为true才会返回。

reduce和reduceRight,这两个方法是真的不常用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [5, 7, 3, 8];
var sum = arr.reduce(function (prev, cur, index, array) {
    console.log(prev);
    console.log(cur);
    console.log(index);
    console.log(array);
    return prev + cur;
});
console.log(sum); //23

两个方法一个从左开始一个从右边开始,方法参数里面有四个参数,这四个参数比较特别,因为这个循环之会执行数组长度减1,我建议可以自己看打印输出的结果。一般这两个方法用来计算总和。

for of,跟for in类似:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = ['a', 1, 2, 3];
arr.len = 'len';
for(var item of arr){
    console.log(item);
};

跟for in不同的是,遍历出来的就是元素,没有下标,也不会把原型上的遍历出来,用来遍历json。

find、findIndex两个方法是forEach和some结合体,当return之后,剩下的不会再执行,只不过findIndex返回的是元素下标,find是返回元素。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Includes:
var arr = ['a', 1, 2, 3];
console.log(arr.includes(2)); //true
console.log(arr.includes(9)); //false

判断是否有这个数据,有返回true,没有返回false。

Es6新增数组去重方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [1, 8, 9, 7, 7, 6, 1];
var newArr1 = new Set(arr);
var newArr2 = Array.from(newArr1);
console.log(newArr1);
console.log(newArr2);

数组方法真的很多,大概我就整理这一些就很够用了,另外的就不去整理了。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-08-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS数组奇巧淫技
前段时间接手一个项目,逻辑晦涩难懂,代码庞大冗余,上手极其困难。很大的原因就是数组方法使用不熟练,导致写出了很多垃圾代码,其实很多地方稍加改动就可以变得简单高效又优雅。因此我在这里总结下数组的常用方法和奇巧淫技(奇巧淫技主要是reduce~)。
刘小夕
2020/07/15
1.1K0
JS数组奇巧淫技
JS数组遍历的几种方法
    最简单的一种循环遍历方法,也是使用频率最高的一种,可优化     循环过程中支持修改索引(修改 i)
全栈程序员站长
2022/09/14
2K0
JavaScript中的数组方法总结+详解「建议收藏」
功能: 在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)
全栈程序员站长
2022/09/14
1.4K0
JavaScript中的数组方法总结+详解「建议收藏」
盘盘项目中你常用到的数组API
数组在业务中是一个非常高频的API,在业务中基本都有用它,必不可少,本文是笔者一篇关于数组常用API的总结,希望看完在项目中有所帮助。
Maic
2022/12/21
5650
盘盘项目中你常用到的数组API
常用的数组高阶函数
FGGIT
2024/10/15
930
JavaScript 数组去重
解决方案有很多,可以是两个 for 循环,或者一个 for 和 一个 filter,一个 filter 和 一个 every,接下来介绍这几种方法:
Krry
2018/10/12
1.4K0
JavaScript 数组去重
ES6 数组方法归纳整理
Array.from() 可接收三个参数,第一个参数为类数组对象,第二个参数为映射函数,如果使用了映射函数,可以传第三个参数表示映射函数的this值。
全栈程序员站长
2022/06/27
5940
js数组常用方法「建议收藏」
请注意,上面的代码没有按照数值的大小对数字进行排序,是按照字符编码的顺序进行排序,要实现这一点,就必须使用一个排序函数:
全栈程序员站长
2022/08/30
2.4K0
js数组遍历十种方法
遍历数组,只要有一个以上的元素满足条件就返回 true,否则返回 false ,退出循环
全栈程序员站长
2022/11/10
4.3K0
js数组遍历十种方法
常见的数组基本用法
ES5方法:pop push shift unshift reverse sort splice
前端迷
2021/04/09
9260
JS数组常用方法大全
join(separator): 将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。
青梅煮码
2023/01/14
3K0
js 判断数组中是否包含某个元素(转载)「建议收藏」
来源:https://www.cnblogs.com/yunshangwuyou/p/10539090.html
全栈程序员站长
2022/11/04
18.4K0
js 判断数组中是否包含某个元素(转载)「建议收藏」
for 循环 和 Array 数组对象
- forEach 不支持 return 和 break,一定会把所有数据遍历完毕
Krry
2018/09/10
2.3K0
JavaScript专题(二)数组去重,会就要会的理直气壮
如果数组中有NaN,你又正好需要判断数组是否有存在NaN,这时你使用indexOf是无法判断的,你必须使用includes这个方法。
全栈程序员站长
2022/07/04
3910
徒手实现24+数组方法,谁说你只是“会用”数组?
「数组是我们日常工作中用的最频繁的一类数据结构,能帮助我们解决许多问题,而其本身也包含接近33个之多的方法,做了一个脑图分类如下,熟练使用数组的你,是否想知道他们内部的实现原理呢?」
前端胖头鱼
2022/07/24
6720
徒手实现24+数组方法,谁说你只是“会用”数组?
Js遍历数组总结
Array.prototype.forEach() arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) callback 为数组中每个元素执行的函数,该函数接收一至三个参数 currentValue 数组中正在处理的当前元素 index 可选 数组中正在处理的当前元素的索引 array 可选 正在操作的数组 thisArg 可选 当执行回调函数callback时,用作this的值 注意如果使用箭头函数表达式来传入callback,thisArg参数会被忽略,因为箭头函数在词法上绑定了this值 注意如果想在遍历执行完之前结束遍历,那么forEach与map并不是好的选择
WindRunnerMax
2020/08/27
4.3K0
es6数组和对象常用方法
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/140977.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/01
3380
js数组常用方法详解
concat()方法可以在现有数组全部元素基础上创建一个新数组,它首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组。如果传入一个或多个数组,则 concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组,则直接把它们添加到结果数组末尾:
IT工作者
2022/05/12
1.5K0
22个超详细的 JS 数组方法
https://juejin.cn/post/6907109642917117965
前端达人
2021/01/27
3.3K0
原生 JavaScript 手写数组 API
本文将会先了解数组 API 的用法再模拟实现这些 API ,如果各位大佬觉得有什么不对的地方麻烦指点以下!
小丞同学
2021/08/16
7650
相关推荐
JS数组奇巧淫技
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验