1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】オブジェクト配列(連想配列)の操作いろいろ

Posted at

##オブジェクト配列(連想配列)のプロパティ(値)にアクセスする##

  • キーを指定する(2パターン)

const fruits = {
  banana: 150,
  orange: 200,
};
  //1つめのパターン
console.log(fruits.banana);

  //2つめのパターン
console.log(fruits['banana']);

// 実行結果はどちらも同じ
// 150

##オブジェクト配列(連想配列)のプロパティ(値)を操作する##

-上記と似たやり方でプロパティを書き換える

const fruits = {
  banana: 150,
  orange: 200,
};

  //1つめのパターン
fruits.orange = 300;
console.log(fruits['orange']);

  //2つめのパターン
fruits['orange'] = 300;
console.log(fruits.orange);

// 実行結果はどちらも同じ
// 300
  • キーとプロパティを追加する&削除する
const fruits = {
  banana: 150,
  orange: 200,
};
  //strawberryというキーと450というプロパティがfruitsオブジェクト配列に追加される
fruits.strawberry = 450;

  //キーを指定して削除する(ここではbananaを削除)
delete fruits.banana;

##オブジェクト配列(連想配列)でforEach( )を使う##

  • オブジェクト配列(連想配列)はforEach( )を使えないので工夫が必要
  • Object.keys( )を使う。Object.keys( )とは配列のキーを取り出すメソッド
const fruits = {
  banana: 150,
  orange: 200,
  strawberry: 450,
};
  //fruitsオブジェクト配列(連想配列)のキーを定数(ここではshops)に入れる
const shops = Object.keys(fruits);
  //fruits配列のキーが入ってるshopsからforEach()を使いキーと値を取り出す
shops.forEach(shop => {
  console.log(`${shop} : ${fruits[shop]}`);
}
// 実行結果
// banana : 150
// orange : 200,
// strawberry : 450,

##配列とオブジェクト配列(連想配列)を組み合わせる##

const fruits = [
  { banana: 150, orange: 200},
  { tomato: 100, onion: 120},
  { fish: 250, meat: 500},
];
console.log(fruits[1].onion);
// 実行結果
// 120
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?