前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Js遍历数组总结

Js遍历数组总结

作者头像
WindRunnerMax
发布于 2020-08-27 02:20:41
发布于 2020-08-27 02:20:41
4.3K00
代码可运行
举报
文章被收录于专栏:Czy‘s BlogCzy‘s Blog
运行总次数:0
代码可运行

Js遍历数组总结

遍历数组的主要方法为forforEachmapfor infor of

for

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [1,2,3,4,5];
var n = arr.length; // 直接取长度,避免每次循环都读取arr对象的属性
for(let i=0; i<n; ++i ){
    console.log(arr[i]);
}
// 1 2 3 4 5

//循环体也可以这么写
for(let i=0, len=arr.length; i<len; ++i ){
    console.log(arr[i]);
}
// 1 2 3 4 5

forEach

Array.prototype.forEach() arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) callback 为数组中每个元素执行的函数,该函数接收一至三个参数 currentValue 数组中正在处理的当前元素 index 可选 数组中正在处理的当前元素的索引 array 可选 正在操作的数组 thisArg 可选 当执行回调函数callback时,用作this的值 注意如果使用箭头函数表达式来传入callbackthisArg参数会被忽略,因为箭头函数在词法上绑定了this值 注意如果想在遍历执行完之前结束遍历,那么forEachmap并不是好的选择

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [1,2,3,4,5];
var obj = { a: 1 }; // 定义obj为了演示this用
arr.forEach( function(currentValue,index,array) {
    console.log("当前值",currentValue);
    console.log("当前值索引",index);
    console.log("当前处理数组",array);
    console.log("当前this指向",this);
    console.log("结束一次回调,无需返回值");
    console.log("");
},obj);
/*
    当前值 1
    当前值索引 0
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    结束一次回调,无需返回值
    
    当前值 2
    当前值索引 1
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    结束一次回调,无需返回值
    
    ...........
*/
// forEach使用频率较高,但是性能不如普通for循环

map

Array.prototype.map() arr.map(callback(currentValue [, index [, array]])[, thisArg]) callback 为数组中每个元素执行的函数,该函数接收一至三个参数 currentValue 数组中正在处理的当前元素 index 可选 数组中正在处理的当前元素的索引 array 可选 正在操作的数组 thisArg 可选 当执行回调函数callback时,用作this的值 注意如果使用箭头函数表达式来传入callbackthisArg参数会被忽略,因为箭头函数在词法上绑定了this值 注意map回调函数return的结果组成了新数组的每一个元素,原数组被映射成对应新数组

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [1,2,3,4,5];
var obj = { a: 1 }; // 定义obj为了演示this用
var newArr = arr.map( function(currentValue,index,array) {
    console.log("当前值",currentValue);
    console.log("当前值索引",index);
    console.log("当前处理数组",array);
    console.log("当前this指向",this);
    console.log("");
    return currentValue + 10; // 将arr值加10返回成为新数组
},obj);
console.log(newArr); // [11, 12, 13, 14, 15]
/*
    当前值 1
    当前值索引 0
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    
    当前值 2
    当前值索引 1
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    
    ...........
*/
//这种方式也是用的比较广泛的,但性能不如forEach

for in

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 此方法遍历数组效率非常低,主要是用来循环遍历对象的属性

// 遍历数组
var arr = [1,2,3,4,5];
for(item in arr){
    console.log(arr[item]);
}
// 1 2 3 4 5
// 数组遍历时需注意,数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。
// 不能保证for ... in将以任何特定的顺序返回索引。
// for ... in循环语句将返回所有可枚举属性,包括非整数类型的名称和继承的那些。
// 因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。
// 因此当迭代访问顺序很重要的数组时,最好用整数索引去进行for循环

// 遍历对象
var obj = {a:1,b:2};
for(item in obj){
    console.log(obj[item]);
}
// 1 2
// for ... in是为遍历对象属性而构建的

for of

for ofES6新增,其在可迭代对象包括ArrayMapSetString``TypedArrayarguments对象等等上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [1,2,3,4,5];
for (let value of arr) {
    console.log(value);
}
// 1 2 3 4 5

operate

Array.prototype还提供了对于数组的判断与过滤操作,every()some()find()findIndex()filter()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var arr = [1,2,3,4,5];

// arr.everymap(callback(currentValue [, index [, array]])[, thisArg])
// every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
console.log(arr.every( (currentValue ) => {
    return currentValue > 1;
})) // false

console.log(arr.every( (currentValue ) => {
    return currentValue > 0;
})) // true

// arr.some(callback(element[, index[, array]])[, thisArg])
// some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
console.log(arr.some( (currentValue ) => {
    return currentValue > 1;
})) // true

console.log(arr.some( (currentValue ) => {
    return currentValue > 6;
})) // false

// arr.find(callback(element[, index[, array]])[, thisArg])
// find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
console.log(arr.find( (currentValue ) => {
    return currentValue > 2;
})) // 3

console.log(arr.find( (currentValue ) => {
    return currentValue > 6;
})) // undefined

// arr.findIndex(callback(element[, index[, array]])[, thisArg])
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。
console.log(arr.findIndex( (currentValue ) => {
    return currentValue > 2;
})) // 2

console.log(arr.findIndex( (currentValue ) => {
    return currentValue > 6;
})) // -1

// arr.filter(callback(element[, index[, array]])[, thisArg])
// filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
console.log(arr.filter( (currentValue ) => {
    return currentValue > 2;
})) // [3, 4, 5]

参考

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://blog.csdn.net/function__/article/details/79555301
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Js数组操作
JavaScript数组操作,主要包括Array对象原型方法以及常用操作如去重、扁平化、排序等。
WindRunnerMax
2020/08/27
16.9K0
Js中Array对象
JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。
WindRunnerMax
2020/10/26
9.9K0
js数组遍历十种方法
遍历数组,只要有一个以上的元素满足条件就返回 true,否则返回 false ,退出循环
全栈程序员站长
2022/11/10
4.3K0
js数组遍历十种方法
ES6中Array数组你应该知道的操作
上一次我们讲解了JavaScript的Array,了解了很多关于Array的属性,方法等。相信大家收益颇多,今天为大家带来更深次的了解,希望您可以学习更多。如果您还没有了解上一课程,请点击:你对JavaScript的Array对象了解有多少? 下方的代码都通过ES6语法,所以您需要先熟悉它。下面我们直奔主题。
Javanx
2019/09/04
5800
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。
程序员海军
2022/02/15
8010
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
js数组笔记
数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始)。整个数组用方括号表示,数组的值用','分割;数组的数据可以是任何类型。
bamboo
2019/01/29
11.8K0
js数组笔记
最全 JavaScript Array 方法 详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 Coder 对 Array 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。 小编,在最近开发中就遇到了 Array 问题, 在处理复杂的业务需求时,没想到Array 有类似的方法,然后将方法 组合起来解决当下问题。
程序员海军
2021/10/11
1.1K0
最全 JavaScript Array 方法 详解
java遍历数组的各种方法_遍历数组的常用方法「建议收藏」
1 var arr = [“first”,”second”,”third”,”fourth”,3,5,8];2 for(var i = 0; i < arr.length;i++){3 console.log(arr[i]);4 }5 //输出:
全栈程序员站长
2022/09/29
9710
常用的数组高阶函数
FGGIT
2024/10/15
960
JS数组遍历的几种方法
    最简单的一种循环遍历方法,也是使用频率最高的一种,可优化     循环过程中支持修改索引(修改 i)
全栈程序员站长
2022/09/14
2K0
js数组常用方法「建议收藏」
请注意,上面的代码没有按照数值的大小对数字进行排序,是按照字符编码的顺序进行排序,要实现这一点,就必须使用一个排序函数:
全栈程序员站长
2022/08/30
2.4K0
常见的数组基本用法
ES5方法:pop push shift unshift reverse sort splice
前端迷
2021/04/09
9270
js 数组详细操作方法及解析
目的:Array.of() 出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题。
kif
2023/02/27
1.3K0
ES6数组新方法[通俗易懂]
forEach()会修改原来的数组,不会返回执行结果。map()方法会得到一个新的数组并返回。 map的执行速度会更快。
全栈程序员站长
2022/09/05
4420
js中map遍历数组对象_js遍历数组
相同点:       1.都是循环遍历数组中的每一项;       2.在遍历中执行匿名函数都可以接收三个参数,分别为:遍历过程的每一项、遍历序号(索引值)、原数组;       3.执行的匿名函数中 的this都指向window。 不同点:       map():       根据遍历执行的匿名函数,对于原数组中的每个值产生一个对应的值,并返回一个新的数组,存在一个映射关系,并且不会改变原数组,不会对空数组进行检测。
全栈程序员站长
2022/10/02
19.7K0
9102年了,Array数组的方法赶紧用起来!
写久了业务代码的我,已经要被社会抛弃了。今天回过头去巩固基础知识,发现有很多自己业务中不经常用,或者说是不知道那个方法,导致自己重写一个方法去实现。关于Array对象的方法你是否只用concat、join、pop、push、shift、unshift、reverse、sort、slice、splice、toString、indexOf、find等?接下来我们就一起回顾一下那些我们用的少或者没有用过的Array对象方法!
拾贰
2019/08/28
4140
9102年了,Array数组的方法赶紧用起来!
es6数组处理方法整理
若有重复的,则返回第一个查到的索引值若不存在,则返回 -1 .lastIndexOf(),倒着查
全栈程序员站长
2022/09/01
2090
JS数组奇巧淫技
前段时间接手一个项目,逻辑晦涩难懂,代码庞大冗余,上手极其困难。很大的原因就是数组方法使用不熟练,导致写出了很多垃圾代码,其实很多地方稍加改动就可以变得简单高效又优雅。因此我在这里总结下数组的常用方法和奇巧淫技(奇巧淫技主要是reduce~)。
刘小夕
2020/07/15
1.1K0
JS数组奇巧淫技
22个超详细的 JS 数组方法
https://juejin.cn/post/6907109642917117965
前端达人
2021/01/27
3.4K0
JavaScript的数组常规操作
在JavaScript中,数组必须使用数字索引,对象可以使用命名索引。 数组是特殊类型的对象,具有特有的一些属性和方法。
青梅煮码
2023/01/31
1.5K0
相关推荐
Js数组操作
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验