javascript一番目の要素しか修正できない（それ以外は追加される？)

Question

[{ cherry: 200 }, { banana: 100 }]の配列で
cherryに参照して値は修正できますが、bananaを修正しようとすると追加されてしまいます。(修正できない）

この挙動が起きる原因と回避できる方法がありましたらご教示いただけますでしょうか

1番目目の要素であるbananaの値を修正した場合

const fruits = [{ cherry: 200 }, { banana: 100 }];
fruits["0"].banana = 9900;
console.log(fruits); //[ { cherry: 200, banana: 9900 }, { banana: 100 } ]

代入したbananaが追加された？(既存の値は残ってる)

0番目目の要素であるcherryの値を修正した場合

const fruits = [{ cherry: 200 }, { banana: 100 }];
fruits["0"].cherry = 9900;
console.log(fruits); //[ { cherry: 9900 }, { banana: 100 } ]

cherryの値が修正された

Comments

[azuapricot]

fruits["0"].banana
この 0 がなにかってわかってます？

Answer 1

1番目目の要素であるbananaの値を修正した場合

fruits["0"]にアクセスしているので、そちらに追記されます。

Answer 2

単にデータの持ち方の問題でしょうね
単純なデータにすればよいのでは？

const fruits = { cherry: 200 , banana: 100 };
fruits.banana = 9900;
console.log(fruits);

Answer 3

index について調べたほうがよいのでは？と思います。　あとは連想配列？

const fruits = [{ cherry: 200 }, { banana: 100 }];
fruits[1].banana = 9900;
console.log(fruits); 

出力結果

[ { cherry: 200 }, { banana: 9900 } ]

---

これならもうちょっとわかりやすいかな

const fruits = [{ cherry: 200, grape: 700 }, { banana: 100 , apple: 200 , lemon : 400 }];
fruits[0].grape = 12345;
fruits[1].banana = 9900;
console.log(fruits); 

出力結果

[ { cherry: 200, grape: 12345 }, { banana: 9900, apple: 200, lemon: 400 } ]

---

中身がどうなるか分かるともっとわかりやすいかな

const fruits = [{ cherry: 200, grape: 700 }, { banana: 100 , apple: 200 , lemon : 400 }];
console.log(fruits[0]);
console.log(fruits[0].cherry);
console.log(fruits[1]);
console.log(fruits[1].banana);

出力結果

{ cherry: 200, grape: 700 }
200
{ banana: 100, apple: 200, lemon: 400 }
100

Comments

[Kimsehwa]

大きな勘違いをしました。。回答ありがとうございます。