>source

아래와 같이 내부에 여러 개체가있는 배열이 있습니다.

[{ DishId: 40, DishName: "Mango", TimeSpan: 98},
 { DishId: 41, DishName: "Banana", TimeSpan: 99},
 { DishId: 42, DishName: "Orange", TimeSpan: 100}]

그리고 DishId와 DishName을 추출하고 아래와 같은 다른 객체 배열을 만들고 싶었습니다. 예상 출력 :

[{ DishId: 40, DishName: "Mango"},
 { DishId: 41, DishName: "Banana"},
 { DishId: 42, DishName: "Orange"}]

나는 아래에서하고있다

allDishes = 
    [{ DishId: 40, DishName: "Mango", TimeSpan: 98},
     { DishId: 41, DishName: "Banana", TimeSpan: 99},
     { DishId: 42, DishName: "Orange", TimeSpan: 100}];
var dishes = {}; 
var dishesArray = []; 
for(i = 0; i < allDishes.length; i++){
  dishes.DishId=  allDishes[i].DishId;
  dishes.DishName =  allDishes[i].DishName;
  dishesArray.push(dishes);
}

위의 예에서 볼 수 있듯이 모든 다른 객체를 원할 때 동일한 반복 객체를 제공합니다.

[ { DishId: 42, DishName: 'Orange' },
  { DishId: 42, DishName: 'Orange' },
  { DishId: 42, DishName: 'Orange' }]

  • 답변 # 1

    당신은 당신의 dishes 객체이므로 다음 반복에서는 이전 반복에서 변경 한 내용을 덮어 씁니다. 루프에서 매번 새 객체를 선언하고 속성을 변경 한 다음 배열로 푸시하기 만하면됩니다.

    동일한 객체를 재사용 할 수없는 이유를 이해하려면 "객체는 JavaScript에서 참조로 전달됩니다"를 조사하면 많은 정보를 찾을 수 있습니다.

    const allDishes = [{ // changed
        DishId: 40,
        DishName: "Mango",
        TimeSpan: 98
      },
      {
        DishId: 41,
        DishName: "Banana",
        TimeSpan: 99
      },
      {
        DishId: 42,
        DishName: "Orange",
        TimeSpan: 100
      }
    ];
    const dishesArray = []; // changed
    for (let i = 0; i < allDishes.length; i++) { // changed
      const dish = {} // NEW
      dish.DishId = allDishes[i].DishId;
      dish.DishName = allDishes[i].DishName;
      dishesArray.push(dish);
    }
    console.log(dishesArray);
    
    

    또한하고 싶은 일을하는 방법에 대한 또 다른 방법이 있습니다. 맵이라고하며 이전 배열을 기반으로 새 배열을 반환합니다. 또한 다음과 같이 객체 리터럴을 사용할 수 있습니다 (속성을 선언하는 대신 속성이 이미 포함 된 객체를 만들 수 있음).

    const allDishes = [{
        DishId: 40,
        DishName: "Mango",
        TimeSpan: 98
      },
      {
        DishId: 41,
        DishName: "Banana",
        TimeSpan: 99
      },
      {
        DishId: 42,
        DishName: "Orange",
        TimeSpan: 100
      }
    ];
    const dishesArray = allDishes.map((dish) => ({
      DishId: dish.DishId,
      DishName: dish.DishName
    }));
    console.log(dishesArray);
    
    

    기타 관찰 : 항상 사용 const 또는 let 변수를 선언합니다. 그것들은 다음과 같이 표현됩니다. changed 코드의 주석

  • 답변 # 2

    배열의 맵 속성을 다음과 같이 직접 사용할 수 있습니다.

    let dishesArray = allDishes.map(dish => dish = {DishId : dish.DishId, DishName: dish.DishName })
    
    

  • 답변 # 3

    만들 때 dishes 루프 외부에서 동일한 참조를 배열에 반복적으로 푸시합니다. 아래 예에서는 다시 초기화합니다. dishes 모든 루프에서 새 참조를 생성합니다.

    내 코드는 초기화 위치를 제외하고는 코드와 동일합니다. dishes .

    allDishes = 
        [{ DishId: 40, DishName: "Mango", TimeSpan: 98},
         { DishId: 41, DishName: "Banana", TimeSpan: 99},
         { DishId: 42, DishName: "Orange", TimeSpan: 100}];
    var dishesArray = []; 
    for(i = 0; i < allDishes.length; i++){
      let dishes = {};   // re-initialize this to a new reference
      dishes.DishId=  allDishes[i].DishId;
      dishes.DishName =  allDishes[i].DishName;
      dishesArray.push(dishes);
    }
    console.log(dishesArray);
    
    

  • 답변 # 4

    당신이 사용할 수있는 map() 각 개체에 다음 사용 filter() 의 위에 Object.entries 원하는 키만 얻은 다음 사용하여 다시 변환하십시오. Object.fromEntries

    const arr = [{ DishId: 40, DishName: "Mango", TimeSpan: 98},
     { DishId: 41, DishName: "Banana", TimeSpan: 99},
     { DishId: 42, DishName: "Orange", TimeSpan: 100}];
     
    function extractProps(array, props){
      return array.map(obj => 
                   Object.fromEntries(
                      Object.entries(obj).filter(([k, v]) => props.includes(k))
                   )
             )
    }
    console.log(extractProps(arr, ["DishId", "DishName"]))
    
    

관련 자료

  • 이전 python - 목록의 요소를 다른 열이있는 csv에 쓰는 방법
  • 다음 Cesium의 모델을 항상 밝게 유지하는 방법