js数组find,some,filter,reduce区别详解
区分清楚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
}
filter过滤对象数组// 如果我们是需要过滤出⼀个数组中所有满⾜条件的数据，应该使⽤Array.filter
console.log(arrTest.filter(getStatus("loading")))
// [
//  { id: 1, name: "a", status: "loading" },
/
/  { id: 2, name: "b", status: "loading" }
// ]
本节⽰例主要实现duce对⼀组数据进⾏条件过滤后，返回⼀个新的数组
const arrTest = [
{ id: 1, status: "loading" },
{ id: 2, status: "loading" },
{ id: 3, status: "success" }
]
console.log(
return character.status === "loading"
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 返回的数组以后再也不会⽤到。
使⽤ duce 同样的结果，代码更优雅。
到此这篇关于js 数组 find,some,filter,reduce区别详解的⽂章就介绍到这了，更多相关js 数组 find,some,filter,reduce内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。