JS遍历数组的几种常用方法

1.for循环

// for循环，也是最常见的。
// 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
let arr = [1, 2, 3, 4];
for(let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] + 1; // 直接通过索引修改原数组的值
}
console.log(arr); // [2,3,4,5]

let list = [{sex: '男'},{sex: '女'},{sex: '男'}];
for(let i = 0; i < list.length; i++) {
   list[i].sex = '女';
}
console.log(list); // [{sex: '女'}, {sex: '女'}, {sex: '女'}]

2.forEach()

// 这种方法只是使处理需要循环项目的数组变得更加容易，因为你不必像通常那样写出笨重而长的for循环语句
// forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变
// (注意和map方法区分)
let arr = [1, 2, 3, 4];
arr.forEach(item => {
    item = item * 2;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变

// 注意: forEach() 对于空数组是不会执行回调函数的。

3.map()

// map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组
// map() 方法按照原始数组元素顺序依次处理元素。
let arr = [1, 2, 3, 4];
let newArr = arr.map(item => {
    return item * 2;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr); // [2, 4, 6, 8] 返回新数组

// 注意： map() 不会对空数组进行检测。
// 注意： map() 不会改变原始数组。

4. filter()

// 将所有元素进行判断，将满足条件的元素作为一个新的数组返回, 原数组不变
let arr = [1, 2, 3, 4];
let newArr = arr.filter(item => {
    return item < 3;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr); // [1, 2]   返回新数组

// 注意： filter() 不会对空数组进行检测。
// 注意： filter() 不会改变原始数组。

5.find()

// 数组中的每个元素都调用一次函数执行
// 当数组中的元素在测试条件时返回true，find()返回符合条件的元素，之后的值不会再执行函数。
// 如果没有符合条件的元素则返回undefined。原数组不变
let arr = [1, 2, 3, 4];
let newArr1 = arr.find(item => {
    return item > 2;
});
let newArr2 = arr.find(item => {
    return item > 5;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr1); // 3  返回第一个符合条件的元素
console.log(newArr2); // undefined  没有符合条件的元素则返回undefined

// 注意: find() 对于空数组，函数是不会执行的。
// 注意: find() 并没有改变数组的原始值。

6.every()

// 将所有元素进行判断, 返回一个布尔值, 原数组不变
// 如果所有元素都满足判断条件，则返回true，否则为false。 
let arr = [1, 2, 3, 4];
let newArr1 = arr.every(item => {
    return item > 2;
});
let newArr2 = arr.every(item => {
    return item < 5;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr1); // false
console.log(newArr2); // true

// 注意： every() 不会对空数组进行检测。
// 注意： every() 不会改变原始数组

7.some()

// 将所有元素进行判断, 返回一个布尔值, 原数组不变
// 如果存在元素满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false。
// (判断条件注意和every方法区分)
let arr = [1, 2, 3, 4];
let newArr1 = arr.some(item => {
    return item > 2;
});
let newArr2 = arr.some(item => {
    return item > 5;
});
console.log(arr); // [1, 2, 3, 4]   原数组保持不变
console.log(newArr1); // true
console.log(newArr2); // false

以上均为个人学习笔记，小白仍需努力！