​​​

目录

一、for 循环遍历

二、for ... of 方法

三、for...in循环

四、forEach 遍历

五、map 映射

六、filter方法

七、reduce高阶函数（迭代（累加器））

八、every

九、some

十、find

---

一、for 循环遍历

for循环是最基本也是最常用的数组遍历方法之一,可以使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。它使用一个计数器变量来迭代数组元素，通常形式如下：

for(var i = 0; i < arr.length; i++){// arr 是要遍历的数组// arr[i] 是遍历的数组的元素// i 是数组的元素对应的下标(索引号)
}//对于数组遍历而言，我们可以利用for循环的计数器变量来访问数组中的每个元素，例如：
var array = [1, 2, 3, 4, 5];
for (var i = 0; i < array.length; i++) {console.log(array[i]);
}

二、for ... of 方法

for...of 循环是ES6新增的一种循环语法，它可以用于遍历数组、字符串、Map、Set等实现了iterator接口可迭代对象。与传统的for循环不同，for...of循环语句本身不包含初始化变量、循环条件和迭代器，而是直接遍历迭代对象中的每个元素。

for...of循环的语法如下：

for (variable of iterable) {// 循环体
}for(var item of arr) {// item 遍历的数组的元素
}var array = [1, 2, 3, 4, 5];
for (var element of array) {console.log(element);
}

这里的element变量会被依次赋值为数组中的每个元素，然后在循环体内输出到控制台上。

需要注意的是，for...of循环只能用于遍历可迭代对象，不能用于普通对象。如果需要遍历对象的属性，可以使用for...in循环。

这里的回调函数只有一个参数element，表示当前处理的元素值，它会被依次传入数组中的每个元素。循环结束后，数组中的每个元素都会被遍历一遍，输出到控制台上。

需要注意的是，forEach方法会自动跳过数组中未定义的元素，因此在使用时不必担心数组中的空洞问题。

三、for...in循环

for...in循环是JavaScript中用于遍历对象属性的一种循环语句。与传统的for循环语句类似，for...in循环也需要指定一个迭代变量和一个可枚举对象。在每次迭代中，迭代变量会被赋值为可枚举对象的下一个属性名，然后我们就可以使用该属性名来访问对应的属性值。

for...in循环的语法如下：

for (variable in object) {// 循环体
}

其中，variable表示在每次迭代中，将要被赋值为对象中下一个可枚举属性的名称，object参数是一个普通对象。在循环体内，我们可以使用variable变量来访问当前遍历到的属性值。

例如，我们可以使用for...in循环遍历对象并输出每个属性的名称和值：

var obj = {name: 'Tom',age: 18,gender: 'Male'
};
for (var prop in obj) {console.log(prop + ': ' + obj[prop]);
}

四、forEach 遍历

forEach是JavaScript中数组的一个函数方法，forEach循环会自动迭代数组，对每个元素执行一个指定的回调函数，并跳过数组中未定义的元素。

用来遍历数组中的每一项，不影响原数组，性能差; 缺陷 你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

for 与 forEach、map的区别：

• 在固定长度或者长度不需要计算的时候 for 循环效率高于 foreach 和 map，for循环中可以通过break终止。
• 在不确定长度或者计算长度有损性能的时候用foreach和map比较方便

forEach 和 map 区别：

相同点：

1、forEach：用来遍历数组中的每一项，这个方法执行没有返回值，不影响原数组

2、map：支持return，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组

不同点：

• map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
• forEach方法不会返回新数组

性能：

•         for > forEach > map
•         for 循环当然是最简单的，因为它没有任何额外的函数调用栈和上下文
•         forEach 其次，因为它其实比我们想象得要复杂一些。它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；
•         map 最慢，因为它的返回值是一个等长的全新的数组，数组创建和赋值产生的性能开销很大。

forEach方法的语法如下：

array.forEach(function(currentValue, index, array) {
// currentValue 遍历出的每一个元素
// index 元素对应的下标
// array 数组本身
// thisValue 返回值 (也可以不写返回值)
// 执行内容
}, thisValue);

例如，我们可以使用forEach方法遍历数组并输出每个元素：

let arr = [1, 2, 3, 4];
arr.forEach(item => {item = item * 2;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变

五、map 映射

map() 是 JavaScript 数组的一个内置函数方法，用于对数组中的每个元素执行一个指定的函数，并返回一个新的数组。它不会修改原始数组，而是返回一个新的数组，新数组的元素是回调函数的返回值。

map() 方法语法如下：

array.map(function(currentValue, index, array) {// 执行内容
}, thisValue);

第一个参数是回调函数，它可以接受三个参数：当前处理的元素值currentValue、当前处理的元素索引index、当前正在操作的数组对象array。第二个参数thisValue可选，表示在执行回调函数时，将其作为函数体内this关键字的值。

例如，我们可以使用 map() 方法遍历数组并将每个元素乘以2:

var numbers = [1, 2, 3, 4, 5];
var doubledNumbers = numbers.map(function(num) {return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

需要注意的是: map() 方法会返回一个新数组，而不是修改原有数组。它也不会修改原有数组中的元素。

六、filter方法

filter() 是 JavaScript 数组的一个内置函数方法，用于筛选数组中满足指定条件的元素，并返回一个新的数组。它不会修改原始数组，而是返回一个新的数组，新数组中包含满足筛选条件的元素。

filter() 方法的语法如下：

array.filter(function(currentValue, index, array) {// 指定条件判断
}, thisValue);

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var filteredNumbers = numbers.filter(function(num) {return num >= 5;
});
console.log(filteredNumbers); // [5, 6, 7, 8, 9, 10]

七、reduce高阶函数（迭代（累加器））

reduce() 是 JavaScript 数组的一个内置函数方法，用于对数组中的元素进行累积操作，将数组缩减为一个值。它通过提供的回调函数来实现累积操作，并返回最终结果。

reduce() 方法的语法如下：

array.reduce(function(accumulator, currentValue, index, array) {// 累积操作
}, initialValue);

第一个参数是回调函数，它可以接受四个参数：累积器(accumulator)、当前处理的元素值(currentValue)、当前处理元素的索引(index)和当前正在操作的数组对象(array)。第二个参数initialValue可选，表示初始的累积值。

例如，我们可以使用 reduce() 方法对数组中的元素求和：

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(total, num) {return total + num;
}, 0);
console.log(sum); // 15

需要注意的是，如果没有提供初始值(initialValue)，那么数组的第一个元素将作为初始的累积值，并从数组的第二个元素开始进行迭代。如果数组为空且没有提供初始值，那么将抛出 TypeError 异常。

另外，reduce() 方法还有一些高级用法，例如可以用它来实现数组的最大值、最小值、求平均值等操作。通过在回调函数中编写相应的逻辑，可以灵活地对数组进行累积运算。

八、every

遍历数组，每一个元素都满足条件 则返回 true，否则返回 false

arrObj.every(function(item,index,self){// item 遍历出的每一个元素// index 元素对应的下标// self 数组本身// 有返回值 // 检测数组里的每一个值是否满足指定条件，如果有一个值不满足，返回false，剩余的值不再进行检测// 如果所有的值都满足，则返回true
});

九、some

对数组中每个元素执行一次function 函数，直到某个元素返回true，则直接返回true。如果都返回false,则返回false

arrObj.some(function(item,index,self){// item 遍历出的每一个元素// index 元素对应的下标// self 数组本身// 有返回值 // 检测数组里的每一个值是否满足指定条件，如果有一个值满足，返回true，剩余的值不再进行检测// 如果所有的值都不满足，则返回false
});

function some(id: number) {const arr = [{ cityId: 195, cityName: '深圳'},{ cityId: 196, cityName: '北京'},{ cityId: 198, cityName: '上海'}]let result = arr.some((item: any) => {return item.cityId === id})console.log(`传入:${id},结果:${result}`)}

十、find

遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回 undefined

      let arr = [1,2,2,3,3,3,3,4,4,5,6]let num = arr.find((item:any) => {return item === 3})console.log(num)