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

推薦する

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...

60件のページング事例と優れた実践例を推奨

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

フロントエンド JavaScript におけるリフレクションとプロキシ

目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

HTML/CSS におけるフロートの使用例の詳細

1. floatの基本的な使用例1. まず 2 つの div ボックスを作成し、高さ、幅、背景色を設...

CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...

Linux で Xfce デスクトップ環境を使用すべき 8 つの理由

いくつかの理由(好奇心も含む)から、数週間前に Linux デスクトップとして Xfce を使い始め...

テキストエリアのテキストをHTMLに変換する方法、つまり復帰改行について

説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...

CSS 要約ノート: 変換、遷移、アニメーションの例

1.移行遷移プロパティの使用法: transition :transition-property t...

Python ベースの MySQL レプリケーション ツールの詳細な説明

目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...

一般的な Linux ツール vi/vim の完全版

なぜvimを学ぶのかLinuxには多数の設定ファイルがあるため、Linuxには多くのテキスト処理ツー...

ハイパーリンクAタグを学ぶ

聞く: CSS を使用してハイパーリンクのスタイルを設定しましたが、ホバーしても機能しません。なぜこ...

Apache ソースコードのインストールと仮想ホストの設定に関する詳細なチュートリアル

ソースからApacheをインストールする1. Apacheソースコードをアップロードして必要なソフト...

VMware Workstation Pro は Win10 ピュア バージョンのオペレーティング システムをインストールします

この記事では、VMware Workstation Pro で Win10 オペレーティング システ...