一般的に使用される Javascript 配列メソッド。

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

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

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

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

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

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

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

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

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

`const data = [
{
"ユーザー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 は配列を返します。

const onlineUsers = (ユーザー) => {
return users.filter(user => user.status === "online")
}

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 === 'online')

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

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

const isOnline = data.every(user => dataItem.status === 'online')

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

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

以上が一般的に使用される Javascript 配列メソッド。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。