js数组循环常用的几种方法

前端开发中,经常要用到循环,保存一份,后面慢慢补充。

js数组循环常用的几种方法:。

1、for循环

最基本的循环方式,也是速度比较快,效率比较高的循环方式,

javascript 复制代码
var arr = [1,2,3,4,5];
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

2、forEach循环

历数组中的每一项,没有返回值,对原数组没有影响,不支持IE,break无法跳出循环,retrun只能跳出当前循环,无法终止循环。

javascript 复制代码
var arr = [1,2,3,4,5];
arr.forEach(function (item, index, array) {
	// item数组中的当前项, index当前项的索引, array原始数组;
	console.log(item);
})

3、map循环

有返回值,支持return返回值,把每一次循环return返回的值组成一个新的数组,对原数组没有影响。

javascript 复制代码
var arr = [1,2,3,4,5];
var newArr = arr.map(function (item, index, array) {
	return item * 10;
})
console.log(arr); // [1,2,3,4,5]
console.log(newArr); // [10,20,30,40,50]

4、for of循环

ES6新增的循环方法,没有索引,它可以正确响应break、continue和return语句,而且,这个方法避开了for-in循环的所有缺陷。for-in循环虽然可以循环数组,但是会有好多坑,它主要用于循环对象,今天我总结的是数组的循环,就把for-in排除在外了。

javascript 复制代码
var arr = [1,2,3,4,5];
for (var item of arr) {
	// item指的的就是数组每一项的值
	console.log(item);
}

5、filter循环

返回新数组,不会改变原数组,新数组由符合条件的数组组成。

javascript 复制代码
var arr = [1,2,3,4,5];
var newArr = arr.filter(function (item) {
	return item > 3;
})
console.log(arr); // [1,2,3,4,5]
console.log(newArr); // [4,5]

6、every循环

给数组每一项都运行一个函数,如果每一项都符合条件,就返回true,否则返回false。

javascript 复制代码
var arr = [1,2,3,4,5];
var result1 = arr.every(function (item, index, array) {
	return item > 3;
});
var result2 = arr.every(function (item, index, array) {
	return item > 0;
})
console.log(result1); // false
console.log(result2); // true

7、some循环

给数组每一项都运行一个函数,同every相反,只要有一项符合条件,就跳出循环,返回true,否则返回false。

javascript 复制代码
var arr = [1,2,3,4,5];
var result1 = arr.some(function (item, index, array) {
	return item > 4;
});
var result2 = arr.some(function (item, index, array) {
	return item > 5;
})
console.log(result1); // true
console.log(result2); // false

8、find循环

给数组每一项都运行一个函数,只要有一项符合条件,就跳出循环,返回第一个符合条件的元素,否则返回undefined。

javascript 复制代码
var arr = [1,2,3,4,5];
var result1 = arr.find(function (item) {
	return item > 3;
});
console.log(result1); // 4

还有其他的方法,欢迎大家补充。

相关推荐
用户39051332192882 分钟前
JS判断空值只知道“||”?不如来试试这个操作符
前端·javascript
海云前端13 分钟前
前端面试必问 asyncawait 到底要不要加 trycatch 90% 人踩坑 求职加分技巧揭秘
前端
毕设源码-钟学长12 分钟前
【开题答辩全过程】以 基于Python的车辆管理系统为例,包含答辩的问题和答案
开发语言·python
CCPC不拿奖不改名32 分钟前
数据处理与分析:数据可视化的面试习题
开发语言·python·信息可视化·面试·职场和发展
液态不合群34 分钟前
线程池和高并发
开发语言·python
小镇学者34 分钟前
【c++】C++字符串删除末尾字符的三种实现方法
java·开发语言·c++
SmartRadio1 小时前
在CH585M代码中如何精细化配置PMU(电源管理单元)和RAM保留
linux·c语言·开发语言·人工智能·单片机·嵌入式硬件·lora
wuk9981 小时前
梁非线性动力学方程MATLAB编程实现
前端·javascript·matlab
XiaoYu20021 小时前
第11章 LangChain
前端·javascript·langchain
智慧地球(AI·Earth)1 小时前
Codex配置问题解析:wire_api格式不匹配导致的“Reconnecting...”循环
开发语言·人工智能·vscode·codex·claude code