初期化
配列を使用するのに必ず必要な初期化の方法。
配列は角括弧( [] )で囲みます。
// 空の配列で初期化var arr = [];// 初期値を入れた初期化var arr = [100, 200, 300];// 文字列と混在していても問題ないvar arr = [100, 'abc', 300];続いてオブジェクトの初期化。
オブジェクトはキーとバリューをセットにして扱います。
オブジェクトは波括弧( {} )で囲みます。
// 空のオブジェクトで初期化var obj = {};// 初期値を入れた初期化var obj = { 1: 100, 2: 200, 3: 300};// キーを文字列にして初期化var obj = { num1: '1番目', num2: '2番目', num3: '3番目'};指定インデックス・キーで取り出し
変数にセットした配列を取り出してみましょう。
配列は0からはじまる数値を角括弧で指定することで取り出すことができます。
var arr = [100, 200, 300];console.log(arr[2]); // 200オブジェクトの場合は数値をキーとした場合は、配列と同じように角括弧で取り出しますが、文字列をキーとした場合はそれに加え、ドット(.)を使用して取り出すことができます。
// 数値をキーとした配列はブラケットで取り出すvar obj = { 1: 100, 2: 200, 3: 300};console.log(obj[2]); // 200
// 文字列をキーとした配列は「.」からの指定でも取り出せるvar obj = { num1: '1番目', num2: '2番目', num3: '3番目'};console.log(obj['num2']); // 2番目console.log(obj.num2); // 2番目ループ処理
配列を一つ一つ取り出したり処理したいときはforループを使用します。
最近のモダンな記述だとforEachを使ったりして、最近のブラウザ(ES6)になるとfunctionをアロー演算子にすることもできます。
for (var i=0; i<arr.length; i++) { console.log(arr[i]);}// forEacharr.forEach(function(value) { console.log(value);});// ES6arr.forEach((value) => { console.log(value);});オブジェクトの場合はObject.keysで配列にしてからforEachします。
// forEachObject.keys(obj).forEach(function (key) { console.log(key + ':' + obj[key]);});// ES6Object.keys(obj).forEach((key) => { console.log(key + ':' + obj[key]);});指定した値があるか
indexOfは指定した値とマッチしたらインデックスを返します。
マッチするものがなかったら-1を返します。
これを使用すれば要素の中に指定した値があるか確認することができます。
console.log(arr.indexOf(300)); // 2console.log(arr.indexOf(400)); // -1オブジェクトの場合indexOfはないので、先ほどのObject.keysを使用します。
存在の確認のみの場合はsomeでループさせるとreturn trueで抜けられます。
Object.keys(obj).some(function(value) { if(obj[value] === '2番目') { console.log(value); return true; }});条件にあった値だけ取り出す
条件に合った値が欲しいときはfilterを使用します。
オブジェクトの場合はやっぱりObject.keysを使う感じですね。
// 配列var filtered = arr.filter(function(value) { return value == 200;});console.log(filtered) // [200]// オブジェクトvar filtered = Object.keys(obj).filter(function(value) { return obj[value] == '2番目';});console.log(filtered) // ["num2"]配列/オブジェクトの操作を扱いやすくするライブラリ
ループ系の処理はオブジェクトの場合Object.keysを使用すればいけるということがわかりましたが、あまりスマートじゃないですね。
もっといい感じで扱いたいという場合は、それ系のライブラリを使うといいみたいですよ。
有名なところだとUnderscore.jsとかLodash.jsがあります。
最近だとLodash.jsが使用される傾向にあるようですが、今回はUnderscore.jsを使ってみます。基本的なことならあまり変わらないっぽいです。
試しにループ処理をしてみましょう。
underscore.jsを読み込むと_.に続き各種関数を使えるようになります。
ループ処理はeachになります。
// 配列_.each(arr, function (value) { console.log(value);});// オブジェクト_.each(obj, function (value, key) { console.log(key + ':' + value);});配列でもオブジェクトでもほぼ同じ記述になりますので素敵ですね。
すべての処理が同じようにできるわけではありませんが、このような処理が多い場合は導入してもよさそうです。


