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

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

1. JavaScriptで配列を作成する方法

(1)配列コンストラクタを使用する:

var arr1 = new Array(); // 空の配列を作成 var arr2 = new Array(10); // 20 個の項目を持つ配列を作成 var arr3 = new Array("zs","ls","ww"); // 3 つの文字列を持つ配列を作成

(2)配列リテラル表記を使用する:

var arr4 = []; // 空の配列を作成する var arr5 = [10]; // 1 つの項目を持つ配列を作成する var arr6 = ["zs","ls","ww"]; // 3 つの文字列を持つ配列を作成する

2. 配列メソッドの概要

メソッド名関数元の配列が変更されたかどうか
参加する()セパレータを使用して配列を文字列に変換し、それを返します。
ポップ()最後の桁を削除し、削除されたデータを返しますええ
シフト()最初のビットを削除し、削除されたデータを返しますええ
押す最後に1つ以上のデータを追加し、長さを返しますええ
シフト解除()最初の位置に1つ以上のデータを追加し、長さを返します。ええ
連結()配列を結合し、結合されたデータを返す
スライス()指定された位置で配列をインターセプトして返します
選別()並べ替え(文字ルール)、結果を返すええ
逆行する()配列を反転して結果を返すええ
文字列を変換する()直接文字列に変換して返す
スプライス()指定された場所を削除し、置き換え、削除されたデータを返しますええ
値()配列オブジェクトのプリミティブ値を返します
インデックス()データのインデックスをクエリして返す
最後のインデックス()逆クエリを実行し、データのインデックスを返します
各()パラメータはコールバック関数であり、配列内のすべての項目を走査します。コールバック関数は、value、index、self の 3 つのパラメータを受け入れます。forEach には戻り値はありません。
地図() forEachと同じですが、コールバック関数はデータを返し、mapによって返される新しい配列を形成します。
フィルター() forEach と同じですが、コールバック関数はブール値を返します。true のデータは新しい配列を形成し、フィルターによって返されます。
毎() forEach と同じですが、コールバック関数はブール値を返します。すべてが true の場合、every は true を返します。
いくつかの() forEach と同じですが、コールバック関数はブール値を返します。そのうちの 1 つが true である限り、some は true を返します。
減らす() MergeはforEachと同様に、配列内のすべての項目を反復処理し、最終的な値を構築します。この値はreduceによって返されます。
右を減らす()逆マージはforEachと同じで、配列内のすべての項目を反復処理し、reduceRightによって返される最終値を構築します。
インデックスを見つける()

条件を満たす配列の最初の要素のインデックスを見つけて、トラバースを停止します。

3. 方法の詳細な説明

1.結合()

機能: 指定された区切り文字に従って配列内のすべての要素を文字列に格納し、その文字列を返します。

パラメータ: join(str); パラメータはオプションで、デフォルトでは "," に設定され、渡された文字が区切り文字として使用されます。

    var arr = [1,2,3];
    console.log(arr.join()); //1,2,3
    console.log(arr.join("-")); //1-2-3

join() メソッドを使用すると、文字列を繰り返すことができます。文字列と繰り返し回数を渡すだけで、繰り返される文字列が返されます。関数は次のとおりです。

関数 repeatString(str, n) {
新しい配列(n + 1).join(str)を返します。
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi

2.ポップ()

pop(): 配列の末尾から最後の項目を削除し、配列の長さを減らしてから、削除した項目を返します。

ar ar = [1,2,3];
コンソールログ(arr.pop()); //3
console.log(arr); //[1,2]---元の配列の変更

3.シフト()

機能: このメソッドは、配列の最初の要素を削除して返すために使用されます。

var arr = [1,2,3]
コンソールログ(arr.shift()); //1
console.log(arr); //[2,3]---元の配列の変更

4. プッシュ()

機能: 配列の末尾に 1 つ以上の要素を追加し、新しい長さを返します。

var arr = [1,2,3];
console.log(arr.push("hello")); //4
console.log(arr); //[1,2,3,"hello"]---元の配列の変更console.log(arr.push("a","b")); //6
console.log(arr); //[1,2,3,"hello","a","b"]---元の配列の変更

5.シフト解除()

機能: 配列の先頭に 1 つ以上の要素を追加し、新しい長さを返します。

var arr = [1,2,3];
console.log(arr.unshift("hello")); //4
console.log(arr); //["hello",1,2,3]---元の配列の変更 console.log(arr.unshift("a","b")); //6
console.log(arr); //["a","b","hello",1,2,3]---元の配列の変更

6.連結()

機能: 元の配列にパラメータを追加します。このメソッドは、まず現在の配列のコピーを作成し、次に受け取ったパラメータをコピーの末尾に追加し、最後に新しく構築された配列を返します。 concat() メソッドに引数が渡されない場合、現在の配列がコピーされ、そのコピーが返されます。

定数arr1 = [1,2,3];
定数arr2 = [4,5,6];
arr3 を arr1 と連結します。
console.log(arr3); //[1,2,3,4,5,6]

7. スライス()

機能: 元の配列の指定された開始添え字から終了添え字までの項目で構成される新しい配列を返します。

slice() メソッドは、返される項目の開始位置と終了位置の 1 つまたは 2 つのパラメーターを受け入れることができます。引数が 1 つだけの場合、slice() メソッドは引数で指定された位置から現在の配列の末尾までのすべての項目を返します。 2 つの引数が指定された場合、メソッドは開始位置と終了位置の間にある項目を返しますが、終了位置は含まれません。

var arr = [1,3,5,7,9,11];
var arrCopy1 = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 =​​ ​​arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11] (元の配列は変更されません)
console.log(arrCopy1); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

8.ソート()

機能: 配列内の要素を、デフォルトでは昇順で並べ替えます。

var arr = [6,1,5,2,3];
console.log(arr.sort()); //[1, 2, 3, 5, 6]
console.log(arr); //[1, 2, 3, 5, 6]---元の配列の変更

9.逆()

機能: 配列項目の順序を逆にします。

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13] (元の配列が変更されます)

10.toString() メソッド

機能: パラメータなしの join() と同様に、文字列に変換します。このメソッドは、データが暗黙的な型変換を受けるときに自動的に呼び出されます。手動で呼び出された場合は、直接文字列に変換されます。

var arr = [1,2,3];
console.log(arr.toString()); //1,2,3
console.log(arr); //[1,2,3]---元の配列は変更されていません

11.スプライス()

機能: 削除、挿入、置換を実現できる、さまざまな用途を持つ非常に強力な配列メソッドです。

削除: 削除する最初の項目の位置と削除する項目の数という 2 つのパラメータを指定するだけで、任意の数の項目を削除できます。たとえば、splice(0,2) は配列の最初の 2 つの項目を削除します。

挿入: 開始位置、0 (削除する項目の数)、挿入する項目の 3 つのパラメータのみを指定することで、指定した位置に任意の数の項目を挿入できます。たとえば、splice(2,0,4,6) は、現在の配列の位置 2 から 4 と 6 を挿入します。

置換: 指定した位置に任意の数の項目を挿入し、同時に任意の数の項目を削除できます。開始位置、削除する項目の数、挿入する項目の数の 3 つのパラメータを指定するだけです。挿入されたアイテムの数は、削除されたアイテムの数と同じである必要はありません。たとえば、splice (2,1,4,6) は、現在の配列の位置 2 にある項目を削除し、位置 2 から 4 と 6 を挿入します。

splice() メソッドは常に、元の配列から削除された項目を含む配列を返します。項目が削除されなかった場合は空の配列を返します。

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

12.値()

機能: 配列の元の値 (通常は配列自体) を返します。これは通常、js によってバックグラウンドで呼び出され、コード内に明示的に表示されません。

var arr = [1,2,3];
console.log(arr.valueOf()); //[1,2,3]
console.log(arr); //[1,2,3]
//配列自体が返されることを証明するには console.log(arr.valueOf() == arr); //true

13.インデックス()

機能: 配列内の指定されたデータの位置を左から右に照会します。指定されたデータが存在しない場合は -1 を返します。このメソッドはクエリメソッドであり、配列を変更しません。

パラメータ: indexOf(value, start); value はクエリするデータです。start はオプションで、クエリの開始位置を示します。start が負の数の場合、配列の末尾から前方にカウントします。値が見つからない場合、メソッドは -1 を返します。

var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l")); //2
console.log(arr.indexOf("l",3)); //3
console.log(arr.indexOf("l",4)); //-1
console.log(arr.indexOf("l",-1)); //-1
console.log(arr.indexOf("l",-3)); //2

14.最後のインデックス()

機能: 配列内の指定されたデータの位置を右から左に照会します。指定されたデータが存在しない場合は -1 を返します。このメソッドはクエリメソッドであり、配列を変更しません。

パラメータ: lastIndexOf(value, start); value はクエリするデータです。start はオプションで、クエリの開始位置を示します。start が負の数の場合、配列の末尾から前方にカウントします。value が見つからない場合、メソッドは -1 を返します。

var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l")); //3
console.log(arr.lastIndexOf("l",3)); //3
console.log(arr.lastIndexOf("l",1)); //-1
console.log(arr.lastIndexOf("l",-3)); //2
console.log(arr.lastIndexOf("l",-4)); //-1

15. 各()

機能: 配列をループし、配列内の各項目に対して指定された関数を実行します。このメソッドには戻り値はありません。

パラメータ: すべて関数型で、パラメータはデフォルトで渡されます。パラメータは、走査する配列の内容、対応する配列インデックス、および配列自体です。

var arr = [1, 2, 3, 4, 5];
arr.forEach(関数(x, インデックス, a){
console.log(x + '|' + インデックス + '|' + (a === arr));
});
// 出力は次のようになります:
// 1|0|真
// 2|1|真
// 3|2|真
// 4|3|真
// 5|4|真

16.マップ()

機能: 配列内の各項目に対して指定された関数を実行し、各関数呼び出しの結果で構成される配列を返します。

配列内のすべての値を変更したい場合は、mapを使用します。

 arr = [10, 30, 50, 60, 120, 230, 340, 450]とします。
        newArr = arr.map(n => { とする
            n * 2を返す
        })
        コンソールにログ出力します。

17.フィルター()

機能: フィルター。配列内の各項目に対して指定された関数を実行し、フィルター条件を満たす配列を返します。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(関数(x, インデックス) {
インデックス % 3 === 0 || x >= 8 を返します。
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

18.すべて()

機能: 配列内の各項目が条件を満たしているかどうかを判断します。すべての項目が条件を満たしている場合にのみ true が返されます。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(関数(x) {
x < 10 を返します。
}); 
console.log(arr2); //true
var arr3 = arr.every(関数(x) {
x < 3 を返します。
}); 
console.log(arr3); // 偽

19.いくつか()

機能: 配列内に条件を満たす項目があるかどうかを判断します。条件を満たす項目が 1 つでもある限り、true を返します。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(関数(x) {
x < 3 を返します。
}); 
console.log(arr2); //true
var arr3 = arr.some(関数(x) {
x < 1 を返します。
}); 
console.log(arr3); // 偽

20.削減()

機能: 配列の最初の項目から始めて、最後まで 1 つずつ走査し、配列のすべての項目を反復処理して、最終的な戻り値を構築します。

パラメータ:

最初のパラメータは、accumulatorは現在の集計値です。

2番目のパラメータは、配列をループするときの現在の要素です。

3番目のパラメータは、配列要素のインデックス値です。

4番目のパラメータは配列そのものです

int: アキュムレータの初期値であり、自分で設定できます

最初の 2 つのパラメータは通常使用され、最後の 2 つのパラメータは一般的に使用されません。最も一般的な使用シナリオは、配列の合計です。

 // 機能: 配列内のすべての内容を要約するには、少なくとも2つの値を渡す必要があります。let arr = [10, 30, 50, 60, 120, 230, 340, 450]
        newArr = arr.reduce((pre, n) => { とする
            戻り値: pre + n
        }, 0)
        コンソールにログ出力します。

21.reduceRight()

機能: (reduce と同様) 配列の最後の項目から開始し、最初の項目まで 1 つずつ順方向に移動して、配列のすべての項目を反復処理し、最終的な戻り値を構築します。

パラメータ:reduce と同じです。

var arr = [1,2,3,4,5];
var sum = arr.reduceRight(function(pre, cur, index, array){
pre + cur を返します。
},10);
コンソール.log(合計); //25

22.インデックスを見つける()

機能: 指定されたテスト関数を満たす配列の最初の要素のインデックスを返します。そうでない場合は -1 を返します。

arr = [10, 2, 9, 17, 22]とします。
インデックス = arr.findIndex((item) => item > 13) とします。
console.log(インデックス); // 3

要約する

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

以下もご興味があるかもしれません:
  • js の Array.forEach でループを終了する方法の例
  • JavaScript 配列オブジェクトの使用分析
  • JavaScript配列オブジェクトの基本メソッドの詳細な説明
  • js配列オブジェクト操作メソッドのまとめ
  • JavaScript配列の一般的なメソッドの詳細な説明

<<:  Docker を使用してコンテナ内のルート パスワードを変更する方法

>>:  HTML フレーム、Iframe、フレームセットの違い

推薦する

Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する

0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...

MySQL 構成 SSL マスタースレーブ レプリケーション

MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...

SQL IDENTITY_INSERT ケーススタディ

一般的に、データ テーブル内の列を ID 列として設定すると、ID 列の表示値を手動で ID 列に挿...

CSV、Excel、SQL ファイルを MySQL にインポートするためのヒント

1. csvファイルをインポートする次のコマンドを使用します。 1.mysql> infile...

HTML TextArea でのフォーマット保存の問題の解決方法

textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...

HTML/CSSにおける記号論の詳細な説明

この記事では、ソシュールの言語哲学などの理論に基づいて、CSS の class 属性は不要であると主...

Linux での Docker のインストールと展開の例

以下の記事を読んだ後、プロジェクトをサーバーにデプロイできます。Tomcat、JDK、MySQL な...

Windows 環境での MySQL 8.0 のインストール、設定、アンインストール

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.17-wi...

CSS 8 目を引く HOVER 効果のサンプル コード

1. エフェクトHTMLを送信する <div id="送信ボタン">...

HTML でマウスが停止したときに行全体の色 (tr) を変更する方法

純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...

フロントエンドブラウザのフォントサイズが12px未満のソリューション

序文最近プロジェクトに取り組んでいたとき、UI デザインのフォント サイズは 10 ピクセルでした。...

一般的な HTTP ステータス コード 10 個の詳細な説明

HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...

初心者向けウェブサイト構築チュートリアル: 10 日間でウェブサイトの構築方法を学ぶ

10 日間のチュートリアルでは、最も理解しやすい言語を使用し、最も基本的なことから始めて、誰もが W...

テーブルの最大幅と最小幅を設定する際の互換性の問題と解決策の詳細な説明

テーブル内の min-width と max-width プロパティの設定 <テーブル>...

CSS で透明なグラデーション効果を実装するためのサンプルコード

Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...