JavaScript配列の一般的なメソッドの詳細な説明

JavaScript配列の一般的なメソッドの詳細な説明

一般的な配列メソッド

  • push() メソッドは、配列の末尾に 1 つ以上の要素を追加し、配列の新しい長さを返します。
  • 追加した要素をメソッドにパラメータとして渡すと、配列の末尾に自動的に追加されます。
  • このメソッドは配列の新しい長さを戻り値として返します。
var arr = ["リトルモンク","リトルサル","リトルブタ","リトルサンド","リトルドラゴン"];
var result = arr.push("Jiang Liu","Xin Yuan","Wooden Dragon","Dao Gui","Yima");
console.log("戻り値: "+結果);
console.log("新しい配列: "+arr);

ここに画像の説明を挿入

ポップ()

このメソッドは、配列の最後の要素を削除し、削除された要素を戻り値として返すことができます。

var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];
var 結果 = arr.pop();
console.log("戻り値: "+結果);
console.log("新しい配列: "+arr);

ここに画像の説明を挿入

シフト解除()

  • 配列の先頭に1つ以上の要素を追加し、配列の新しい長さを返します。
  • 要素を先頭に挿入した後、他の要素のインデックスが順番に調整されます。
var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];
var 結果 = arr.unshift();
console.log("戻り値: "+結果);
console.log("新しい配列: "+arr);

ここに画像の説明を挿入

シフト()

配列の最初の要素を削除し、削除した要素を戻り値として使用することができます。

var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];
var 結果 = arr.shift();
console.log("戻り値: "+結果);
console.log("新しい配列: "+arr);

ここに画像の説明を挿入

スライス()

  • 配列から指定された要素を抽出するために使用できます
  • このメソッドは要素配列を変更せず、インターセプトされた要素を新しい配列にカプセル化して返します。

パラメータ:

  • 最初のパラメータ: 開始インデックスを含むインターセプションの開始位置のインデックス
  • 2 番目のパラメータ: インターセプトの終了位置のインデックス (終了インデックスを除く) (インターセプトされた配列にはこの値は含まれません)
  • 2 番目のパラメータは省略できます。その場合、開始インデックス以降のすべての要素がキャプチャされます。
    • インデックスには負の値を渡すことができます。負の値が渡された場合は後ろから前に向かって計算されます。
    • 1最後の
    • 2最後から2番目
var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];
var 結果 = arr.slice(1,3);
console.log("インターセプトされた配列: "+result);
console.log("元の配列は変更されません:"+arr);

ここに画像の説明を挿入

スプライス()

  • 配列内の指定された要素を削除するために使用できます
  • このメソッドを使用すると、元の配列に影響を与え、元の配列から指定された要素を削除し、削除された要素を戻り値として使用します。

パラメータ

  • 最初のパラメータ: 開始位置のインデックスを示します。開始インデックスを含みます。
  • 2 番目のパラメータ: 終了インデックスを除いた削除数を示します (配列はインターセプションに含まれません)
var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];
var 結果 = arr.splice(1,3);
console.log("削除された要素: "+result);
console.log("元の配列は変更されます:"+arr);

ここに画像の説明を挿入

  • 3番目のパラメータ以降: いくつかの新しい要素を渡すことができ、開始位置インデックスの前にhiが自動的に挿入されます。
var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];
var result = arr.splice(1,2,"孙悟空","猪八戒");
console.log("削除された要素: "+result);
console.log("元の配列は変更されます:"+arr);

ここに画像の説明を挿入

配列要素の重複排除

var arr = [1, 1, 5, 6, 4, 5, 2, 3, 7, 9, 4, 4, 4, 1];
(i = 0 とします; i < arr.length; i++) {
    (j = i + 1 とします; j < arr.length; j++) {
        もし (arr[i] === arr[j]) {
            arr.splice(j, 1); //現在の位置 j にある要素 j を削除します --; //要素 j を削除すると、次の要素が自動的にその位置を埋めるので、位置 j で再度比較する必要があります}
    }
}
コンソールにログ出力します。

連結()

  • このメソッドは、2 つ以上の配列を連結し、新しい配列を返すことができます。
  • このメソッドは元の配列には影響しません。
var arr1 = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];
var arr2 = ["Tang Monk","Sun Wukong","Zhu Bajie","Sha Monk","White Dragon Horse"];

var result = arr1.concat(arr2,"Mind wandering");
console.log("新しい配列: "+結果);

ここに画像の説明を挿入

参加する()

  • このメソッドは配列を文字列に変換できます。
  • このメソッドは元の配列には影響を与えませんが、結果として変換された文字列を返します。
  • join()では、文字列をパラメータとして指定することができます。この文字列は配列内の要素のコネクタになります。コネクタを指定しない場合、デフォルトのコネクタは、
var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];

var 結果 = arr.join("-");
console.log("新しい配列: "+結果);
console.log("結果のタイプは: "+typeof(result));

ここに画像の説明を挿入

逆行する()

  • このメソッドは配列を反転するために使用されます(前の要素は後ろに、後ろの要素は前に移動されます)
  • この方法は元の配列に影響します
var arr = ["川の流れ","猿の心","木製の龍","ナイフの鋭さ","意図的な馬"];

arr.reverse();
console.log("反転後のarr配列: "+arr);

ここに画像の説明を挿入

選別()

このメソッドは配列内の要素をソートできます。このメソッドは元の配列に影響を与え、デフォルトでは Unicode エンコーディングに従ってソートされます。

var arr = ["a","d","g","f","k",'v',"d","x"];
ソート
console.log("ソートされたarr配列: "+arr);

ここに画像の説明を挿入

純粋な数値の配列であっても、sort() を使用すると Unicode エンコーディングに従ってソートされるため、数値をソートすると誤った結果が返される可能性があります。

var arr = [2,14,12,3,5,53,7,31,13];
ソート
console.log("ソートされたarr配列: "+arr);

ここに画像の説明を挿入

独自の並べ替えルールを指定できます

ソートルールを指定するためにsort()にコールバック関数を追加する

コールバック関数では2つのパラメータ(a、b)を定義する必要があります。

ブラウザは配列内の要素を引数として使用してコールバック関数を呼び出します。

ブラウザはコールバック関数の戻り値に基づいて要素の順序を決定します。

  • 0 より大きい値が返された場合、要素は交換されます。
  • 0 未満の値が返された場合、要素の位置は変更されません。
  • 0 が返された場合、2 つの要素は等しいとみなされ、位置は交換されません。
  • 昇順が必要な場合は、a - b を返します。
  • 降順ソートが必要な場合は、b - a を返す。
var arr = [2, 14, 12, 3, 5, 53, 7, 31, 13];
arr.sort(関数(a, b) {
   return a - b; // 昇順 //return b - a; 降順 });
console.log("ソートされた arr 配列: " + arr);

ここに画像の説明を挿入

要約する

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

以下もご興味があるかもしれません:
  • JavaScript 配列メソッドの完全なリスト
  • JS 1次元配列を3次元配列に変換する方法
  • JavaScript 配列メソッドの詳細な例
  • JS配列メソッドの詳細な説明
  • js 配列 fill() 充填メソッド
  • JavaScriptの配列メソッドについて学びましょう

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

>>:  MySQL全文検索の使用例

推薦する

SQL ROW_NUMBER() および OVER() メソッドのケーススタディ

構文フォーマット: row_number() over(partition by grouping ...

両端の CSS レイアウトのサンプルコード (親の負のマージンを使用)

最近、開発中に両端が揃ったレイアウトに遭遇しました。レイアウトはパーセンテージに基づいていました。以...

Tomcat の構成と最適化ソリューションの詳細な説明

サービス.xml Server.xml 構成ファイルは、コンテナー全体を構成するために使用されます。...

MySQL REVOKE でユーザー権限を削除する

MySQL では、REVOKE ステートメントを使用してユーザーの特定の権限を削除できます (ユーザ...

Javascript イベントキャプチャとバブリングメソッドの詳細な説明

目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...

vue data が関数である理由をご存知ですか?

公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...

JavaScript offsetParent のケーススタディ

1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親...

Dockerの動作モードと原理の詳細な説明

次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...

CSS3 はクールな 3D 回転遠近法効果を実現します

CSS3はクールな3D回転パースペクティブを実現します3D アニメーション効果はますます人気が高まっ...

JavaScript オブジェクト指向の実践の詳細説明: カプセル化とオブジェクトのドラッグ

目次概要1. DOM要素をアニメーション化する方法2. 現在のブラウザでサポートされている変換互換の...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

レスポンシブ Web デザインが価値のない 5 つの理由

この記事は Tom Ewer の Managewp ブログからのもので、現在人気のレスポンシブ デザ...

Vueでフォーム検証を実装する方法

1. インストールと使用まず、Vue プロジェクトにインストールします。 npm インストール --...

Linux ファイル/ディレクトリの権限と所有権の管理

1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...

Dockerはローカルイメージとコンテナの保存場所を設定します

指定したサイズより大きいファイルを検索するには、find コマンドを使用します。 検索 / -typ...