js数组遍历常用方法 0802二

介绍：访问，获取数组所有元素或指定某项元素，并对数组元素进行一些操作

方法一：for循环

// for循环  最常见
            let arr = [1, 2, 3, 4, 5];
            for (let i = 0; i < arr.length; i++) {
                arr[i] = arr[i] + 1; // 直接通过索引修改原数组的值
            }
            console.log('for循环', arr); //for循环 [2,3,4,5,6]
            let list = [{ sex: '男' }, { sex: '女' }, { sex: '男' }];
            for (let i = 0; i < list.length; i++) {
                list[i].sex = '女';
            }
            console.log('for循环', list); //for循环 [{sex: '女'}, {sex: '女'}, {sex: '女'}]

方法二：forEach

介绍：调用数组的每个元素，没有返回值，不会改变原数组

语法：

arr.forEach((item,index,arr)=>{

}
)

说明：

item:当前数组元素

index:数组元素当前项

arr:原数组

特点：

1、没有返回值

2、不会改变原数组

3、不会对空数组进行检测

示例：将数组元素乘2

            // forEach循环
            let arr2 = [1, 2, 3, 4, 5];
            let arrT = [];
            arr2.forEach(item => {
                item = item * 2;

                arrT.push(item);
            });
            console.log('foEach', arr2, arrT);
            // 1.不会改变原数组，所以arr2还是[1,2,3,4,5]
            // 2.没有返回值，如果对数组元素进行了处理需要额外定义一个空数组，然后将处理后的数组元素添加到新建的空数组里面
            // 3.写法简洁，注意和map的区别

方法三：map

介绍：返回一个新数组，新数组元素是原数组元素经过函数调用处理后的值，并没有改变原数组

语法：

let newArr=oldArr.map((item,index,oldArr)=>{执行语句})

说明：

item:当前数组元素

index:数组元素当前项

oldArr:原数组

特点：

1、有返回值

2、原数组不会改变

3、不会对空数组进行检测

示例：数组元素扩大3倍

            // map循环
            let arr3 = [1, 2, 3, 4, 5];
            let newArr3 = arr3.map(item => {
                // 有返回值
                return item * 3;
            });
            console.log('map', arr3); //map [1, 2, 3, 4, 5] 原数组不变
            console.log('map', newArr3); //map [3, 6, 9, 12, 15] 返回一个新数组

方法四：filter()

介绍：过滤筛选数组元素，返回满足条件的元素，过滤掉不满足的元素

语法：

​
let newArr4=arr4.filter((item,index,arr4)=>{return 执行语句})

​

说明：

item:当前数组元素

index:数组元素当前项

arr4:原数组

特点：

1、有返回值

2、不会改变原数组

3、不会对空数组进行检测

示例：筛选出大于5的元素

            // filter过滤
            let arr4 = [1, 2, 4, 5, 67, 8];
            let newArr4 = arr4.filter(item => {
                return item > 5;
            });
            console.log('filter', arr4); // filter [1, 2, 4, 5, 67, 8]  原数组不变
            console.log('filter', newArr4);//filter [67, 8]  返回新数组

方法五：find()方法

介绍：返回满足条件的第一个元素值，如果没有，返回undefined

语法：

let newArr=arr.find((item,index,arr)=>{return 执行语句})

说明：

item：当前元素值
index：当前元素索引

arr：原数组

特点：

1、有返回值

2、不会改变原数组

3、对于空数组，函数是不会执行的

            // find()
            let arr5 = [1, 2, 3, 4, 5];
            let newArr5 = arr5.find(item => {
                return item > 2;
            });

            let newArr6 = arr5.find(item => {
                return item > 6;
            });
            console.log('find', arr5); // find (5) [1, 2, 3, 4, 5] 原数组保持不变
            console.log('find', newArr5); //  find 3 返回满足条件的第一个数组元素
            console.log('find', newArr6); // find undefined 没有符合条件的元素返回undefined

方法六：every()

介绍：所有元素满足判断条件则返回true，否则为false

语法：

let newArr=arr.every((item,index,arr)=>{return 执行语句})

示例：

// 将所有元素进行判断, 返回一个布尔值, 原数组不变
// 如果所有元素都满足判断条件，则返回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() 不会改变原始数组

方法七：some()

介绍：只要有一项满足判断条件，返回true，所有元素都不满足判断条件返回false

示例：

// 将所有元素进行判断, 返回一个布尔值, 原数组不变
// 如果存在元素满足判断条件，则返回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