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全文検索の使用例

推薦する

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...

Mysql データベースの高度なビュー、トランザクション、インデックス、自己接続、ユーザー管理の例の分析の使用

この記事では、ビュー、トランザクション、インデックス、自己接続、ユーザー管理など、MySQL データ...

CSS における位置指定の概要

CSS には 4 種類の配置方法があり、シナリオによって効果が異なります。ここでは、これら 4 種類...

LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します

今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...

mysql バックアップ スクリプトを作成し、7 日間保存します。

スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...

マウスをホバーすると画像が折りたたまれる効果を実現する CSS

マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...

幅の比率に応じて高さを変えるCSSを実装するいくつかの方法

[解決策1: パディングの実装]原理:要素の padding の値がパーセンテージの場合、このパーセ...

WAMPにインストールするとMySQLが起動できるが、再起動後に起動できなくなる問題の解決方法

初めてwampをインストールした後、すべてのサービスが正常に使用できますが、再起動するとwampのア...

Linux サーバーでの MySQL インストール情報の表示

mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...

Docker+nextcloudで個人用クラウドストレージシステムを構築

1. Dockerのインストールと起動 yum で epel-release をインストールします ...

iframeをカプセル化するvueコンポーネントを開発する

目次1. コンポーネントの紹介2. コンポーネントの内部構造とロジック1. コード組織構造2. マッ...

Vueはマルチタブコンポーネントを実装します

効果を直接確認するために、リロード、左を閉じる、右を閉じる、その他の機能を閉じるなどの右クリック メ...

ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...

Vue組み込みコンポーネントのキープアライブの使用例

目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...