JavaScriptでの配列操作のまとめ

こんにちは、雑記ラビリンスです。

JavaScriptで用いる配列がらみの操作をまとめました。

連想配列の作成方法

JavaScriptでは連想配列のことをハッシュと呼ぶこともあります。
JavaScript連想配列の記述は
var obj = {キー:値};
となります。
例として

var obj2 = {'hugっとプリキュア':'キュアマシェリ','魔法つかいプリキュア':'キュアマジカル'};

です。
またキーと値を変数に置き換えて記述することもできます。

var str1 = 'hugっとプリキュア';
var str2 = '魔法つかいプリキュア';
var data2 = ['キュアマシェリ','キュアアムール','キュアエール'];
var data3 = ['キュアミラクル','キュアマジカル','キュアフェリーチェ'];
var obj1 = {[str1]:data2[0],[str2]:data3[1]};

キーを変数にするときは[ ]で変数を囲まないと変数が展開されません。

配列の要素の追加や削除

配列の要素を先頭、末尾に追加したり削除することができます。

var data = ['キュアマシェリ','キュアアムール','キュアエール'];
var data2 = ['キュアミラクル','キュアマジカル','キュアフェリーチェ'];

//末尾に要素を追加
data.push('キュアアンジュ');
console.log(data);
//先頭に要素を追加
data.unshift('キュアエトワール');
console.log(data);
//末尾の要素を取得
console.log(data.pop());
//末尾の要素が削除されている
console.log(data);
//先頭の要素を取得
console.log(data.shift());
//先頭の要素が削除されている
console.log(data);

まとめますと
先頭に要素を追加:unshiftメソッド
末尾に要素を追加:pushメソッド
先頭の要素を削除:shiftメソッド
末尾の要素を削除:popメソッド
となります。

またpopメソッドとshiftメソッドには要素の削除の機能と要素の取得という機能を持っています。

配列の連結

配列に配列の連結にはconcatメソッドを利用します。

var data = ['キュアマシェリ','キュアアムール','キュアエール'];
var data2 = ['キュアミラクル','キュアマジカル','キュアフェリーチェ'];
console.log(data.concat(data2));

また連想配列の連結には
jQueryの$.extendメソッドを利用します。

var data3 = {aaa:100,bbb:200,name:'curemelody'};
var data4 = {ddd:50,eee:'あいうえお'};
$.extend(data3,data4);
console.log(data3);

配列の要素を一つの文字列に

配列の要素を一つの変数にする操作は時々見られます。
JavaScriptではjoinメソッドで実現できます。
具体例は下に示します。

var data2 = ['キュアミラクル','キュアマジカル','キュアフェリーチェ'];
var result = data2.join('/');
console.log(result);

使い方は
配列.join(区切り文字)
です。

区切り文字を省略すると「,」カンマで連結されます。

配列の要素を特定の条件で絞り込む

たくさんの要素からなる配列の内容を絞り込む実装は
jQueryの$.grepメソッドで実現できます。
例として下のコードで示します。

var data5 = ['curemelody','cureheart','キュアマシェリ','curetwinkle'];
var result2 = $.grep(data5,function(value,index){
			return (value.substring(0,4) == 'cure');
		},false);
		console.log(result2);

このケースでは配列の要素の先頭4文字が「cure」であるものを取得しています。

終わりに

備忘録がてらJavaScriptの配列操作についてまとめました。
何かの役に立てたら幸いです。

おしまい
~約8,000名の受講生と80社以上の導入実績~

企業向けプログラミング研修ならCodeCamp