js之遍历数组八种方法汇总(总有一款你需要的)

直进主题,实现数组遍历:

  1. forEach()
    它的第一个参数是回调函数,这个函数参数有三个:第一个参数表示当前遍历元素;第二个参数表示当前遍历元素的索引;第三个参数表示这个数组对象本身(很少用)
    它还有一个参数forEach(function(){}, thisValue);就是给函数体一个this指向
    特点:
    无返回值,不会改变原数组;
    会遍历到每个元素。
let arry = [1,2,3,4,5,6,7,8,9];
arry.forEach(function(item, index){
	console.log(item, index); //依次打印数组元素和索引
})

在这里插入图片描述

  1. filter()
    它的第一个参数是回调函数,这个函数参数有三个:第一个参数表示当前遍历元素;第二个参数表示当前遍历元素的索引;第三个参数表示这个数组对象本身(很少用)
    它还有一个参数filter(function(){}, thisValue);就是给函数体一个this指向
    特点:
    有返回值,找到满足条件的所有元素变为一个数组,不会改变原数组;
    会遍历到每个元素。
let arry = [1,2,3,4,5,6,7,8,9];
let newarr = arry.filter(function(item, index) {
	return item >= 4;
})
console.log(newarr);

在这里插入图片描述
3. some()
它的第一个参数是回调函数,这个函数参数有三个:第一个参数表示当前遍历元素;第二个参数表示当前遍历元素的索引;第三个参数表示这个数组对象本身(很少用)
它还有一个参数some(function(){}, thisValue);就是给函数体一个this指向
特点:
有返回值,是一个布尔值,若找到第一个满足条件的元素,会直接终止遍历,返回一个true;若在数组中没有找到满足条件的元素,会返回一个false,不会改变原数组;
不一定会遍历到每个元素。

let arry = [1,2,3,4,5,6,7,8,9];
let newarr = arry.some(function (item, index) {
	console.log(index); //会拿到找到满足条件前的元素的索引
	return item >= 4;
})
console.log(newarr); //true

在这里插入图片描述
4. every()
它的第一个参数是回调函数,这个函数参数有三个:第一个参数表示当前遍历元素;第二个参数表示当前遍历元素的索引;第三个参数表示这个数组对象本身(很少用)
它还有一个参数every(function(){}, thisValue);就是给函数体一个this指向
特点:
有返回值,是一个布尔值,若找到其中一个元素不满足条件的元素,会直接终止遍历,返回一个false;若在数组中所以元素都满足条件的元素,会返回一个true,不会改变原数组;
不一定会遍历到每个元素。

let arry = [1,2,3,4,5,6,7,8,9];
let res= arry.every(function(item, index) {
	return item >= 1;
})
console.log(res); //true
  1. map()
    它的第一个参数是回调函数,这个函数参数有三个:第一个参数表示当前遍历元素;第二个参数表示当前遍历元素的索引;第三个参数表示这个数组对象本身(很少用)
    它还有一个参数map(function(){}, thisValue);就是给函数体一个this指向
    特点:
    有返回值,它可以操作原数组的元素,使之返回一个新数组,不改变原数组;
    会遍历到每个元素。
let arry = [1,2,3,4,5,6,7,8,9];
let newarr = arry.map(function(item, index) {
	return item * 2;
})
console.log(newarr);

在这里插入图片描述
6 reduce()
它的第一个参数是回调函数,这个函数参数有四个:第一个参数表示计算结束后的返回值(初始值为数组的第一个元素);第二个参数代表当前元素,第三个参数表示当前遍历元素的索引;第四个参数表示这个数组对象本身(很少用)
可以这么理解前二个参数:pre表示数组的第一个元素,next表示第二个元素;第二次执行:pre表示这个方法上一次的返回值(执行结果),next表示下一个元素(第三个)
特点:
有返回值,是计算完整个数组元素后的返回值,不会改变原数组;
会遍历整个数组。

let arry = [1,2,3,4,5,6,7,8,9];
let res = arry.reduce(function(pre, next, index) {
	return pre + next;
})
console.log(res);

在这里插入图片描述
它还有一个参数reduce(function(){}, initialValue):就是给函数传递初始值(可以是个空对象、空数组)

这里针对这个属性有一道面试题:找出字符串中连续出现最多的字符和个数
‘abcaakjbb’ => {‘a’:2,‘b’:2}
‘abbkejsbcccwqaa’ => {‘c’:3}

let str1 = 'abcaakjbb';
let str2 = 'abbkejsbcccwqaa';
function getRes(str) {
    //创建出现连续字符的正则
    let reg = /(\w)\1*/g;
    //将匹配到的字符转为数组存放
    let arry = str.match(reg);
    //统计连续字符的最大长度
    let maxlen = Math.max(...arry.map(item => item.length));
    let res = arry.reduce(function(a, b) {
        if (b.length === maxlen) {
            //
            a[b[0]] = maxlen;
        }
        return a;
    }, {}) //初始值是个对象,故返回值也是个对象
    return res;
}
console.log(getRes(str1));
console.log(getRes(str2));

在这里插入图片描述

  1. find()
    它的第一个参数是回调函数,这个函数参数有三个:第一个参数表示当前遍历元素;第二个参数表示当前遍历元素的索引;第三个参数表示这个数组对象本身(很少用)
    特点:
    有返回值,返回第一个找到满足条件的元素,不改变原数组;
    不一定遍历整个数组
    它还有一个参数find(function(){}, thisValue);就是给函数体一个this指向
let item = arry.find(function(item, index) {
   	console.log(index); //会拿到找到满足条件前的元素的索引
    return item >= 4;
})
console.log(item); //4

在这里插入图片描述
8. findIndex()
它的第一个参数是回调函数,这个函数参数有三个:第一个参数表示当前遍历元素;第二个参数表示当前遍历元素的索引;第三个参数表示这个数组对象本身(很少用)
特点:
有返回值,返回第一个找到满足条件的元素的索引,不改变原数组;
不一定遍历整个数组
它还有一个参数findIndex(function(){}, thisValue);就是给函数体一个this指向

let index = arry.findIndex(function(item, index) {
    console.log(index); //会拿到找到满足条件前的元素的索引
    return item >= 4;
})
console.log(index);

在这里插入图片描述
以上就是数组的遍历方法了,以后还会多去总结,希望能帮到大家!!!

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页