配列とオブジェクトのまとめ - Javascript

配列とオブジェクト要素が含まれるか調べる

const arr = [1, 2, 3, 4, 5]
console.log(arr.includes(1)); // true
console.log(arr.includes("1"));  // false

const hash = { apple: 100, orange: 200 };
console.log("apple" in hash); // true
console.log("banana" in hash); // false

in演算子を使うと継承元までさかのぼってプロパティを検索します。

配列のループ

const arr = [1, 2, 3, 4, 5]

for(let i of arr){
  console.log(i)
}

for...in を配列で利用することもできるが、以下のようなことがあるためトラブルの元になる可能性があるため、配列はfor...inで使わないほうがいいです。

  • 処理の順序が保証されていない。
  • prototypeで拡張されたメソッドまで取得する。

for...in で出力されるのは、キーです。

配列に for...in で処理した場合

const arr = ["apple", "orange", "banana"]

for(let i in arr){
  console.log(i)
}

// 結果
0
1
2

オブジェクトのループ

const obj = { apple: 100, orange: 200, banana: 300 };

for(let i in obj){
  console.log(i)
}

// 結果
apple
orange
banana

値を取得する場合は、次のようにします。

const obj = { apple: 100, orange: 200, banana: 300 };

for(let i in obj){
  console.log(obj[i])
}
  
// 結果
100
200
300

forEach

配列の要素を順番に処理します。

let fruits = ["orange", "banana", "apple"];

fruits.forEach((value, index, fruits) => {
  console.log(index + ":" + value)
  console.log(fruits)
})

// 結果
0:orange
[ 'orange', 'banana', 'apple' ]
1:banana
[ 'orange', 'banana', 'apple' ]
2:apple
[ 'orange', 'banana', 'apple' ]

オブジェクトには、使えないため、一度配列に変更してから利用します。

オブジェクトが持つプロパティの配列を、順番に返します。

const obj = { apple: 100, orange: 200, banana: 300 };

Object.keys(obj).forEach((value) => {
  console.log(value + ":" + obj[value])
})

// 結果
apple:100
orange:200
banana:300

配列の中のオブジェクトをループ

const users = [
  { name: "Taro", age: 20},
  { name: "Jiro", age: 15}
];

users.forEach(function(user){
  console.log(user.name + ":" + user.age);
});

// 結果
Taro:20
Jiro:15