この投稿では、反復とコールバック関数を使用して機能をアーカイブする、一般的に使用される Javascript 配列メソッドについて学びます。

反復とは、一連のステートメントまたはコード ブロックを繰り返し実行することを指します。これにより、同じ操作を複数回実行できるようになります。

簡単に言えば、コールバックは別の関数に引数として渡される関数定義です。

話を簡単にするために、次の 3 つのポイントに焦点を当てます。

1. 特定の配列メソッドを使用する必要がある場合。
2. 配列メソッドが返すもの。
3. 配列メソッドのコード例。 **

先に進む前に、これらの配列メソッドがどのように構成されているかを理解しましょう。

// 配列メソッド(コールバック(配列内の各項目に対して実行したい条件))

これらの各配列メソッドは引数としてコールバックを受け取る関数です。このコールバックで、各配列項目に対して実行する条件を指定します。

このオブジェクトの配列を例に使用します。

`const データ = [
{
"ユーザーID": 1,
"ユーザー名": "フランシス",
"message": "やあ、調子はどう？",
"タイムスタンプ": "2024-02-18T12:30:00Z",
"ステータス": "オンライン",
"メッセージ送信済み": 28,
"ロール": "ユーザー",
"パスコード": "293087O7764"

},
{
"ユーザーID": 2,
"ユーザー名": "モーゼス",
"message": "悪くはない、ただプロジェクトに取り組んでいるだけだ。",
"タイムスタンプ": "2024-02-18T12:35:00Z",
"ステータス": "退席中",
"メッセージ送信": 74,
"ロール": "ユーザー",
"パスコード": "675147O2234"
},
{
"ユーザーID": 3,
"ユーザー名": "ヴィッキー",
"message": "やあ皆さん! 最近のゴシップは何ですか?",
"タイムスタンプ": "2024-02-18T12:40:00Z",
"ステータス": "オンライン",
"メッセージ送信済み": 271,
"役割": "モデレーター",
"パスコード": "76352O8069"

},
{
"ユーザーID": 4,
"ユーザー名": "ジュニア",
"message": "あまり多くはありません。ただリラックスしているだけです。あなたはどうですか?",
"タイムスタンプ": "2024-02-18T12:45:00Z",
"ステータス": "オフライン",
"メッセージ送信": 125,
"役割": "管理者",
"パスコード": "21876O3483"
}
]`

forEach: forEach は、すべての配列項目に対して条件を実行する場合に使用します。 forEach は未定義を返します。

関数 getMessageSent(users){
sumMessageSent = 0;
にしましょう users.forEach(関数(ユーザー){
sumMessageSent = user.messageSent;
})
sumMessageSent を返す;
}
getMessageSent(data) // 出力: 498

reduce:reduce は、配列を 1 つの値に減らすために使用されます。たとえば、この配列 [8, 7, 3] は数値 18 に減らすことができます。reducer は 1 つの値を返します。

reducer 関数は 2 つのパラメーターを受け取ります。最初は、reducer (合計と現在の値で作られます)、そして 2 番目は、initialValue

合計: これは一般にアキュムレータと呼ばれます。私が合計と呼んでいるのは、reducer 関数の最後に計算された値です。

現在は単一の配列項目を参照します。私たちの場合、4 つのアイテム (現在) があります。

initialValue は、最初の呼び出しで合計に割り当てる値です。単純に、initalValue が total

const getMessageSent = (ユーザー) => {
return users.reduce((total, current) => total = current.messageSent, 0)
}

getMessageSent(data) // 出力: 498

filter: Array.filter は、配列内の特定の条件を満たす項目のみを収集したい場合に使用します。 array.filter は array.

const onlineUsers = (ユーザー) => {
return users.filter(user => user.status === "オンライン")
}

onlineUsers(data) // 出力: [オブジェクト object]

find Array.find は、コールバック内で定義された条件を満たす最初の配列項目のみを取得したい場合に使用します。 array.find は、配列ではなく項目の形式で最初の項目を返します。この場合、一致するものが見つからなかった場合はオブジェクトまたは未定義になります。

const getUserRole = (ユーザー) => {
return users.find(user => user.role === "user")
}

getUserRole(data) // 出力: {userId: 1、ユーザー名: 'Francis'、メッセージ: 「調子はどうですか?」、タイムスタンプ: '2024-02-18T12:30:00Z'、ステータス: 'オンライン',…}

条件を満たす最初のユーザーのみが返されたことに注目してください。

map Array.map は、配列内の項目を変換する場合に使用されます。 array.map は、コールバックの条件を満たす、変換された項目の配列を返します。

const getUserNameAndPass = (ユーザー) => {
return users.map((user) => {
const userPassCode = user.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
user.passCode.length,
「★」
)};
});
};

getUserNameAndPass(data)// 出力:['フランシス ★★★★★★★7764', 'モーゼス ★★★★★★★2234', 'ヴィッキー ★★★★★★8069', 'ジュニア ★ ★★★★★3483']

every array.every は、すべての配列項目が定義した条件を満たしているかどうかを確認する場合に使用されます。 array.every はブール値を返します。すべての項目が条件に合格する場合は true、いずれかの項目が条件に失敗する場合は false。

const isOnline = data.every(user => dataItem.status === 'オンライン')

console.log(isOnline) // 出力:false

Some array.some は、配列項目の一部が特定の条件を満たしていることを確認したい場合に使用されます。 array.some はブール値を返します。一部の項目が条件に合格した場合は true、すべての項目が合格または失敗した場合は false。

const isOnline = data.every(user => dataItem.status === 'オンライン')

console.log(isOnline) // 出力: true

これらは、広く使用されている配列メソッドの一部です。