よく使われるJavaScript配列メソッド

よく使われるJavaScript配列メソッド

1. フィルター()

文法:

配列.filter(関数(現在の値、インデックス、arr)、この値)

パラメータの説明:
currentValue : 現在の要素オブジェクト (必須)
index : 現在の要素のインデックス値(オプション)
arr : 現在の要素が属する配列オブジェクト(オプション)
thisValue : コールバックの実行時に「this」値として使用される関数に渡されるオブジェクト。
thisValueが省略されている場合、「 this 」の値は「 undefined 」になります (オプション)

//年齢が10より大きい要素をフィルタリングします。var ages = [5, 32, 7, 10, 33, 12, 40]; 
var res = ages.filter(関数(現在の値) { 
  現在の値 > 10 を返します。 
}) 
コンソールにログ出力します。 
// 出力: 32,33,12,40 
 
//矢印関数の記述 var res1 = ages.filter(item => item > 10) 
コンソールにログ出力します。 


出力:

32,33,12,40

2. 各()

文法:

array.forEach(関数(現在の値、インデックス、arr)、この値)

パラメータの使用方法は上記と同じです

//各パラメータをループして出力します var ages = [5, 32, 7, 10, 33, 12, 40]; 
年齢.forEach(関数(現在の値、インデックス) { 
  console.log("パラメータ:" + 現在の値 + "インデックス:" + インデックス); 
}) 
 
 
//矢印関数の記述 ages.forEach((item, index) => { 
  console.log("パラメータ:" + 項目 + "インデックス:" + インデックス); 
}) 


次のコードを見てみましょう。

//10を20に変更 
var 年齢 = [5, 32, 7, 10, 33, 12, 40]; 
年齢.forEach(関数(現在の値、インデックス) { 
  (現在の値 === 10)の場合{ 
    年齢[インデックス] = 20 
    戻る 
  } 
  コンソールログ(インデックス); 
}) 
 
console.log(経過時間); 


コード内の値を 10 から 20 に変更した後、 returnを追加しましたが、実行結果では依然として index の値が 7 回出力されていることが示されました。これは、ループが終了したときにのみ停止できる forEach の欠点です。それで、どうやって解決するのでしょうか?

3. いくつか()

文法:

配列.some(関数(現在の値、インデックス、arr)、この値)
パラメータの使用方法は上記と同じです

//10を20に変更 
var 年齢 = [5, 32, 7, 10, 33, 12, 40]; 
年齢.some(関数(現在の値、インデックス) { 
  (現在の値 === 10)の場合{ 
    年齢[インデックス] = 20 
    真を返す 
  } 
  コンソールログ(インデックス); 
}) 
 
console.log(経過時間); 
 
// 10 を 20 に変更する矢印関数 var ages = [5, 32, 7, 10, 33, 12, 40]; 
年齢.some((項目, インデックス) => { 
  (項目 === 10)の場合{ 
    年齢[インデックス] = 20 
    真を返す 
  } 
  コンソールログ(インデックス); 
}) 
 
console.log(経過時間); 


上記のコードを実行すると、 indexの値が 3 回だけ出力されます。forEach forEach()の欠点は、 some方法によって完全に解決できます。開発プロセス中に、必要に応じて選択できます。

4. すべて()

文法:

配列.every(関数(現在の値、インデックス、arr)、この値)
パラメータの使用方法は上記と同じです

// 各要素の値が4より大きいかどうかを確認します 
var 年齢 = [5, 32, 7, 10, 33, 12, 40]; 
 
 
var res = ages.some(関数(現在の値) { 
  現在の値>4を返す 
}) 
コンソールログ(res); 
// 出力: true 
 
//矢印関数 var res = ages.some(item => item > 4) 
コンソールログ(res); 

5. 減らす()

文法:

配列.reduce(関数(合計、現在の値、現在のインデックス、arr)、初期値)

パラメータの説明:

total : 必須。初期値、または計算が完了した後の戻り値。
currentValue : 必須。現在の要素
currentIndex : オプション。現在の要素のインデックス
arr : オプション。現在の要素が属する配列オブジェクト。
initialValue : オプション。関数に渡される初期値

//すべての要素の合計を計算します var numbers = [15.5, 2.3, 1.1, 4.7]; 
var res = numbers.reduce(関数 (total, currentValue) { 
  合計 += 現在の値を返す 
}, 0) 
 
コンソールログ(res); 
//23.6 
 
//4より大きい要素の合計を計算します var result = numbers.filter(item => item > 4).reduce((total, item) => total += item, 0) 
console.log(結果); 
//20.2 

6. 配列を結合する

使用法: var arr = [...array1,...array2]
結果: 配列2の要素値が配列1の要素値に連結されます

var arr = [1, 2, 3] 
var arr2 = [4, 5, 6] 
 
var res = [...arr, ...arr2] 
コンソールログ(res); 
// 出力: [1, 2, 3, 4, 5, 6] 
 
var res = [...arr2, ...arr] 
コンソールログ(res); 
// 出力: [4, 5, 6, 1, 2, 3] 

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

以下もご興味があるかもしれません:
  • JavaScriptで配列を作成する方法の詳細な説明
  • JavaScript es6 の新しい配列メソッドの詳細な説明
  • JS配列メソッドの詳細な説明
  • JavaScript配列の一般的なメソッドの詳細な説明
  • JavaScript配列の一般的なメソッドの概要
  • JavaScript における一般的な配列操作
  • JavaScript 配列メソッドの詳細な例

<<:  nginx で同時接続リクエストの数を制限する方法

>>:  MySQL のソートとページング (order by と limit) と既存の落とし穴

推薦する

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...

MySQL で重複時間を削除して時間差を計算する実装

目次必要:ドライブ:アイデア:成し遂げる:個人的には、実際の開発ではストアド プロシージャの使用はお...

VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。

この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッ...

MySQL Community Server 圧縮パッケージのインストールと設定方法

今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...

JS を使用して要素が配列であるかどうかを判断する例

検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

Ubuntu の Python で C/C++ メソッドを呼び出すダイナミック リンク ライブラリの詳細な説明

ブーストをインストールPython から C/C++ を呼び出す方法はたくさんあります。この記事では...

Pure CSS と Flutter はそれぞれブリージング ライト効果を実現します (サンプル コード)

前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...

Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。

目次Portainerは複数のDockerコンテナ環境を管理します2. Dockerを管理する2.1...

1 つの記事で Apache Avro データを解析する

概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

MySQL 文字列分割の例 (区切り文字なしの文字列抽出)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

MySQL トリガーの基本的な使い方(作成、表示、削除など)の詳細な説明

目次1. MySQLトリガーの作成: 1. MySQLトリガー作成構文: 2. MySQL作成構文の...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...