javascript(基础)_对数组的遍历方法总结,find, findIndex, forEach,

一、前言

这篇文章主要对JS中数组遍历的方法做一个总结:

1、find() findIndex()

2、forEach

3、every

4、map

5、reduce

二、主要内容

1、find()、findIndex()

用法:用于找出第一个符合条件的数组成员,他的参数是一个回调函数,会遍历所有元素,执行你给定的带有条件返回值的函数,如果满足了你给的条件函数,就返回第一个符合的元素,找不到返回undefined。

下面封装这个find()函数:

//要遍历的数组
var users = [
 {id : 1, name: '张三'},
 {id : 2, name: '张三'},
 {id : 3, name: '张三'},
 {id : 4, name: '张三'},
 {id : 5, name: '张三'},
]

//在原型上定义一个方法,给他一个参数,这个参数的类型是一个函数
Array.prototype.myFind = function(conditionFun){
        
     //谁调用这个方法this就是谁
    for(var i=0; i< this.length; i++){
            //如果满足了传过来的那个条件函数,就返回当前的元素
        if(conditionFun(this[i], i)){
            return this[i]
        }
    }
}
//用数组调用
var ret = users.myFind(function (item, index) {
       
    return item.id === 2
})

console.log(ret)

2、forEach()

用法: foreach()函数会将数组从头到尾遍历一遍,可以在回调函数中传三个参数,

var data = [1,2,3,4,5];

//只传一个参数,item为数组元素
data.forEach(function (item){
    console.log(item)
})

//传两个参数,item为数组元素,index为元素下标
data.forEach(function (item, index){
    console.log(`${item}=========${index}`)
})

//传三个参数,item为数组元素,index为数组下标,arr为数组

data.forEach(function (item, index, arr){
    console.log(`${item}=========${index}====${arr}`)
})

3、every

用法:用于检测数组中所有的元素是否都符合指定条件,这个条件通过回调函数传递。如果数组中有一个元素不满足,则整个表达式返回false, 剩余的元素不再进行检查。如果所有元素都满足,则返回true

用法如下:

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed1 = [12, 5, 8, 130, 44].every(isBigEnough);
// passed1 is false
console.log(passed1)
var passed2 = [12, 54, 18, 130, 44].every(isBigEnough);
// passed2 is true
console.log(passed2)

4、some

用法:与every()的用法恰巧有点相反。some()方法用于检测数组中的元素是否满足指定条件,该条件由函数提供,会一次执行数组中的每一个元素,如果有一个满足条件,整个表达式为true,剩余元素不在检测。如果没有满足条件的,则返回false

用法如下:

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed1 = [2, 5, 8, 6, 9].some(isBigEnough);
// passed1 is false
console.log(passed1)
var passed2 = [12, 54, 18, 130, 44].some(isBigEnough);
// passed2 is true
console.log(passed2)

5、include()

用法:函数用来判断是否包含指定的值,包含返回true,不包含返回false

例子:

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

6、map

用法:map称为映射,也是键值对集合,键不仅仅是字符串还可以是其他类型,比如对象。map()的参数是一个回调函数,会根据回调函数映射成一个新的数组

方法一:

var data = [1,2,3,4]

var data2 = data.map(function (item) {
    return item*item   //这相当于将原来数组元素变成了它的平方
    //item*item  一定要给回调函数返回值,如果没有会默认返回undefined
});

console.log(data2)

用法二:map()回调中第一个参数为对象,我们可以直接拿到对象里面的某个属性

var users = [
  {name: "张三", "email": "zhang@email.com"},
  {name: "小王",   "email": "wang@email.com"},
  {name: "小红",  "email": "hong@email.com"}
];

var emails = users.map(function (user) { return user.email; });

console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

7、filter

用法:filter为筛选。filter() 的参数是一个过滤条件,这个条件是回调函数

var arr = [1, 2, 3, 4]
arr=arr.filter(function (item) {

    return item%2  //这里过滤掉了偶数,只留下奇数
})
console.log(arr)
arr = [1, 2]

用法二:获得以zhang开头的邮件

var users = [
  {name: "张三", "email": "zhang@email.com"},
  {name: "小王",   "email": "wang@email.com"},
  {name: "小红",  "email": "hong@email.com"}
];

var emailsZhang = users // 获得邮件 .map(function (user) { return user.email; }) // 筛选出zhang开头的邮件 .filter(function(email) { return /^zhang/.test(email); }); console.log(emailsZhang);

8、reduce() 函数可以理解为进去一堆,出来的是一个,参数接受的是一个回调函数

arr.reduce(function(prev,cur,index,arr){

...

}, init);

arr 表示将要原数组;

prev 表示上一次调用回调时的返回值,或者初始值 init;

cur 表示当前正在处理的数组元素;

index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;

init 表示初始值。

var arr = [1, 2, 3, 4, 5]
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);
//这里传入的初值为0,第一次计算0+1=1,的值作为下一轮的prev的值

1+2=3 继续作为下一轮的orev值

reduce()方法参考:https://www.jianshu.com/p/541b84c9df90

三、总结