JavaScript初心者の方へ向けて、配列の基本的な操作について
・要素を追加する方法
・要素を削除する方法
・要素を置き換える方法
・結合する方法
をまとめました。
配列の操作に悩んだ時は、参考にしてみてください。
目次
配列に要素を追加する
先頭に要素を追加【unshift】
unshiftは、先頭に要素を追加したい時に使います。
配列.unshift(追加する要素);
|
1 2 3 4 5 |
var array1 = ['HTML', 'CSS']; array1.unshift('JavaScript'); console.log(array1); // ['JavaScript', 'HTML', 'CSS'] |
末尾に要素を追加【push】
pushは、末尾に要素を追加したい時に使います。
配列.push(追加する要素);
|
1 2 3 4 5 |
var array2 = ['HTML', 'CSS']; array2.push('JavaScript'); console.log(array2); // ['HTML', 'CSS', 'JavaScript'] |
配列の要素を削除する
先頭の要素を削除【shift】
shiftは、先頭の要素を削除したい時に使います。
配列.shift();
|
1 2 3 4 5 |
var array3 = ['HTML', 'CSS', 'JavaScript']; array3.shift(); console.log(array3); // ['CSS', 'JavaScript'] |
末尾の要素を削除【pop】
popは、末尾の要素を削除したい時に使います。
配列.pop();
|
1 2 3 4 5 |
var array4 = ['HTML', 'CSS', 'JavaScript']; array4.pop(); console.log(array4); // ['HTML', 'CSS'] |
配列の要素を置き換える【splice】
spliceは、配列内の要素を別の要素に置き換えたい時に使います。
配列.splice(追加位置, 取り出す数, 要素1, 要素2, …)
追加位置に記述する値は、インデックス番号で指定します。
例えば2番目に追加したい場合は、「1」と記述します。
|
1 2 3 4 5 |
var array5 = ['HTML', 'CSS', 'JavaScript']; array5.splice(1, 0, 'PHP'); // 2番目の位置で0個取り除きつつ追加 console.log(array5); // ['HTML', 'PHP', 'CSS', 'JavaScript'] |
|
1 2 3 4 5 |
var array6 = ['HTML', 'CSS', 'JavaScript']; array6.splice(1, 1, 'PHP'); // 2番目の位置で1個取り除きつつ追加 console.log(array6); // ['HTML', 'PHP', 'CSS'] |
配列を結合する【concat】
concatは、複数の配列を一つに結合したい時に使います。結合して新しい配列を作り、結合に使ったもともとの配列は破壊しません。
配列1.concat(配列2, 配列3, …)
|
1 2 3 4 5 6 7 |
var array7 = ['HTML', 'CSS']; var array8 = ['JavaScript', 'PHP']; array9 = array7.concat(array8); console.log(array9); // ['HTML', 'CSS', 'JavaScript', 'PHP'] console.log(array7); // ['HTML', 'CSS'] 元の配列はそのまま維持されている |
まとめ
以上、JavaScriptの配列の操作について、
・要素を追加する方法
・要素を削除する方法
・要素を置き換える方法
・結合する方法
をご紹介しました。配列の操作がわからなくなった時は、ぜひ参考にしてみてください。
