JavaScriptにて、オブジェクトの要素の一部を削除したい

Question

(function() {
    "use strict";
    
    let fruits = {
        apple:  {price: 100, num: 10},
        orange: {price: 50, num: 20},
        grape:  {price: 300, num: 30}
    }    
    
    // fruitsの要素数が2を超える場合は、超えた部分をカットし要素数を2にする
    if (Object.keys(fruits).length > 2) {
       
    }
})();

上記コードにありますオブジェクトfruitsの要素数が2を超える場合は、2を超える部分の要素を削除し、要素数を2にしたいのですが、方法が全く思いつきません。

現在fruitsには、apple、orange、grapeの3つの要素がありますが、これをappleとorangeの2つにするイメージです。appleとgrapeなどでもいいです。とにかく要素数を2にしたいです。

お手数をお掛けしますが、どのような方法があるのか、ご教授のほどよろしくお願いいたします。

Answer 1

{} は配列ではありませんので、「2番目以降」というような順番はありません。
一方、new Map には順番があります。

'use strict';
const array = [['apple', {price: 100, num: 10}], ['orange', {price: 50, num: 20}], ['grape', {price: 300, num: 30}]];
const fruits = new Map((array.splice(2), array));
console.log(JSON.stringify([...fruits])); // [["apple",{"price":100,"num":10}],["orange",{"price":50,"num":20}]]

Re: minyouyuu さん

Comments

[minyouyuu]

mapは全く勉強したことがありませんでしたが、実際にmapを使ってみますと、期待の結果を得ることができました！これから勉強してみます。ありがとうございました！

Answer 2

「もとのオブジェクトを破壊的に変更する」のと、「新しいオブジェクトを作る」のと、どちらが適当でしょうか。

// 破壊的変更版
Object.keys(fruit).forEach((item, index) => {
  if(index >= 2) delete fruit[item];
});

// 新規作成版
const newFruit = {};

// 途中脱出するためにsomeにしておく
Object.keys(fruit).some((item, index) => {
  if(index >= 2) return true;
  newFruit[index] = fruit[index];
});

Comments

[minyouyuu]

ありがとうございます！もとのオブジェクトを変更したいので、「破壊的変更版」の方を使わせていただきます。助かりました！

Answer 3

削除すればよいのでは？

    "use strict";

    let fruits = {
        apple:  {price: 100, num: 10},
        orange: {price: 50, num: 20},
        grape:  {price: 300, num: 30}
    }    

    // fruitsの要素数が2を超える場合は、超えた部分をカットし要素数を2にする
    if (Object.keys(fruits).length > 2) {
			delete fruits.grape;
    }
    console.table(fruits);
```**動くサンプル：**[https://jsfiddle.net/c6fm73vq/](https://jsfiddle.net/c6fm73vq/)

---

【プロパティの削除 - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties)

Comments

[minyouyuu]

早くにご回答ありがとうございます！！

すみません、私の書き方に不足にございました。
現在、fruitsはapple、orange、grapeの3個の要素だけですが、fruitsは要素数が変わることを想定しております。fruitsの要素数が100個になる場合もあります。また、apple、orange、grapeのようにキーが分からない場合でも、要素数を2個にしたいと考えております。
質問に不足があり、すみません...質問内容を修正いたします。

[kei344]

何個あっても削除すればいいだけですよ。
そのコードが欲しいならmaisumakunさんの回答にありますよ。

[minyouyuu]

要素が何個になっても、ループを回して、deleteで削除すればよいのですね。サンプルや、参考になるページのリンクをくださり、ありがとうございました！

[x_x]

リンク先消えてませんか？
これのどちらかでしょうか
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Deleting_properties

[kei344]

To: x_x さん
指摘ありがとうございます、前者のほうです。
そのままのURLをコピーしたつもりだったのですが、失敗していますね･･･。修正しておきます。