Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js中对数组进行遍历都有哪些方法_js遍历json对象

js中对数组进行遍历都有哪些方法_js遍历json对象

作者头像
全栈程序员站长
发布于 2022-11-01 02:35:05
发布于 2022-11-01 02:35:05
8.8K0
举报

遍历有如下几种方式

数组方法

map

forEach

filter

find

findIndex

every

some

reduce

reduceRight

其他方法

for

for in

for of

数组方法

map

核心

创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

不改变原数组

返回值是一个新的数组

let testArr = [‘子项0′,’子项1′,’子项2’];

let resultArr= testArr.map((item, index) =>{return`处理·${item}`

});

console.log(resultArr);//结果: [“处理·子项0”, “处理·子项1”, “处理·子项2”]

缺陷

可以使用return,但是不能使用break和continue

forEach

核心

对数组的每个元素执行一次提供的函数。

总是返回undefined。

不改变原数组

let testArr = [‘子项0′,’子项1′,’子项2’];

testArr.forEach((item, index)=>{return`forEach处理${item}`

});

缺陷

可以使用return,但是不能使用break和continue

filter

核心

对数组的每一项都进行过滤,返回符合条件的item组成的数组

不会改变原数组

let filterArr = [‘子项0′,’子项1′,’子项2’];

let filterResult= filterArr.filter((item, index) =>{return item === ‘子项0’;

});

console.log(filterArr);//[“子项0”, “子项1”, “子项2”]

console.log(filterResult); [“子项0”]

缺陷

可以使用return,但是不能使用break和continue

find

核心

遍历数组,找到第一个符合条件的项,并返回该项。否则返回undefined

不会改变数组

let findArr = [‘子项0′,’子项1′,’子项2’]

let findResult= findArr.find((item, index) =>{return item === ‘子项0’;

});

console.log(findResult);//结果为: 子项0

缺陷

可以使用return,但是不能使用break和continue

findIndex

核心

遍历数组找到第一个符合条件的项,并返回该项的索引值。否则返回-1。

不会改变数组对象。

let findIndexArr = [‘子项0′,’子项1′,’子项2’];

let findIndexResult= findIndexArr.findIndex((item, index)=>{return item === ‘子项0’;

});

console.log(findIndexResult);//结果为: true

缺陷

可以使用return,但是不能使用break和continue

every

核心

对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。简单说就是看数组的每个元素是否符合要求,都符合则返回true,否则返回false

let everyArr = [2,3,4];

let everyResult= everyArr.every((item, index)=>{return item > 0});

console.log(everyResult);//结果为: true

缺陷

可以使用return,但是不能使用break和continue

some

是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。

let someArr = [2,3,4];

let someResult= someArr.some((item, index)=>{return item > 3});

console.log(someResult);//结果为: true

缺陷

可以使用return,但是不能使用break和continue

reduce

接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

第二个参数作为第一次调用的a的值

//reducer

let reduceArr = [0,1,2,3,4]

let reduceResult= reduceArr.reduce((a, b)=>{return a +b;

});

console.log(reduceResult);//结果: 10

缺陷

可以使用return,但是不能使用break和continue

reduceRight

和reduce一样是累加器,不过是从右往左计算

第二个参数作为第一次调用的a的值

let reduceRightArr = [0,1,2,3,4]

let reduceRightResult= reduceRightArr.reduceRight((a, b)=>{return a +b;

});

console.log(reduceRightResult);//结果: 10

缺陷

可以使用return,但是不能使用break和continue

其他方法

for循环

核心

使用临时变量,并且遍历的是key.

let testArr = [‘子项0′,’子项1′,’子项2’];for(var i = 0; a < testArr.length; i++){

console.log(testArr[i]);

}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = [‘子项0′,’子项1′,’子项2’];//break

for(var i = 0; i < testArr.length; i++) {if(i === 1) {break;

}

console.log(testArr[i]);

}//结果为: 子项0

//continue

for(var i = 0; i < testArr.length; i++) {if(i === 1) {continue;

}

console.log(testArr[i]);

}//结果为: 子项0 子项目2

//return

for(var i = 0; i < testArr.length; i++) {if(i === 1) {return;

}

console.log(testArr[i]);

}//结果为什么也没有

for in循环

核心

遍历的是key

let testArr = [‘子项0′,’子项1′,’子项2’];for(let i intestArr){

console.log(testArr[i])

}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = [‘子项0′,’子项1′,’子项2’];//break

for(let i intestArr){if(i === 1) {break;

}

console.log(testArr[i]);

}//结果为: 子项0

//continue

for(let i intestArr){if(i === 1) {continue;

}

console.log(testArr[i]);

}//结果为: 子项0 子项目2

//return

for(let i intestArr){if(i === 1) {return;

}

console.log(testArr[i]);

}//结果为什么也没有

for of循环

核心

遍历的是value

let testArr = [‘子项0′,’子项1′,’子项2’];for(let i of testArr) {

console.log(i);

}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = [‘子项0′,’子项1′,’子项2’];//break

for(let value of testArr){if(value === ‘子项1’){break;

}

console.log(value);

}//结果为: 子项0

//continue

for(let value of testArr){if(value === ‘子项1’){continue;

}

console.log(value);

}//结果为: 子项0 子项目2

//return

for(let value of testArr){if(value === ‘子项1’){return;

}

console.log(value);

}//结果为什么也没有

注意⚠️

数组方法都不可以用break和continue,for循环之类的不可以用return但是可以正常使用break和continue

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/179411.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES6之数组扩展
1. Es5中的一些数组方法。 1. for循环。 2. forEach:无返回值,break和container会报错。 3. map:返回一个New Array,根据function对于每一项格式化。 4. filter:返回符合条件的数组。 5. some:数组中有一个为true返回true。 6. every:数组中所有满足条件,返回true。 7. reduce:累加执行,具体参数可以参照MDN。 8. for in
19组清风
2021/11/15
2890
JS数组奇巧淫技
前段时间接手一个项目,逻辑晦涩难懂,代码庞大冗余,上手极其困难。很大的原因就是数组方法使用不熟练,导致写出了很多垃圾代码,其实很多地方稍加改动就可以变得简单高效又优雅。因此我在这里总结下数组的常用方法和奇巧淫技(奇巧淫技主要是reduce~)。
刘小夕
2020/07/15
1.2K0
JS数组奇巧淫技
原生 JavaScript 手写数组 API
本文将会先了解数组 API 的用法再模拟实现这些 API ,如果各位大佬觉得有什么不对的地方麻烦指点以下!
小丞同学
2021/08/16
8380
数组的遍历你都会用了,那Promise版本的呢
当然,有些严格来讲并不能算是遍历,比如说some,every这些的。 但确实,这些都会根据我们数组的元素来进行多次的调用传入的回调。
贾顺名
2019/12/09
7980
数组的遍历你都会用了,那Promise版本的呢
数组的遍历你都会用了,那Promise版本的呢 这里指的遍历方法包括:map、reduce、reduceRight、forEach、filter、some、every 因为最近要进行了一些数据汇总,node版本已经是8.11.1了,所以直接写了个async/await的脚本。 但是在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。 当然,有些严格来讲并不能算是遍历,比如说some,every这些的。 但确
贾顺名
2018/06/01
1.3K0
22个超详细的 JS 数组方法
https://juejin.cn/post/6907109642917117965
前端达人
2021/01/27
4.1K0
19个JavaScript数组常用方法总结
数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会
@超人
2021/03/18
3570
19个JavaScript数组常用方法总结
前端学习(40)~js学习(十七):数组的常见方法&数组的遍历
unshift():在数组最前面插入一个或多个元素,返回结果为该数组新的长度。插入元素后,其他元素的索引会依次调整。
Vincent-yuan
2020/03/19
1.9K0
Javascript Array常见方法说明
不嫌弃包的大小的话,可以使用underscorejs 或者 lodash 更加好用。。。。
javascript.shop
2019/09/05
8420
Javascript Array常见方法说明
js数组方法详解(最新最全)
数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响。本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流
寻找石头鱼
2019/08/20
2.7K0
Array类型
Array也是ECMAScript中常用类型之一,其特点是数组中的每一项都可以保存任何类型的数据,数组的大小可以动态调整。
河岸飞流
2019/08/09
8340
JavaScript数组方法和es6数组方法
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/132980.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/28
7130
JavaScript数组方法和es6数组方法
js数组常用方法详解
concat()方法可以在现有数组全部元素基础上创建一个新数组,它首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组。如果传入一个或多个数组,则 concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组,则直接把它们添加到结果数组末尾:
IT工作者
2022/05/12
1.6K0
Javascript数组系列二之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 《Javascript数组系列二之迭代方法1》 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们的开发效率以及数据的处理。接下来我们继续来讲解其他的一些迭代的方法。
六小登登
2022/05/10
5800
Javascript数组系列二之迭代方法2
分享一些常用的 JS 基础面试题
此篇属于前端算法入门系列的第一篇,主要介绍常用的数组方法、字符串方法、遍历方法、高阶函数、正则表达式以及相关数学知识。
前端达人
2022/06/09
7580
数组遍历
之前讲了一些数组的方法,今天整理一下数组的遍历方法,有些方法不会用到,但是了解一下也是好的。
wade
2020/04/23
1.5K0
JS常用的循环遍历你会几种?
? 这是第 100 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~ 本文首发于政采云前端团队博客:JS常用的循环遍历你会几种 https://www.zoo.team/
政采云前端团队
2021/06/15
2.4K0
JS常用的循环遍历你会几种?
Javascript数组方法(ES5-ES6)
join(speparator):将数组的元素组起一个字符串,spearator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数,即分隔符。
用户9298250
2021/12/29
1.1K0
js 数组详细操作方法及解析
目的:Array.of() 出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题。
kif
2023/02/27
1.4K0
JavaScript中的数组方法总结+详解「建议收藏」
功能: 在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)
全栈程序员站长
2022/09/14
1.5K0
JavaScript中的数组方法总结+详解「建议收藏」
相关推荐
ES6之数组扩展
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档