Detailed explanation of the differences between js array find, some, filter, and reduce

const arrTest = [
    { id: 1, name: "a" },
    { id: 2, name: "b" },
    { id: 3, name: "b" },
    { id: 4, name: "c" }
]

// Filter condition function getName(val) {
    return arrTest => arrTest.name === val
}

// If we want to find the first data that meets the conditions, we should use `Array.find`
console.log(arrTest.find(getName("b")))
// { id: 2, name: "b" }

const arrTest = [
    { id: 1, name: "a", status: "loading" },
    { id: 2, name: "b", status: "loading" },
    { id: 3, name: "b", status: "success" }
]

// Filter condition function getStatus(val) {
    return arrTest => arrTest.status === val
}

// If we need to find out whether a certain data exists in an array, use Array.some to get the result directly console.log(arrTest.some(getStatus("success")))
// true

const arrTest = [
    { id: 1, name: "a", status: "loading" },
    { id: 2, name: "b", status: "loading" },
    { id: 3, name: "b", status: "success" }
]

// Filter condition function getStatus(val) {
    return arrTest => arrTest.status === val
}

 
// If we need to filter out all the data that meets the conditions in an array, we should use Array.filter
console.log(arrTest.filter(getStatus("loading")))
// [
// { id: 1, name: "a", status: "loading" },
// { id: 2, name: "b", status: "loading" }
// ]

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.map and Array.filter combined 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" }
// ]