frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【JavaScript】配列に要素を追加する push unshift splice

スポンサードリンク

push、unshift、spliceは配列に要素を追加するメソッドです。

push

pushは配列の最後尾に追加します。
配列.push('値');

unshift

unshiftは配列の先頭に追加します。
配列.unshift('値');

splice

spliceは配列内の任意の位置に要素を追加したり、任意の位置の要素を削除することができます。
配列.splice('スタート位置','削除する個数','追加するデータ','追加するデータ',...);
カンマでつなげればいくつでも要素を追加できます。

実装例

html

<form name="fn_a" id="fi_a" method="GET">
<input type="button" value="押すと配列から読み込み">
  <textarea name="tan_a" id="tai_a" rows="5" cols="30"></textarea>
</form>

javascript

var x = new Array();
x = ['tokyo', 'sendai', 'osaka'];

x.push('fukuoka');// 配列の最後尾に追加
x.unshift('kanagawa');// 配列の先頭に追加
x.splice(2,0,'nagoya');// 2番目の要素(tokyo)後ろに追加
function foo(){
 x.forEach(bar);
}
function bar(v, i, arr){
document.forms[0].elements[1].value += 'インデックス' + i + '番の値は' + v + '\n';
}
var btn = document.querySelector('input');
btn.onclick = function(){
  foo();
}

See the Pen dvrGEv by funclur (@funclur) on CodePen.