ホームページ > ウェブフロントエンド > jsチュートリアル > jsで配列に要素を追加する方法

jsで配列に要素を追加する方法

醉折花枝作酒筹
リリース: 2021-08-09 17:39:13
オリジナル
5924 人が閲覧しました

前の記事では、インデックスを使用して配列オブジェクトの要素にアクセスする方法を学習しました。「js がインデックスを使用して配列オブジェクトの要素にアクセスする方法」を参照してください。今回は配列に要素を追加する方法を学習しますので、必要に応じて参照してください。

JavaScript では、配列に要素を追加する方法が 3 つあります。まず最初の方法を見てみましょう。

まず小さな例を見てみましょう。

var arr = new Array(3); 
arr[0] = "one";
arr[1] = "two";
arr[2] = "three";
var newLength = arr.push('four');
console.log(arr);
ログイン後にコピー

この小さな例の結果は次のとおりです

jsで配列に要素を追加する方法

ご覧のとおり、この例では要素「##」を末尾に追加しました。配列 #4」。同時に、push メソッドを使用しました。この関数を見てみましょう。

push()メソッドは、1 つ以上の要素を配列の末尾に追加し、新しい長さを返します。

構文形式は


数组对象.push(要添加到数组的元素)
ログイン後にコピー

push() メソッドでパラメータ シーケンスを

arrayObject の末尾に追加できます。 新しい配列を作成するのではなく、arrayObject を直接変更します。

この方法の紹介は終わりました。2 番目の方法を見てみましょう。

var arr = new Array(3); 
arr[0] = "one";
arr[1] = "two";
arr[2] = "three";
var newLength = arr.unshift('four');
console.log(arr);
ログイン後にコピー

結果は次のとおりです。


jsで配列に要素を追加する方法

配列への要素の追加にも成功しましたが、それが先頭要素に追加されたことがわかります。 "四"。この方法は前の方法とは異なります。この方法を学びましょう。

unshift()メソッドは、配列の先頭に 1 つ以上の要素を追加し、新しい長さを返します。既存の要素を上位の添字に順次移動してスペースを作ります。メソッドの最初のパラメータは配列の新しい要素 0 になり、2 番目のパラメータがある場合は新しい要素 1 になり、以下同様となります。

unshift() メソッド は新しい配列 を作成するのではなく、元の配列を直接変更することに注意してください。

この方法の紹介は終わりました。次に 3 番目の方法を見てみましょう。

var arr = new Array(3); 
arr[0] = "one";
arr[1] = "two";
arr[2] = "three";
var newLength = arr.splice(1,0,'four');
console.log(arr);
ログイン後にコピー

結果は次のとおりです


jsで配列に要素を追加する方法

#配列への要素の追加にも成功していることがわかります。任意の位置に追加できます。この方法を見てみましょう。

splice()このメソッドは、配列に対して項目を追加または削除し、削除された項目を返します。

文法を見てみましょう。


arrayObject.splice(规定添加/删除项目的位置,要删除的项目数量,向数组添加的新项目)
ログイン後にコピー
splice() メソッドは、

index で始まる 0 個以上の要素を削除し、それらの要素をパラメータ リストで宣言された 1 つ以上の値に置き換えます。要素が arrayObject から削除された場合、削除された要素を含む配列が返されます。

splice()メソッド

は配列を直接変更します。

[推奨学習:

JavaScript 上級チュートリアル]

以上がjsで配列に要素を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート