JavaScriptの配列に要素を追加する方法をご紹介します。また、それに関連して要素の削除方法、オブジェクト(連想配列)の扱い方についても触れています。JavaScriptの配列で要素を追加するメソッドはいくつかあり、その使い分けも例示します!
JavaScriptで配列に要素の追加を行う方法
ほとんどのプログラミング言語に「配列」が存在しますが、その仕様はまちまちです。この記事では、JavaScriptの配列に実装されているメソッドのうち、要素の「追加」に関するものを主にご紹介します。
JavaScriptのpushメソッドを使って配列の要素を追加する方法
JavaScriptのArray.prototype.pushメソッドを使うと配列の最後尾に要素を追加することができます。引数を複数渡せば、全ての引数を渡した順に追加してくれます。
以下のコードでは最初にtwoを追加し、次にthreeとfourを一度に追加しています
let array = ['one'];
array.push('two');
array.push('three', 'four');
console.log(array); // -> ['one', 'two', 'three', 'four'JavaScriptでは、存在しないキーにアクセスすると当該プロパティが新たに作成されるので、以下のように書くこともできます
let array = ['one'];
array[array.length] = 'two';
console.log(array); // -> ['one', 'two'でもあまり一般的ではないので、特別な理由がなければpushメソッドを使いましょう。慣習に従うことは、コードのリーダビリティを向上します。
JavaScriptのunshiftメソッドで配列の値を先頭に追加する方法
Array.prototype.unshiftメソッドを使うと、配列の先頭に要素を追加できます。pushメソッドと同様に、引数を複数渡せば、全ての引数が追加されます。
複数の要素を追加した場合、要素の並び順は引数の並び順と同じになります
let array = [1];
array.unshift(2);
array.unshift(3, 4);
console.log(array); // -> [3, 4, 2, 1]JavaScriptのspliceメソッドで指定した位置に1つ以上の値を追加する方法
Array.prototype.spliceメソッドは、配列内で指定位置の要素を削除し、代わりの要素を追加できます。任意の位置に要素を追加したい場合は、spliceメソッドを使います
let array = ['壱', '弐', '参'];
array.splice(1, 0, '四');
array.splice(3, 0, '伍', '六');
console.log(array); // -> ['壱', '四', '弐', '伍', '六', '参'1番目の引数に位置 (インデックス)、2番目の引数に削除する要素数、3番目以降の引数に追加する要素の値を渡します。インデックスは、最初の要素の前が「0」、最後の要素の後ろがarray.lengthとなります。
削除する要素数を0とすれば、単に指定位置に要素を追加できます。
spliceメソッドを使えば、pushメソッドやunshiftメソッドと同じこともできます
let array = ['a', 'b', 'c', 'd'];
// pushメソッドと同等
array.splice(array.length, 0, 'e', 'f');
console.log(array); // -> ['a', 'b', 'c', 'd', 'e', 'f']
// unshiftメソッドと同等
array.splice(0, 0, 'g', 'h');
console.log(array); // -> ['g', 'h', 'a', 'b', 'c', 'd', 'e', 'f'柔軟に配列への追加・削除を行うことができるので、要素の並び順が意味を持つケースでプログラマティックに配列操作をしたいときには、spliceメソッドがよく登場することになります。
配列要素の削除におけるpop、shiftメソッドとspliceメソッドの違い
蛇足ですが、spliceメソッドでは上述のように要素の削除もできます
let array = ['い', 'ろ', 'は', 'に', 'ほ'];
array.splice(1, 2);
console.log(array); // -> ['い', 'に', 'ほ'これと似たことができるpopメソッドもあります。popメソッドは、配列の最後尾の要素を取り出します。また、同じくshiftメソッドは先頭の要素を取り出します
let array = ['い', 'ろ', 'は', 'に', 'ほ'];
array.pop();
console.log(array); // -> ['い', 'ろ', 'は', 'に']
array.shift();
console.log(array); // -> ['ろ', 'は', 'に'spliceよりも簡潔ですが、最後尾または先頭の要素1つしか削除できませんので、シーンによって使い分けることになります。
spliceメソッドを使えば同じ操作が可能ではありますが、push、unshift、pop、shiftメソッドを使える場合は、積極的に使って配列操作の意図を明確にしましょう。
オブジェクト で要素の追加を行う方法
まだオブジェクト にないキー文字列を指定して値を代入する
JavaScriptに連想配列はありませんが、Objectをデータコンテナとして用いることができます。Objectに要素を追加したいときは、単に追加したいキーに値を代入します。JavaScriptのオブジェクトでは、あらゆる文字列とシンボルをキーに用いることができます
let hash = Object.create(null);
hash['年齢'] = 34;
console.log(hash); // -> { '年齢': 34 再び蛇足ですが、let hash = Object.create(null);のところで、let hash = {};としている例もよく見かけます。この2つは意味が異なりますので、適切に理解しましょう。{}というのは、Objectというオブジェクトのインスタンスを生成します。JavaScriptのObjectには、__proto__やhasOwnPropertyなどのビルトインプロパティが定義されていますので、例えば{}.hasOwnPropertyはfunctionを返してしまいます。
一方でObject.create(null)はnullをプロトタイプに持つオブジェクトで、一切のプロパティを持ちません。完全に真っさらの連想配列を用意することができます。もしhashにあらゆる文字列の入る可能性があるなら、Object.create(null)が安全です。
push、unshift、spliceメソッドの使い分け
JavaScriptの配列に要素を追加する方法として、push、unshift、spliceメソッドをご紹介しました。既に述べたように、配列の途中などへ柔軟に追加したいときはsplice、pushやunshiftで代替可能な場合はpushやunshiftを使うのがオススメです。
簡単な例として、アルファベット順に並べた単語リストを考えてみましょう
let dictionary = [];
function add(word) {
const added = dictionary.some((item, index, array) => {
if (item > word) {
array.splice(index, 0, word);
return true;
}
});
if (!added) dictionary.push(word);
}
add('bean');
add('lemon');
add('apple');
console.log(dictionary); // -> ['apple', 'bean', 'lemon'定義したadd関数は、dictionary内で単語がアルファベット順に並ぶように、適切な位置に引数wordを追加する関数です。ここでは、spliceとpushを使い分けています。
someメソッド内の関数でwordを追加することになった場合、wordの位置は現在のindexでなければいけません。そこで、位置を指定できるspliceメソッドを使います。
indexが0の場合にはunshiftメソッドが使えますが、0でない可能性もあります。このように、追加位置が変数の場合にはspliceメソッドが適しています。
もし、someメソッドがfalseを返した場合、wordはdictionaryのあらゆる要素よりも後方の単語ということになります。wordの追加先は必ず最後尾ですから、pushメソッドを使うことができます。
ここでspliceメソッドを使うと、if (!added) dictionary.splice(dictionary.length, 0, word);となりますが、一見どこに追加しようとしているのか分かりにくくなってしまいます。pushメソッドを用いて、意図を明確にすることが適切といえます。
適切なメソッドを使って、明瞭なコードに
JavaScriptにおける配列への要素の追加方法、そして追加メソッドの使い分けについてご紹介しました。spliceという汎用メソッド、push、unshiftという特化されたメソッドがありましたが、上手に使い分けて読みやすいコードを目指してください。
読みやすいコードは、他人の役に立つだけでなく、自分にとってもデバッグしやすい、人の助けを得やすいというメリットがあります。本稿が、そうした習慣を身につける手助けになれば幸いです。
