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

推薦する

ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...

Linux の一般的なコマンドとショートカット キーの紹介

目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....

MySQL ページング制限の実用的な最適化

序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...

JVMシリーズのメモリモデルの詳細な説明

目次1. メモリモデルとランタイムデータ領域2. マインドマップと凡例3. オブジェクトはJVMから...

CSS クリアフロートクリア:both サンプルコード

今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理...

完全なMySQL学習ノート

目次MyISAM と InnoDBパフォーマンスの低下と SQL の速度低下の理由: MySQL 実...

Reactフックの仕組み

目次1. React フックと純粋関数2. シンプルなmyUseState 3. myUseStat...

inline-blockプロパティとの互換性

<br />1年前、インターネット上にはinline-blockプロパティに関する記事は...

Node.js でのクラスター作成に関する簡単な説明

目次クラスタクラスターの詳細クラスター内のイベントクラスター内のメソッドクラスター内の属性クラスター...

mysql5.7.18 解凍バージョンで mysql サービスを起動します

mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...

重要なmysqlログファイルの概要

著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...

フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法

序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われています。これは HTML 言...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...

パズル効果を実現するネイティブ js

この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的...