Using “array methods” on array of objects 【JavaScript】

Using “array methods” on array of objects 【JavaScript】

Array of objectsの例

const tweets = [
    {
        id: 10512,
        message: "Hello Twitter 👋",
        stats: {
            likes: 41,
            retweets: 54
        }
    },
    {
        id: 41241,
        message: "How do you keep track of your notes?",
        stats: {
            likes: 14,
            retweets: 20
        }
    }
];

Array.filter()

tweets.filter(tweet => {
    return tweet.stats.likes > 30;
})

返ってくるのは

[
    {
        id: 10512,
        message: "Hello Twitter 👋",
        stats: {
            likes: 41,
            retweets: 54
        }
    }
]

コールバック関数に書かれた条件にマッチするオブジェクトだけのArrayが返ってきます。

Array.find()

const searchId = 41241;
const tweet = tweets.find(tweet => tweet.id === searchId);
console.log(tweet); // {...} (2nd tweet object)

返ってくるのは

{
        id: 41241,
        message: "How do you keep track of your notes?",
        stats: {
            likes: 14,
            retweets: 20
        }
}

条件に最初に合致したオブジェクトが返ってきます。

Array.some()

tweets.some(tweet => tweet.stats.likes > 30); // true (at least one has more than 30 likes)
tweets.some(tweet => tweet.stats.likes > 100); // false (none of the tweets satisfy this condition)

条件にマッチするオブジェクトが1つでもあればtrueが、そうでなければfalseが返ってきます。

Array.every()

tweets.every(tweet => tweet.status.likes > 10); // true (all the tweets have more than 10 likes)
tweets.every(tweet => tweet.status.likes > 30); // false (some tweets don't have more than 30 likes)

全てのオブジェクトが条件にマッチすればtrueが、そうでなければfalseが返ってきます。

JavaScriptカテゴリの最新記事