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 マップの読み込みパフォーマンスを向上させる方法を説明します。

推薦する

インタビュアーはCSSで固定アスペクト比を実現する方法を尋ねました

この質問に関連するニーズはまだないかもしれませんし、面接でこの質問をされたことがないかもしれませんが...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...

Vueの7つの値転送メソッドの詳細な説明

1. 父から息子へ子コンポーネントにpropsフィールドを定義し、その型は配列です (フィールド値の...

MySQLログシステムの詳細情報共有

大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...

JavaScriptは入力ボックスコンポーネントを実装します

この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...

vue+elementuiは、共有箇条書きボックスの追加と変更の完全なコードを実装します。

目次1. 新しいII. 変更element-ui は、Ele.me のフロントエンド チームが開発者...

Alibaba Cloud Nginx はドメイン名アクセス プロジェクトを実装するために https を設定します (グラフィック チュートリアル)

ステップ1: サードパーティの信頼できるSSL証明書に署名するAlibaba Cloud で直接、無...

gbk utf8 GBK と UTF-8 ウェブページエンコーディングを正しく理解して使用する方法

Web ページ エンコーディングは英語では web page encoding と翻訳され、Web ...

フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

HTML+CSS でハートビートの特殊効果を作成する

今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...

MySql でデータの重複挿入を回避する 3 つの方法

序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...

要素の水平方向の中央揃えを実現する3つの方法と、固定レイアウトとフローレイアウトの概念の理解

CSS でテキストを中央揃えにするプロパティは非常に簡単に実現できます。text-align:cen...

mysql-8.0.11-winx64.zip の詳細なインストール チュートリアル

zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...