解析最全面的Array数组遍历循环方法：map、filter、some、every、forEach、find，findIndex和for

2023年，又是不平凡的一年，有没有感觉道现在互联网行业大整顿，绝大部分公司都在大裁员，缩短业务线，减少开支。

现在找工作的压力太大了，受疫情的影响，很多公司都倒闭了，老板都出来找工作了。

如果你是一位应聘者，打开招聘APP，发现公司非常多啊，但是投出去的简历石沉大海，一点回复都没；虽然有主动找你的，但基本都是一些外包（一般人不会选择外包，因为很多坑，懂的都懂吧，^_^）。

话说来，在这么竞争激烈的环境下，需要我们加强技能的学习，你只有比别人更加出色，才能有机会争取好的岗位。

今天，小编分享一个简单的面试题：关于Array数组的遍历方法。目前Array数组遍历循环方法：map、filter、some、every、forEach、find，findIndex和for。接下来，我们一一简单解析下。

• $.each((i,val,arr)=>{})  /  $(element).each((i,val,arr)=>{})

• arr.forEach((val,i,arr)=>{}) 遍历数组(不改变原数组)

• arr.map((val.i,arr)=>{}) 使用一个数组, 利用某规则映射得到一个新数组(不改变原数组)

• arr.filter((i,val,arr)=>{})  找出符合条件的元素(不改变原数组)

• arr.every((i,val,arr)=>{}) 判断数组中的所有元素是否都符合某种条件(不改变原数组)

• arr.some((i,val,arr)=>{})   判断数组中是否含有符合条件的元素(不改变原数组)

• jQuery.grep(array, callback, [invert])   使用过滤函数过滤数组元素。

• arr.find((value,index,arr)=>{console.log(value,index,arr)}) 搜索指定条件并中断后面循环返回对应的第一个满足条件的对象或者值

• arr.findIndex((value,index,arr)=>{console.log(value,index,arr)})搜索指定条件并中断后面循环返回对应的第一个满足条件的索引值

新添加的数组遍历方法：

• for (let index = 0; index < array.length; index++) {}。

• for...in...可用于数组、对象的遍历

• for...of...可用于数组、对象的遍历

遍历列表列举：

1. $.each():参数是原数组和回调函数

$.each(arr,function(index,elem,arr){});

$(selector).each():selector 指的是伪数组的dom元素组合

$(selector).each(function(index,element){})

2. arr.forEach():arr指要处理的数组

arr.forEach((val,i,arr)=>{})

数组遍历循环forEach中断循环跳出try...catch...

有时候在处理后端返回的数据时，可能会出现数据有误的问题，

比如确实某些字段或者某些值，导致处理函数报错。

又因为JavaScript是单线程的，代码执行顺序是自上而下的执行，

故在某行报错后其后的代码就中断执行了。

为了避免某部分代码报错影响其他代码操作，这里就用上了try...catch...了

try-catch完整语法

try {
     尝试执行的代码块
}
catch(error) {
     捕获错误的代码块
}
finally {
     无论 try / catch 结果如何都会执行的代码块
}

基本使用方法

1. 没有定义过param变量：导致js代码报错
try{
  console.log(param) // 执行一个未声明的变量导致报错
}
catch(error){
  console.error(error)
};
 
console.log("前面代码报错了，但是代码没有被报错所阻塞");
 
 
----------------------------------------------------
 
2. 自定义报错信息：throw new Error(自定义报错文字) 
try{
  throw new Error('我这里自定义js代码报错，验证后面代码是否被阻塞不执行！');
}catch(error){
  console.error(error)
};
console.log("前面代码报错了，但是代码没有被报错所阻塞"");

跳出forEach循环

forEach的问题：
forEach不能使用break和continue这两个关键字，本身无法跳出循环，
也不能像普通for循环一样使用return跳出，必须遍历所有的数据才能结束。
 
-------------------------------------------------------------
 
解决方案： 
采用try..catch.. 和  throw new Error()来实现条件跳出，或者报错防止阻塞代码的作用
1. 单层循环：
try{
  obj.forEach(item => {
    console.log(`当前id：${item.id}`)
    if(item.id === '002'){
      throw new Error('id等于002，跳出循环');
    }
  });
}
catch(error){
  console.error(error)
};
console.log("如果看见了这段话说明代码没有被报错所阻塞");
 
2. 双层循环：
只是跳出了第二层循环，第一层循环会继续执行的
 
try{
  obj.forEach(item => {
    console.log(`第一层forEach循环：${item.id}`);
    try{
      item.array.forEach(val => {
        if(val.age < 18){
          throw  new Error('年龄不能小于18岁');
        }
      })
    }catch(error){
      console.error(error)
    }
  })
}catch(error){
  console.log(error)
};
console.log("如果看见了这段话说明代码没有被报错所阻塞");

注意：如非必须使用forEach的话，其实使用find函数完全可以实现满足条件就中断循环的目的。

3.  arr.map():要有return;利用某规则映射得到一个新数组,返回一个新的数组

arr.map((v, i) => {
    return v * v;
});

4.  filter:过滤数组，返回一个满足要求的数组

arr.filter((i,val,arr)=>{return v * v;}) 
example:
var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) {
  return x === undefined;
});
 
// []

filter 为数组中的每个元素调用一次 callback 函数，

并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。

**callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。**

那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

5. every:依据判断条件，数组的元素是否全满足，若满足则返回ture

arr.every((v, i) => v % 2 == 0) // 所有的结果都为true, 结果为true, 有一个false, 结果为false

6.  some: 依据判断,数组的元素是否有一个满足,若有一个,则返回true

arr.some(v => v > 2) // 只要有一个true, 结果为true

7.  $.grep() 使用过滤函数过滤数组元素

$.grep(array, callback, [invert]) 
array:待过滤数组。
callback:
此函数将处理数组每个元素。
第一个参数为当前元素，
第二个参数为元素索引值。此函数应返回一个布尔值。
另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”。
invert:如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。
 
例子:过滤数组中小于 0 的元素。
$.grep( [0,1,2], function(n,i){
  return n > 0;
});
invert参数例子:排除数组中大于 0 的元素，使用第三个参数进行排除。
$.grep( [0,1,2], function(n,i){
  return n > 0;
}, true);  // [0]

8. arr.find()数组循环，返回指定条件的第一个对象或者数组值

let arr = [
  {
    "id": 1
  },
  {
    "id": 3,
    "name":'Lili'
  },
  {
    "id": 5
  },
  {
    "id": 3,
    "name":'Xiaobai'
  },
]
----------------------------------------
arr.find((value,index,arr)=> value.id == 3) // {id: 3, name: 'Lili'}

9. arr.findIndex()数组循环，返回指定条件的第一个的索引值

let arr = [
  {
    "id": 1
  },
  {
    "id": 3
  },
  {
    "id": 5
  },
  {
    "id": 3
  },
]
----------------------------------------
arr.findIndex((value,index,arr)=> value.id == 3) // 1

for循环遍历数组：

for (let index = 0; index < array.length; index++) {
  const element = array[index];
  if(array[i] === 2) {
    // break; //跳出循环
    // continue; // 仅仅挑出当前循环，继续下面的循环
  }
}

for...in...遍历数组：

const arr = [1,2,3,4,5,6,7,8,9]
for (const key in arr) {
  // key 打印的是字符串的索引值
  const element = arr[key];
  console.log(key, element, typeof element);
}

for...of...遍历数组：

const arr = [1,2,3,4,5,6,7,8,9]
for (const iterator of arr) {
  console.log(iterator); // 1,2,3,4,5,6,7,8,9 \\ 数字
}

const arr = [1,2,3,4]
 
// for ... in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
    }
 
// for ... of
for (const key of arr){
    console.log(key) // 输出 1,2,3,4
}

const object = { name: 'lx', age: 23 }
    // for ... in
    for (const key in object) {
      console.log(key) // 输出 name,age
      console.log(object[key]) // 输出 lx,23
    }
 
    // for ... of
    for (const key of object) {
      console.log(key) // 报错 Uncaught TypeError: object is not iterable
    }

好啦，关于Array数组遍历的相关知识点就这些了，希望同学们能够了解。