ywork2020.com

Title

配列に新しい値を追加する

目次 (INDEX)

pushとは

ここで説明するpush とは次の語句からなるjavascriptのメソッドです。
push
読み: プッシュ
意味: 押す、押し込む、突く、圧力

目次に戻る

pushメソッドの概要

このメソッドは、配列の末尾に値を追加します。

ここで言っている値とは数値、文字列、オブジェクトを含みます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

array.push(value1 [, ... ,valueN]);

目次に戻る

サンプルコードと実行結果

ここでは、2つの配列を用意しました。 1つ目の配列に2つ目の配列の値を追加して、2つ目の配列は削除します。

ここでのpush()メソッドの使い方は一つの考え方を表現したものであって、サンプルとしては少し複雑かもしれません。 基本的には、単純にpush()メソッドの引数に与えた値が配列の末尾に追加されていくということですので難しく考えないでください。

この配列同士の値の融合を行うには、実際にはapply()メソッドを使った方が コードとして分かりやすく、効率的です。次のセクションでapply()メソッドを使ったものを紹介します。

サンプルコード: HTML
<body>
	<script>...</script>
</body>
  • 02: script (プログラムを実行します。)
サンプルコード: script
<script>
	let arrOriginal = ["Sunday", "Monday", "Tuesday", "Wednesday"];
	let arrAdditional = ["Thursday", "Friday", "Saturday"];
	for(let i = 0; i < arrAdditional.length; i++){
		arrOriginal.push(arrAdditional[i]);
	}
	for(let j = 0; j < arrOriginal.length; j++){
		document.write(arrOriginal[j], "<br>");
	}
	arrAdditional = function(){}();
</script>
  • 02: arrOriginal (曜日の文字を4つ代入した配列です。)
  • 03: arrAdditional (曜日の文字を3つ代入した配列です。)
  • 04-06: for文 (iの値が0から(arrAdditionalの配列数-1)までカウントされます。)
  • 05: push() (arrAdditionalの値をインデックスの数だけarrOriginalに追加します。)
  • 07-09: for文 (jの値が0から(arrOriginalの配列数-1)までカウントされます。)
  • 08: write() (arrOriginalの値をインデックスの数だけページに書き出します。)
  • 10: 変数や配列の削除 (arrAdditionalを定義から削除します。)
実行結果:

目次に戻る

応用: 配列の融合 push.apply()

ここでは、2つの配列を用意しました。 1つ目の配列に2つ目の配列を融合してから、2つ目の配列は削除します。

サンプルコード: HTML
<body>
	<script>...</script>
</body>
  • 02: script (プログラムを実行します。)
サンプルコード: script
<script>
	let arrOriginal = ["Sunday", "Monday", "Tuesday", "Wednesday"];
	let arrAdditional = ["Thursday", "Friday", "Saturday"];
	arrOriginal.push.apply(arrOriginal, arrAdditional);
	for(let j = 0; j < arrOriginal.length; j++){
		document.write(arrOriginal[j], "<br>");
	}
	arrAdditional = function(){}();
</script>
  • 02: arrOriginal (曜日の文字を4つ代入した配列です。)
  • 03: arrAdditional (曜日の文字を3つ代入した配列です。)
  • 04: push.apply() (arrOriginalとarrAdditionalの値を融合しています。)
  • 05-07: for文 (jの値が0から(arrOriginalの配列数-1)までカウントされます。)
  • 06: write() (arrOriginalの値をインデックスの数だけページに書き出します。)
  • 08: 変数や配列の削除 (arrAdditionalを定義から削除します。)
実行結果:

目次に戻る