JavaScript配列の一般的なメソッドの概要

JavaScript配列の一般的なメソッドの概要

1. はじめに

配列メソッドが多すぎます。この記事では、整理と復習のために、間違って覚えがちな配列メソッドをいくつか記録します。
他の配列メソッドも今後徐々に追加される予定です。
配列メソッドをうまく活用すると、データ処理がエレガントかつシンプルになります。

それでは始めましょう:

2. フィルター()

説明する:

filter()メソッドは新しい配列を作成し、条件を満たすすべての要素を作成された新しい配列に追加します。

文法:

Array.filter(callback(要素, インデックス, 配列) { // 関数本体}, thisValue)


パラメータ:

callbackthisValue :

パラメータオプションですか?説明する
パラメータ1折り返し電話必須配列の各要素をテストする関数。要素がテストに合格して保持される場合は true を返し、そうでない場合は false を返します。 3 つのパラメータを受け取ります。
パラメータ2この値オプションコールバックが実行されるときにこれに使用する値。
オブジェクトはこの実行のコールバックとして使用され、関数に渡されます。
thisValue が省略されている場合、「this」の値は「undefined」になります。

コールバックパラメータリスト:

パラメータオプションですか?説明する
パラメータ1要素必須現在の要素
パラメータ2索引オプション現在の要素のインデックス値
パラメータ3配列オプションフィルタが呼び出される配列

thisValue のパラメータ:

callbackが実行されるときにthisに使用する値。

戻り値:

filter()関数のパラメータの戻り値で構成される新しい配列です

例:

ユーザーに = [
  {id: 11、名前: "孫悟空"}、
  {id: 21、名前: "朱八戒"}、
  {id: 31、名前: "Sha Monk"}
];

// 最初の 2 人のユーザーの配列を返します。let filterUsers = users.filter(item => item.id < 31);

console.log(filterUsers.length); // 2

3. マップ()

説明する:

map()メソッドは、各要素が指定された関数を 1 回呼び出した戻り値である新しい配列を作成します。

文法:

Array.map(callback(currentValue, index, array) { // 関数本体}, thisValue)


パラメータ:

callbackthisValue

パラメータオプションですか?説明する
パラメータ1折り返し電話必須配列内の各要素に対して実行されるコールバック関数。 3 つのパラメータを受け取ります。
パラメータ2この値オプションコールバックが実行されるときにこれに使用する値。
オブジェクトはこの実行のコールバックとして使用され、関数に渡されます。
thisValue が省略されている場合、「this」の値は「undefined」になります。

コールバックパラメータリスト:

パラメータオプションですか?説明する
パラメータ1要素必須現在の要素
パラメータ2索引オプション現在の要素のインデックス値
パラメータ3配列オプションフィルタが呼び出される配列

thisValue のパラメータ:

callbackが実行されるときにthisに使用する値。

戻り値:

これは、元の配列の各要素に対してコールバック関数を実行した結果で構成される新しい配列です。

例:

number = [1, 2, 3].map(item => item + 1) とします。

console.log(長さ); // 2, 3, 4

4. ソート()

説明する:

map()メソッドは元の配列を変更して要素の順序を変更します。

注:デフォルトの並べ替え順序は、要素を文字列に変換してから、UTF-16 コード単位の値のシーケンスを比較する場合です。

文法:

Array.sort(比較関数)


パラメータ:

compareFunction

パラメータオプションですか?説明する
パラメータ1比較関数オプションソート順を指定する関数。省略した場合、要素は変換された文字列内の文字の Unicode 位置に従ってソートされます。

compareFunctionのパラメータリスト:

パラメータオプションですか?説明する
パラメータ1ファーストエル必須比較する最初の要素。
パラメータ2セカンドエル必須比較する2番目の要素。

compareFunction 戻り値

2つの値の順序を示す数値を返します

  • a が b より小さい場合、ソートされた配列内で a は b の前に出現し、0 未満の値が返されます。
  • a が b と等しい場合は 0 を返します。
  • a が b より大きい場合は、0 より大きい値を返します。

戻り値:

戻り値はソートされた配列ですが、元の配列が変更されるため、戻り値は通常無視されます。

例:

number = [1, 2, 3].map(item => item + 1) とします。

console.log(長さ); // 2, 3, 4

5. 減らす()

説明する:
reduce()メソッドは、配列内の削除された要素や値が割り当てられていない要素を除外して、配列内の各要素に対してコールバック関数を順番に (昇順で) 実行します。その結果を値として評価します。

注: Reduce() は関数 compose の高階関数として使用できます。

文法:

Array.reduce(コールバック(アキュムレータ、現在の値、インデックス、配列)、初期値)


パラメータ:

callbackinitialValue

パラメータオプションですか?説明する
パラメータ1折り返し電話必須配列内の各配列要素に対して関数を実行します (initialValue がない場合、最初の値は変更関数を実行しません)。4 つのパラメータを受け取ります。
パラメータ2初期値オプションコールバック関数の初期値

コールバックパラメータリスト:

パラメータオプションですか?説明する
パラメータ1アキュムレータ必須アキュムレータはコールバックの戻り値を累積します。これは、コールバックへの最後の呼び出しによって返された累積値、つまり initialValue です。
パラメータ2現在の値必須現在の要素
パラメータ3索引オプション現在の要素のインデックス値
パラメータ4配列オプションReduce() が呼び出される配列

initialValueのパラメータ:

callback関数が最初に呼び出されたときに最初の引数として使用される値。 初期値が指定されていない場合は、配列の最初の要素が初期値として使用されます。 初期値のない空の配列に対してreduceを呼び出すと、エラーが発生します。

戻り値:

関数累積処理の結果は、すべてのcallback関数がaccumulator後に実行されます。

注:リデューサー関数の戻り値はアキュムレータに割り当てられ、配列の各反復で記憶され、最終的な単一の結果値になります。

例:

数値を[1, 2, 3, 4]とします。

結果を number.reduce((sum, current) => sum + current, 0); とします。

console.log(結果); // 10

6. 各()

説明する:

Reduce() メソッドは、配列内の削除された要素や値が割り当てられていない要素を除外して、配列内の各要素に対してコールバック関数を順番に (昇順で) 実行します。その結果を値として評価します。

注: Reduce() は関数 compose の高階関数として使用できます。

文法:

Array.forEach(コールバック(現在の値、インデックス、配列)、この値)

パラメータ:

callbackthisValue

パラメータオプションですか?説明する
パラメータ1折り返し電話必須3 つの引数を取って、配列内の各要素に対して関数を実行します。
パラメータ2この値オプションコールバックが実行されるときにこれに使用する値。
オブジェクトはこの実行のコールバックとして使用され、関数に渡されます。
thisValue が省略されている場合、「this」の値は「undefined」になります。

コールバックパラメータリスト:

パラメータオプションですか?説明する
パラメータ1現在の値必須現在の要素
パラメータ2索引オプション現在の要素のインデックス値
パラメータ3配列オプションforEach() が呼び出される配列自体

thisValue のパラメータ:

callbackが実行されるときにthisに使用する値。

戻り値:

このメソッドには戻り値はありません。

例:

数値を[1, 2, 3, 4]とします。

number.forEach((項目, インデックス, 配列) => {
 console.log(アイテム); // 1/2/3/4
});

7. メソッドリスト

メソッド属性:

方法元の配列を変更する戻り値の説明説明する
フィルター()いいえ新しいフィルタリングされた配列フィルター
地図()いいえループ後の新しい配列サイクル
選別()はいソートされた配列の場合ソート
減らす()いいえ関数が蓄積して処理した後の結果アキュムレータ
各()はい戻り値は未定義ですサイクル

JavaScript 配列の一般的なメソッドをいくつかまとめたこの記事はこれで終わりです。JavaScript 配列の一般的なメソッドに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

8. 参考文献

MDN 中国語公式サイト https://developer.mozilla.org/zh-CN/
W3School 簡体字中国語版 https://www.w3school.com.cn/

以下もご興味があるかもしれません:
  • JS 1次元配列を3次元配列に変換する方法
  • JavaScript 配列のreduce() メソッド
  • JavaScript 配列メソッドの詳細な例
  • JavaScript es6 の新しい配列メソッドの詳細な説明
  • JS配列メソッドの詳細な説明
  • JavaScript 配列メソッドの完全なリスト

<<:  将来人気が出るであろういくつかのナビゲーション方向

>>:  HTMLタグのフルネームと機能の紹介

推薦する

データベースの削除から逃走までの MySQL の徹底分析_上級編 (I) - データ整合性

1. データ整合性の概要1. データ整合性の概要データの冗長性とは、データベース内に重複したデータが...

nginx アンチホットリンクおよびアンチクローラー設定の詳細な説明

新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...

MySQL ロックの知識ポイントのまとめ

ロックの概念①. 現実世界では、鍵は外の世界から身を隠したいときに使う道具です。 ②. コンピュータ...

標準的なHTMLの書き方は、Dreamweaverによって自動的に生成されるものとは異なります。

コードをコピーコードは次のとおりです。 <!--doctype はドキュメント タイプ htm...

MySQLに必要な共通知識のまとめ

目次主キー制約一意の主キー非 Null 制約デフォルトの制約外部キー制約1NF 2NF 3NFデータ...

CSSを使用して、頻繁に表示される奇妙なボタンを簡単に実装します。

背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...

Vue の computed と watch の違いを理解する方法

目次概要計算された監視プロパティを監視する要約する概要Vue プロジェクトでは、computed と...

Google 翻訳ツール: 多言語ウェブサイトを素早く実装

Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...

HTMLでキーワードを強調表示するのに最適なソリューション

最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

Nginx の構成と HTTP 実装コード分析との互換性

OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...

Centos7 に mysql と mysqlclient をインストールする際に遭遇する落とし穴の概要

1. MySQL Yumリポジトリを追加するMySQL公式サイト>ダウンロード>MySQ...

MySQL 8.0.23のルートパスワードをリセットするための最適なソリューション

この方法は2021年2月7日に編集されました。私が使用しているバージョンは8.0.23です。事件の原...

Web デザイン スキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...