Posted: 2017.11.21 / Category: javascript 

JavaScripの配列とオブジェクトって同じように操作できることがあったり、できない部分があったりと色々と混乱する部分があるのでまとめてみた次第であります。

初期化

配列を使用するのに必ず必要な初期化の方法。
配列は角括弧（ [] ）で囲みます。

配列

// 空の配列で初期化
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]);
}
// forEach
arr.forEach(function(value) {
    console.log(value);
});
// ES6
arr.forEach((value) => {
    console.log(value);
});

オブジェクトの場合はObject.keysで配列にしてからforEachします。

オブジェクト

// forEach
Object.keys(obj).forEach(function (key) {
    console.log(key + ':' + obj[key]);
});
// ES6
Object.keys(obj).forEach((key) => {
    console.log(key + ':' + obj[key]);
});

指定した値があるか

indexOfは指定した値とマッチしたらインデックスを返します。
マッチするものがなかったら-1を返します。
これを使用すれば要素の中に指定した値があるか確認することができます。

配列

console.log(arr.indexOf(300));  // 2
console.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

試しにループ処理をしてみましょう。
underscore.jsを読み込むと_.に続き各種関数を使えるようになります。
ループ処理はeachになります。

// 配列
_.each(arr, function (value) {
    console.log(value);
});
// オブジェクト
_.each(obj, function (value, key) {
    console.log(key + ':' + value);
});

配列でもオブジェクトでもほぼ同じ記述になりますので素敵ですね。
すべての処理が同じようにできるわけではありませんが、このような処理が多い場合は導入してもよさそうです。