JS数组循环遍历常用方法总结

1. for 循环

for 循环在JavaScript 刚萌生的时候就出现了，for循环是使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。for循环没有返回值。

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

2. forEach 循环

遍历数组中的每一项，没有返回值，对原数组没有影响，但不支持IE

arr.forEach((value, index, array) => {
	// 参数一是: 数组元素
	// 参数二是: 数组元素的索引
	// 参数三是：当前的数组
})

3. filter 数组过滤

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。

注意：它不会改变原始数组，但是直接返回一个新数组。

let arr = [12, 66, 4, 88, 3, 7];
let res = arr.filter((value, index, array) => {
	// 参数一是:数组元素
	// 参数二是:数组元素的索引
	// 参数三是：当前的数组
	return value >= 20;
});

console.log(res); // [66,88] 返回值是一个新数组

4. map 循环

map() 的回调函数中支持 return 返回值，相当于把数组中的每一项改变，但并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了

let arr = [12,23,24,42,1]; 
let res = arr.map((item, index, ary) => { 
    return item*10; 
}) 
console.log(res); // [120,230,240,420,10];  原数组拷贝了一份，并进行了修改
console.log(ary); // [12,23,24,42,1]；  原数组并未发生变化

5. some 循环

some() 是查找数组中是否有满足条件的元素，返回值是布尔值，如果查找到这个元素，就返回 true(有任意一项符合条件即返回true) , 如果查找不到就返回 false。

如果查询数组中唯一的元素，用 some 方法更合适，在 some 里面遇到 return true 就是终止遍历，迭代效率更高。

let arr = [10, 30, 4];
let flag = arr.some((value, index, array) => {
	return value < 3;
});

console.log(flag); // false 返回值是布尔值，只要查找到满足条件的一个元素就立马终止循环

6. every 循环

every() 是对数组中的每一项运行给定函数，只有当该函数对每一项返回true，才返回true，否则返回false。

let arr = [1, 2, 3, 4, 5, 6];
let flag = arr.every((value, index, array) => {
	return value > 3;
});

console.log(flag); // false

7. for of 循环

for-of 循环是ES6新增特性，for-of 的功能不仅仅用于遍历数组，它还可以 遍历字符串、遍历类数组对象、支持 Map 和 Set 对象遍历。

let arr = [1, 2, 3, 4];
for (let item in arr) {
    console.log(item) // 遍历每个元素 1 2 3 4
}

8. find

find() 方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

let ary = [{
	id: 1,
	name:'张三'
}, {
	id: 2,
	name:'李四'
}];

let res = ary.find((item, index) => item.id === 2); 
console.log(res) // {id:2,name:'李四'}
// 找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

9. findIndex

findIndex() 用于找出第一个符合条件的数组成员的位置，如果没有找到返回 -1。

对于数组中的每个元素，findIndex方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。注意：findIndex不会改变数组对象。

let ary = [1, 5, 10, 15];
let resIndex = ary.findIndex((value, index) => value > 9);
console.log(resIndex); // 2
// 找数组里面符合条件的值的位置（索引），注意，只会匹配第一个

---

数组原型方法还有以下这些：

join()：用指定的分隔符将数组每一项拼接为字符串，默认使用逗号作为分隔符
push()：向数组的末尾添加新元素
pop()：删除数组的最后一项
shift()：删除数组的第一项
unshift()：向数组首位添加新元素
slice()：按照条件查找出其中的部分元素
splice()：对数组进行增删改
concat()：用于连接两个或多个数组
indexOf()：检测当前值在数组中第一次出现的位置索引
lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
includes()：判断一个数组是否包含一个指定的值
sort()：对数组的元素进行排序，默认排序顺序为升序排列
reverse()：对数组进行倒序，反转数组
fill(): 方法能使用特定值填充数组中的一个或多个元素
copyWithin()：用于从数组的指定位置拷贝元素到数组的另一个指定位置中
toLocaleString()、toString()： 将数组转换为字符串
flat()、flatMap()：扁平化数组
entries() 、keys() 、values()：遍历数组