【JavaScript】配列・オブジェクトの取り出し、push

2021.12.02
目次
  1. forを使った配列の要素取り出し
  2. 配列への要素push
  3. オブジェクトにオブジェクトをpush
  4. オブジェクトにプロパティをpush
  5. オブジェクトを展開してプロパティを取り出し、そのプロパティを配列で取得する

forを使った配列の要素取り出し

index番号を出力する

const arr=[ 1,2,3 ];
for(let i in arr){
	console.log(i);
}

> 0 1 2

これは配列のindex番号が出力されているに過ぎないので、配列のarrの中の要素の数が何であれ、配列の要素の数分だけ番号が出力される。

要素の取り出し

const arr=[ 1,2,3 ];
for(let i in arr){
	console.log(arr[i]);
}

> 1 2 3

配列への要素push 

const drink = [ 'coffee', 'cocoa' ]
drink.push('milk')
console.log(drink)

> 'coffee', 'cocoa'

オブジェクトにオブジェクトをpush

const drink = [
  { id:1, name:'coffee', price:100 },
  { id:2, name:'cocoa', price:120 }
]
drink.push(
  { id:3, name:'milk', price:110 }
)
console.log(drink)

>
[
  { id:1, name:'coffee', price:100 },
  { id:2, name:'cocoa', price:120 },
  { id:3, name:'milk', price:110 }
]

オブジェクトにプロパティをpush

オブジェクト.プロパティに値を入れる方法
const drink = [
  { id:1, name:'coffee', price:100 },
  { id:2, name:'cocoa', price:120 },
  { id:3, name:'milk', price:110 },
]

drink[0].size = 'tall'

>
{id: 1, name: 'coffee', price: 100, size: 'tall'}
{id: 2, name: 'cocoa', price: 120}
{id: 3, name: 'milk', price: 110}

オブジェクトのindex0を指定してsize: ‘tall’を追加

オブジェクト[“プロパティ”]に値を入れる方法
const drink = [
  { id:1, name:'coffee', price:100 },
  { id:2, name:'cocoa', price:120 },
  { id:3, name:'milk', price:110 },
]

obdrink[0]["size"] = 'tall'

>
{id: 1, name: 'coffee', price: 100, size: 'tall'}
{id: 2, name: 'cocoa', price: 120}
{id: 3, name: 'milk', price: 110}

この書き方だと、””で囲って文字列にする必要がある。

オブジェクトを展開してプロパティを取り出し、そのプロパティを配列で取得する

const drink = [
  { id:10, name:'coffee', price:100 },
  { id:20, name:'cocoa', price:120 },
  { id:30, name:'milk', price:110 },
]

これに対し期待する結果

>[10, 20, 30]

以下コードでできました。

const drink = [
  { id:10, name:'coffee', price:100 },
  { id:20, name:'cocoa', price:120 },
  { id:30, name:'milk', price:110 },
]

const drinkArr = []

for(let i in drink){
  const drinkId=drink[i].id
  drinkArr.push(drinkId)
  console.log(drinkArr)
}

まずは空配列を作り、オブジェクトを展開且つ、idの値を取得する。

その取得した値をから配列にpushする。

配列、オブジェクトについてこれだけ把握していれば、応用できそうです！

コメント