前端：JS的数组的遍历、map、filter、find、some、every的用法示例

目录

一、最基本的遍历写法：

二、forEach遍历：

三、for of 遍历

四、for in 遍历

五、map 根据原数组产生新数组

六、filter 对数组元素进行筛选

七、find 查找符合条件的第一个元素

八、some 判断是否存在元素符合条件

九、every判断是否所有元素都符合条件

---

在JS语法里，如果想要遍历一个列表（数组），比如下面这个userList:

const userList = [
    {
      id: 1,
      name: "Kevin",
      age: 10,
      subject: 5,
      state: 1,
    },{
      id: 2,
      name: "John",
      age: 15,
      subject: 1,
      state: 0,
    },{
      id: 3,
      name: "Lily",
      age: 20,
      subject: 2,
      state: 1,
    }
]

想遍历userList，打印每个元素的name值，

一、最基本的遍历写法：

for (let i = 0; i < userList.length; i++) {
   const user = userList[i];
   console.log("user name: ", user.name);
}

这种写法最常见也容易理解，运行结果如下。

二、forEach遍历：

    userList.forEach(function(user) {
      console.log("user name: ", user.name);
    })

这个forEach方法传入一个function，userList有几个元素，这个function就会被调用几次，它的入参user就是遍历userList时依次拿到的元素。

实际上forEach的语法如下：

array.forEach(function(value, index, arr), thisValue)

value:必须，代表当前元素，其他参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值。

function: 用来对元素进行处理，无返回值。

返回值：undefined

我们可以用箭头语法简化一下上面这个forEach代码，改成这样：

userList.forEach(user => console.log("user name: ", user.name))

另外需要注意：forEach中不能使用break、continue和return语句，也就意味着用forEach的话遍历完所有的元素才结束。

三、for of 遍历

for...of 用于遍历数组的元素，还可以遍历字符串，Map，Set等。

比如用for...of遍历userList：

for(const user of userList) {
   console.log("user name : ", user.name)
}

运行结果：

四、for in 遍历

for...in 语句用于遍历数组或者对象的属性。

用for...in遍历userList:

for (const i in userList) {
   console.log("user : ", i);
   console.log("user name: ", userList[i].name);
}

注意如果遍历的是数组for in中这里的 i 就是下标。运行结果如下。

而如果用for in遍历对象各个属性，这里的 i 就是属性名。如下：

    const usr = userList[0];
    for(const i in usr) {
      console.log("user attr : ", i);
      console.log("user attr value : ", usr[i]);
    }

运行结果：

四种遍历中，普通for循环是效率最高的，而for...in循环最慢。

五、map 根据原数组产生新数组

map用于遍历数组，对数组中的各个元素做处理。

语法：array.map(function(value, index, arr), thisValue)

value:必须，代表当前元素，其他参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值。

function：表示获取新元素的函数，返回值为新元素。

返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

对userList遍历并且对各个元素的age加1，得到新的数组newList的示例:

    const newList = userList.map(user => {
      return {
        id: user.id,
        name: user.name,
        age: user.age + 1,
        subject: user.subject,
        state: user.state,
      }
    });

用forEach 打印原数组和新数组：

userList.forEach(user => console.log("user age : " + user.name + " : " + user.age));
console.log("------------------")
newList.forEach(user => console.log("user age : " + user.name + " : " + user.age));

运行结果：

这里提一下forEach和map都可以遍历数组并且依次对数组元素进行处理。区别是：

 array.forEach没有返回值，且传入的function也没有返回值。只是对数组元素做处理，处理完后原数组改变。

而array.map的返回值是一个新的数组，传入的function也有返回值（需返回新的元素），处理完后原数组不变。

因此如果不想改变原数组的话，就可以使用map进行遍历，生成一个新数组。​​​​​​​

六、filter 对数组元素进行筛选

filter用于按指定条件筛选元素，产生新的数组。

语法： array.filter(function(value, index, arr), thisValue)

value:必须，代表当前元素，其他参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值。

function: 用于筛选元素，返回值为布尔值，返回true则此元素被放入新数组。

返回值：返回数组，包含了符合条件的所有元素，如果没有符合条件的则返回空数组。

比如使用filter筛选出userList里state为1 的元素：

const newList = userList.filter(user => user.state == 1);

有些人可能会问，filter传入的function不是有返回值的吗，怎么这里没有return？

其实这里是用了lambda表达式简化了写法，用return的话可以这么写：

const newList = userList.filter(user => {return user.state == 1});

得到的newList就只包含了state为1的两个元素。用forEach打印newList看看：

newList.forEach(usr => console.log("user name : ", usr.name));

运行结果：

七、find 查找符合条件的第一个元素

find用来遍历数组，查找符合条件的元素，在查找到符合条件的第一个元素后就会返回。

语法： array.find(function(value, index, arr), thisValue)
value:必须，代表当前元素，其他参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值。

function: 用来查找符合要求的元素的函数。返回值为布尔值。

返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。

比如在userList中查找age大于10的元素：

    const result = userList.find(user => user.age > 10);
    console.log("user : ", result.name);

John和Lily的age都大于10，但是返回都result只有John。因为find只要找到一个符合条件的元素就不会再继续遍历了。运行结果如下：

八、some 判断是否存在元素符合条件

some遍历数组，依次判断每个元素，如果存在某个元素符合条件，则返回true；没有元素符合条件则返回false。

语法： array.some(function(value, index, arr), thisValue)
value:必须，代表当前元素，其他参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值。

function: 用来判断元素是否满足要求。返回值为布尔值。

返回值：如果存在某个元素符合条件，则返回true；没有元素符合条件则返回false。

比如判断userList是否存在name为Lily的元素：

const result = userList.some(usr => usr.name == "Lily");
console.log("result == ", result);

运行结果：result ==  true

九、every判断是否所有元素都符合条件

every遍历数组，依次判断每个元素，如果每个元素都符合条件则返回true；任意一个不符合条件则返回false。

语法： array.every(function(value, index, arr), thisValue)
value:必须，代表当前元素，其他参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值。

function: 用来判断元素是否满足要求。返回值为布尔值。

返回值：如果每个元素都符合条件则返回true；任意一个不符合条件则返回false。

比如判断是否userList里的每个元素name都为Lily:

const result = userList.every(usr => usr.name == "Lily");
console.log("result == ", result);

运行结果：result ==  false