【javascript】オブジェクトが格納された配列をループして全て処理するサンプルコード｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

━目次━

プロジェクトの中でjqGridを使っていた時に、配列の中にオブジェクトが入ってるような変数に対して全ループしながら置換処理していく必要があったのでメモ。

イメージとしては↓こんなオブジェクトが


　
var obj1 = {"id": "A_001", "name": "yamada_taro", "age": 20};
var obj2 = {"id": "A_002", "name": "ueno_hanako", "age": 25};
var obj3 = {"id": "A_003", "name": "ito_yuta", "age": 40};

var obj1 = {"id": "A_001", "name": "yamada_taro", "age": 20};

var obj2 = {"id": "A_002", "name": "ueno_hanako", "age": 25};

var obj3 = {"id": "A_003", "name": "ito_yuta", "age": 40};

↓こんな感じで配列に入っているイメージ


　
var arr = [obj1, obj2, obj3];

var arr = [obj1, obj2, obj3];

それでは見ていきましょう

配列のループ

配列のループ方法はたくさんあります。代表的な３つだけ挙げると

var arr = [1, 2, 3];

//forEach君。個人的には圧倒的にこいつ推し
arr.forEach(function (value, index, array) {
  //全要素に10を加算する例
  array[index] = value + 10;
});

//forEach君2。値だけ使う時はこっちでもOK
arr.forEach(function (value) {
  console.log(value);
});


//for君。老舗の味
for (i = 0; i < arr.length; i++) {
  //全要素に10を加算する例
  arr[i] = arr[i] + 10;
}

//while君。あんまり使わない。
var i = 0;
while (i < arr.length) {
  //全要素に10を加算する例
  arr[i] = arr[i] + 10;
}

var arr = [1, 2, 3];

//forEach君。個人的には圧倒的にこいつ推し

arr.forEach(function (value, index, array) {

//全要素に10を加算する例

array[index] = value + 10;

});

//forEach君2。値だけ使う時はこっちでもOK

arr.forEach(function (value) {

console.log(value);

});

//for君。老舗の味

for (i = 0; i < arr.length; i++) {

//全要素に10を加算する例

arr[i] = arr[i] + 10;

}

//while君。あんまり使わない。

var i = 0;

while (i < arr.length) {

//全要素に10を加算する例

arr[i] = arr[i] + 10;

}

オブジェクトのループ

全プロパティが対象になり予期せぬ動作をする可能性のある『for…in』

や

ES6から追加されたのでブラウザによって動作しない可能性のある『for…of』

などがありますが、上記の理由によりあまり好ましくないので、私は↓一択です。

var obj1 = {"id": "A_001", "name": "yamada_taro", "age": 20};

//Array.forEachとObject.keysを組み合わせる
Object.keys(obj1).forEach(function(key) {
  console.log(obj1[key]);
})
//▼出力結果▼
A_001
yamada_taro
20

var obj1 = {"id": "A_001", "name": "yamada_taro", "age": 20};

//Array.forEachとObject.keysを組み合わせる

Object.keys(obj1).forEach(function(key) {

console.log(obj1[key]);

})

//▼出力結果▼

A_001

yamada_taro

配列とオブジェクトのループを組み合わせる

それではそれぞれのループを組み合わせて、配列の中にオブジェクトが格納された変数の全要素を処理しましょう。

ここでは例としてreplaceを用いて、変数内の「_(アンダースコア)」を削除していきます。

//オブジェクトはこんなの
var obj1 = {"id": "A_001", "name": "yamada_taro", "age": 20};
var obj2 = {"id": "A_002", "name": "ueno_hanako", "age": 25};
var obj3 = {"id": "A_003", "name": "ito_yuta", "age": 40};

//配列に入れる
var arr = [obj1, obj2, obj3];

//forEachを用いた配列のループ
arr.forEach(function(value, index, array){
  //配列内のオブジェクトの各要素をループ
  Object.keys(array[index]).forEach(function(key) {
    //replaceでエラーにならないようstring型以外は処理しない
    if (typeof(array[index][key]) == "string") {
      //文字列に含まれる全てのアンダースコアを削除する
      array[index][key] = array[index][key].replace(/_/g, "");
      console.log(array[index][key]);
    }
  })
})

//▼出力結果▼
A001
yamadataro
20
A002
uenohanako
25
A003
itoyuta
40

//オブジェクトはこんなの

var obj1 = {"id": "A_001", "name": "yamada_taro", "age": 20};

var obj2 = {"id": "A_002", "name": "ueno_hanako", "age": 25};

var obj3 = {"id": "A_003", "name": "ito_yuta", "age": 40};

//配列に入れる

var arr = [obj1, obj2, obj3];

//forEachを用いた配列のループ

arr.forEach(function(value, index, array){

//配列内のオブジェクトの各要素をループ

Object.keys(array[index]).forEach(function(key) {

//replaceでエラーにならないようstring型以外は処理しない

if (typeof(array[index][key]) == "string") {

//文字列に含まれる全てのアンダースコアを削除する

array[index][key] = array[index][key].replace(/_/g, "");

console.log(array[index][key]);

}

})

//▼出力結果▼

A001

yamadataro

A002

uenohanako

A003

itoyuta

さいごに

オブジェクトをループすることは良くあるので覚えておきましょう。

余談ですが、replace関数は文字列以外の数値やnullに使うとエラーになるので注意が必要です。

あとはreplace(/_/g, “”)のgオプションを指定しないと最初に一致した1文字のみ置換されてしまうので気をつけましょう。

それでは！また！！