JavaScript中find、some、filter、reduce四个方法有何本质区别？

本文共计1145个文字，预计阅读时间需要5分钟。

区分Array中的filter、find、some、reduce这几个方法的区别，并依据它们的使用场景更好地应用于日常编码中。

`Array.filter()`：返回一个新数组，包含通过所提供函数实现的测试的所有元素。它不会改变原始数组。

使用场景：当你需要从数组中筛选出满足特定条件的元素时，例如获取所有大于某个值的元素。

javascriptconst ar=[1, 2, 3, 4, 5];const filtered=ar.filter(item=> item > 2);

`Array.find()`：返回数组中第一个满足测试函数的元素。如果不存在这样的元素，则返回`undefined`。

使用场景：当你只需要找到满足条件的第一个元素时，例如检查数组中是否存在某个特定的值。

javascriptconst ar=[1, 2, 3, 4, 5];const found=ar.find(item=> item===3);

`Array.some()`：测试数组中的元素是否至少有一个满足提供的函数。如果有一个元素满足条件，则返回`true`，否则返回`false`。

使用场景：当你需要检查数组中是否有至少一个元素满足某个条件时，例如检查数组中是否有负数。

javascriptconst ar=[1, 2, 3, 4, 5];const hasNegative=ar.some(item=> item <0);

`Array.reduce()`：对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。

使用场景：当你需要对数组中的所有元素进行累加、求和或其他聚合操作时，例如计算数组中所有元素的总和。

javascriptconst ar=[1, 2, 3, 4, 5];const sum=ar.reduce((acc, curr)=> acc + curr, 0);

区分清楚Array中filter、find、some、reduce这几个方法的区别，根据它们的使用场景更好的应用在日常编码中。

Array.find

Array.find 返回一个对象（第一个满足条件的对象）后停止遍历

const arrTest = [ { id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "b" }, { id: 4, name: "c" } ] // 过滤条件 function getName(val) { return arrTest => arrTest.name === val }

// 如果我们是想找到第一个满足条件的数据，应该使用`Array.find` console.log(arrTest.find(getName("b"))) // { id: 2, name: "b" }

Array.some

Array.some 返回是否满足条件的布尔值

const arrTest = [ { id: 1, name: "a", status: "loading" }, { id: 2, name: "b", status: "loading" }, { id: 3, name: "b", status: "success" } ] // 过滤条件 function getStatus(val) { return arrTest => arrTest.status === val }

// 如果我们需要查找一个数组中是否存在某个数据的时候，使用Array.some直接拿到结果 console.log(arrTest.some(getStatus("success"))) // true

Array.filter

Array.filter 遍历整个Array返回一个数组（包含所有满足条件的对象）

const arrTest = [ { id: 1, name: "a", status: "loading" }, { id: 2, name: "b", status: "loading" }, { id: 3, name: "b", status: "success" } ] // 过滤条件 function getStatus(val) { return arrTest => arrTest.status === val } // 如果我们是需要过滤出一个数组中所有满足条件的数据，应该使用Array.filter console.log(arrTest.filter(getStatus("loading"))) // [ // { id: 1, name: "a", status: "loading" }, // { id: 2, name: "b", status: "loading" } // ]

Array.reduce

Array.reduce 为数组的归并方法，使用场景很多，比如求和、求乘积，计次，去重，多维转一维，属性求和等...
本节示例主要实现Array.reduce对一组数据进行条件过滤后，返回一个新的数组

const arrTest = [ { id: 1, status: "loading" }, { id: 2, status: "loading" }, { id: 3, status: "success" } ] console.log( arrTest.reduce((acc, character) => { return character.status === "loading" ? acc.concat( Object.assign({}, character, { color: "info" }) ) : acc }, []) ) // [ // { id: 1, status: "loading", color: "info" }, // { id: 2, status: "loading", color: "info" } // ]

与Array.filter返回的数组的不同，filter返回的是原数组中符合条件的对象集合，filter与 Array.map 结合也可以实现上面的结果，为什么使用reduce更好呢？

// Array.map 和 Array.filter 组合 console.log( arrTest .filter(character => character.status === "loading") .map(character => Object.assign({}, character, { color: "info" }) ) ) // [ // { id: 1, status: "loading", color: "info" }, // { id: 2, status: "loading", color: "info" } // ]

结论：同时使用 Array.filter 和 Array.map 的时候，对整个数组循环了 2 遍。第一次是过滤返回一个新的数组，第二次通过 map 又构造一个新的数组。使用了两个数组方法，每一个方法都有各自的回调函数，而且 filter 返回的数组以后再也不会用到。
使用 Array.reduce 同样的结果，代码更优雅。

到此这篇关于js 数组 find,some,filter,reduce区别详解的文章就介绍到这了,更多相关js 数组 find,some,filter,reduce内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！