JavaScript es6 の新しい配列メソッドの詳細な説明

JavaScript es6 の新しい配列メソッドの詳細な説明

1. 各()

戻り値なしで配列を走査します。戻り値があっても値は返されず、元の配列に影響します。

コールバックパラメータ

value -- 現在のインデックスの値

index --index

arr -- 元の配列

		arr = ["a", "b", "c", 1, 2, 3]とします。
        
        arr.forEach((値, インデックス, arr) => {
            console.log(値、インデックス、arr);
        })

出力:

ここに画像の説明を挿入

2. arr.filter()

配列をフィルタリングし、要件を満たす配列を返します

コールバックパラメータ:

value -- 現在のインデックスの値

index --index

arr = [1,2,3,4,5]とする
arr1 = arr.filter( (値、インデックス) => 値%2 === 0) とします。
console.log(arr1) // [2, 4]

3. arr.every()

判定条件に従って、配列のすべての要素が要件を満たしているかどうかを確認し、満たしている場合はtrueを返します。

コールバックパラメータ:

value -- 現在のインデックスの値

index --index

arr = [1,2,3,4,5]とする
arr1 = arr.every( (値、インデックス) =>値<2) とします。
console.log(arr1) // 偽
arr2 = arr.every( (値、インデックス) =>値<6) とします。
console.log(arr2) // 真

4. arr.map()

配列をマップし (配列を走査し)、新しい配列を返します。

コールバックパラメータ:

value -- 現在のインデックスの値

index --index

array -- 元の配列

arr = [1,2,3,4,5]とする
arr.map( (値,インデックス,配列)=>{
        値 = 値 * 2
        console.log(`値:${値} インデックス:${インデックス} 配列:${配列}`)
})   
コンソールログ(arr)

結果:

ここに画像の説明を挿入

var arr1 = [1,2,3,4]; 
var res1 = arr1.map((item,index,arr)=>{ 
 アイテム = アイテム * 3; 
 返品商品; 
})
console.log(arr1); // [1,2,3,4]
コンソール.log(res1); // [3,6,9,12]

5. arr.some()

判定条件に従って、配列の要素の1つが条件を満たすかどうか、条件を満たす場合はtrueを返す

コールバックパラメータ:

value -- 現在のインデックスの値

index --index

arr = [1,2,3,4,5]とする
arr1 = arr.some( (値、インデックス) => 値 < 3) とします。
console.log(arr1) // 真
arr2 = arr.some( (値、インデックス) => 値 > 6) とします。
console.log(arr2) // 偽

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • ES6メソッドを含むJavaScriptの一般的な配列操作メソッド
  • 2つの配列オブジェクトを一致させるes6 jsメソッド

<<:  フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介

>>:  Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

推薦する

phpmyadmin を使用して MySQL 権限を設定する方法

目次ステップ 1: root ユーザーとしてログインします。ステップ 2: 新しいデータ テーブルを...

IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明

目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

HTML ページ共通スタイル (推奨)

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピーbody、di...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...

MySQL Innodbインデックスの原理の詳細な説明

導入振り返ってみると、4年前、私がMySQLのインデックスについて学んでいたとき、先生はインデックス...

Apache SkyWalking アラーム設定ガイドの詳細な説明

アパッチ スカイウォーキングApache SkyWalking は、マイクロサービス、クラウド ネイ...

docker を使用してシンプルな C/C++ プログラムをデプロイする方法

1. まずhello-world.cppファイルを作成しますプログラムコードは次のとおりです。 #i...

MySQLビューの原理と使用法の詳細な説明

この記事では、例を使用して MySQL ビューの原理と使用方法を説明します。ご参考までに、詳細は以下...

Dockerイメージの階層化の原理の詳細な説明

ベースイメージベースイメージには 2 つの意味があります。他のイメージに依存せず、ゼロから構築します...

要素の$notifyポイントについての簡単な説明

当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでし...

Winにmysqlをインストールする詳細な手順

この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...

MySQL で数千万のテストデータを含むテストデータベースを作成する方法

場合によっては、MySQL が公式に提供しているテスト ライブラリに基づいてテスト データを作成し、...

JavaScript でウェブ プレーヤーを実装する

今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。誰...