ホームページ ウェブフロントエンド jsチュートリアル JavaScript配列の追加、削除、変更、クエリ関数の実装

JavaScript配列の追加、削除、変更、クエリ関数の実装

Aug 22, 2017 pm 05:24 PM
javascript js 成し遂げる

この記事では、JS 配列の操作の追加、削除、変更、確認の簡単な実装を中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう。

JS には、配列を操作するための便利なメソッドが多数用意されています。この記事で共有したいのは、配列を素早く追加、削除、変更、確認する方法です。

1.

1を追加します。push()

は、任意の数のパラメータを受け取り、それらを配列の末尾に1つずつ追加し、変更された配列の長さを返します。例:


var arr = [];
var len = arr.push(1);
console.log(arr); // [1]
console.log(len); // 1
len = arr.push(2,3);
console.log(arr); // [1,2,3]
console.log(len); // 3
ログイン後にコピー

2、unshift()

このメソッドは、push() に似ており、任意の数のパラメータを受け取ることもできます。パラメータを配列の先頭に 1 つずつ追加するだけです。新しい配列の長さも返します。上記の例を続けてみましょう:


var len = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(len); // 4
len = arr.unshift(-2,-1);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(len);  // 6
ログイン後にコピー

3. concat()

このメソッドは、要素を配列の末尾に追加しますが、この配列は no です。長さは元の配列ですが、そのコピーであるため、 concat() は配列を操作した後に新しい配列を返します。具体的な使用法は次のとおりです:

① パラメーターは渡されず、現在の配列のコピーが返されます

② 1 つ以上の配列が渡された場合、メソッドはこれらの配列内の各項目を結果の配列に追加します

③ 配列以外のパラメーターを渡すと、これらのパラメーターは結果の配列の末尾に直接追加されます

引き続き上記の説明を続けます:


var arr1 = arr.concat(4,[5,6]);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(arr1);  // [-2, -1, 0, 1, 2, 3, 4, 5, 6]
ログイン後にコピー

この例では、元の配列が変更されていないことが明らかです。 4、5、6 が新しい配列要素に追加されます。

4. splice()

前の 3 つのメソッドはいずれも配列の前または後に追加されるため、大きな制限がありますが、splice() は非常に柔軟で強力です。配列の任意の位置に要素を追加できるため柔軟性があり、要素の追加に加えて要素の削除や置換の機能も備えているため強力です (これについては後述します)。

splice() は、配列内の指定された位置に任意の数の要素を追加できます。開始位置、0 (削除する要素の数)、および追加する要素の少なくとも 3 つのパラメーターを渡す必要があります。

上記の例を続けます:


arr.splice(3,0,0.2,0.4,0.6,0.8);
console.log(arr); // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]
ログイン後にコピー

splice() は、push() や unshift() と同様に、元の配列を直接変更していることがわかります。

2. 削除

1. Push() メソッドと組み合わせて使用​​される Pop()

このメソッドは、後入れ先出しスタックを形成できます。配列の末尾を指定して項目を返します。

上記の例を続けます:


var item = arr.pop();
console.log(item);  // 3
console.log(arr);  // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
ログイン後にコピー

2. Shift()

は、先入れ先出しキューを形成するために、push() メソッドと組み合わせて使用​​できます。配列の最初の項目を取得し、その項目を返します。

上の例を続けます:


var item = arr.shift();
console.log(item); // -2
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
ログイン後にコピー

3. このメソッドは concat() と同様に新しい配列を返し、元の配列には影響しません。配列の場合、具体的な使用法は次のとおりです:

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

上の例を続けましょう~~

var arr2 = arr.slice(2,6);
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
console.log(arr2); // [0.2, 0.4, 0.6, 0.8]
ログイン後にコピー


4. splice()

さて、この「普遍的な」メソッドについて話を続けましょう。

上で述べたように、このメソッドは配列要素を追加するときに 3 つ以上のパラメーターを渡す必要があり、2 番目のパラメーターは削除する要素の数を指定するために使用されます。その際、数値 0 を渡しました。次に、要素を削除するだけの場合は、2 つのパラメーターを splice() に渡すだけで済みます。最初のパラメーターは削除する最初の項目の位置を指定するために使用され、2 番目のパラメーターは位置を指定するために使用されます。削除する要素の番号。

上の例の続き~~

arr.splice(2,4);
console.log(arr); // [-1, 0, 1, 2]
ログイン後にコピー

インデックス項目が2の位置から要素を4つ削除すると、結果は[-1, 0, 1, 2]となります。

3. 変更

実際、最も柔軟な方法は、強力なメソッド splice() を直接使用することです。実際、このメソッドを上記で理解することで、このメソッドをどのように使用するかを大まかに知ることができます。基本的な配列要素の変更。

原理は非常に簡単です。つまり、指定された位置に任意の数の要素を挿入し、同時に任意の数の要素を削除します。

引き続き上記の例を続けます~~

arr.splice(2,1,0.5,1,1.5);
console.log(arr);  // [-1, 0, 0.5, 1, 1.5, 2]
ログイン後にコピー


4. Check

indexOf() と lastIndexOf()

どちらのメソッドも 2 つのパラメータを受け取ります: 検索するアイテムと ( オプション) ) は検索を開始するインデックスを示します。このうち、indexOf() メソッドは配列の先頭 (位置 0) から逆方向に検索し、lastIndexOf() メソッドは配列の末尾から順方向に検索します。

例:

var index = arr.indexOf(0);
console.log(index);  // 1
index = arr.indexOf(3,0);
console.log(index);  // -1
ログイン後にコピー

要素が見つからない場合は-1が返され、lastIndexOf()メソッドも同様です。

以上がJavaScript配列の追加、削除、変更、クエリ関数の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト

Huawei携帯電話にWeChatクローン機能を実装する方法 Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei携帯電話にWeChatクローン機能を実装する方法

PHP プログラミング ガイド: フィボナッチ数列を実装する方法 PHP プログラミング ガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

PHP プログラミング ガイド: フィボナッチ数列を実装する方法

Golang がゲーム開発の可能性を可能にする方法をマスターする Golang がゲーム開発の可能性を可能にする方法をマスターする Mar 16, 2024 pm 12:57 PM

Golang がゲーム開発の可能性を可能にする方法をマスターする

PHP ゲーム要件実装ガイド PHP ゲーム要件実装ガイド Mar 11, 2024 am 08:45 AM

PHP ゲーム要件実装ガイド

Golangで正確な除算演算を実装する方法 Golangで正確な除算演算を実装する方法 Feb 20, 2024 pm 10:51 PM

Golangで正確な除算演算を実装する方法

jsとvueの関係 jsとvueの関係 Mar 11, 2024 pm 05:21 PM

jsとvueの関係

See all articles