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

推薦する

HTML におけるメタの役割について (インターネットから収集および分類)

W3Cschoolではこのように説明しています<meta> 要素は、検索エンジン向けの説...

Centos7 で crontab + シェル スクリプトによる定期的な自動ファイル削除の問題を解決する

問題の説明:最近、rsyncで毎回同期するデータ量が多いが、データベースのbakファイルを保持する必...

Linuxはnode.jsを完全に削除し、yumコマンドで再インストールします。

最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

DOM操作テーブルの例(DOMはテーブルを作成します)

1. HTML タグを使用してテーブルを作成します。コードをコピーコードは次のとおりです。 <...

Vue シングルページ SEO の 4 つのソリューションについての簡単な説明

目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...

Ubuntu 18.04 に MySQL をインストールする (グラフィカル チュートリアル)

ヒント: 以下の操作はすべて root 権限で実行されます。 # MySQL がインストールされてい...

CentOSはローカルyumソース/Alibaba Cloud yumソース/163yuanソースを設定し、yumソースの優先順位を設定します。

1. Centosイメージを使用してローカルのyumソースをビルドするCentOS をインストール...

Linux で iostat コマンドを使用するチュートリアル

序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...

RGBAアルファ透明度変換計算表

IEでのRGBAとフィルター値の変換RGBA 透明度値IE フィルター値0.1 19 0.2 33 ...

海外の無料写真素材サイトベスト9

良い画像素材のウェブサイトを見つけるのは難しいです。特に無料です。良い写真には非常に目を引く視覚効果...

フレックスレイアウトは、1行あたりの固定行数と適応レイアウトを実現します。

この記事では、1行あたりの固定行数+アダプティブレイアウトを実現するフレックスレイアウトを紹介し、皆...

データベースの水平セグメンテーションを実装するための2つのアイデア

導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...

MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル (Windows 10 版)

この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...

MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...