JavaScript 修改陣列內的 object

Question

我在嘗試使用 map function 修改嵌套 object 的名稱並返回修改后的 ZA8CFDE6331BD4BEB66AC911 時遇到問題

我正在嘗試使用雙 forEach 循環的方法，但我也失敗了。

 const myObject = [{ id: 1, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, { id: 2, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, ]; const alteredObject = myObject.map((thisChild) => { if (thisChild.id === 1) { thisChild.childrenList.map((item) => { if (item.id === 1) { return {...item, name: 'bar', }; } return item; }); } return thisChild; }); console.log(alteredObject);

//trying to get:
alteredObject = [
    {
      id: 1,
      childrenList: [
        {
          id: 1,
          name: 'bar',
        },
        {
          id: 2,
          name: 'foo',
        },
      ],
    },
    {
      id: 2,
      childrenList: [
        {
          id: 1,
          name: 'foo',
        },
        {
          id: 2,
          name: 'foo',
        },
      ],
    },
  ];

這是我第一次嘗試修改嵌套的 object。 通常有一組對象，我沒有任何問題，所以我不確定我做錯了什么

Answer 1

你只需要用你的 map 更新孩子，它就可以工作了。 像這樣：

 const myObject = [ { id: 1, childrenList: [ { id: 1, name: "foo" }, { id: 2, name: "foo" } ] }, { id: 2, childrenList: [ { id: 1, name: "foo" }, { id: 2, name: "foo" } ] } ]; const alteredObject = myObject.map((thisChild) => { if (thisChild.id === 1) { thisChild.childrenList = thisChild.childrenList.map((item) => { if (item.id === 1) { return {...item, name: "bar" }; } return item; }); } return thisChild; }); console.log(alteredObject);

如果你想用 forEach 來做：

 const myObject = [ { id: 1, childrenList: [ { id: 1, name: "foo" }, { id: 2, name: "foo" } ] }, { id: 2, childrenList: [ { id: 1, name: "foo" }, { id: 2, name: "foo" } ] } ]; const alteredObject = myObject.map((thisChild) => { if (thisChild.id === 1) { thisChild.childrenList.forEach((item) => { if (item.id === 1) { item.name = 'bar'; } return item; }); } return thisChild; }); console.log(alteredObject);

如果你可以修改你的 object 那么你可以用兩個 forEach 來做：

 const myObject = [ { id: 1, childrenList: [ { id: 1, name: "foo" }, { id: 2, name: "foo" } ] }, { id: 2, childrenList: [ { id: 1, name: "foo" }, { id: 2, name: "foo" } ] } ]; myObject.forEach((thisChild) => { if (thisChild.id === 1) { thisChild.childrenList.forEach((item) => { if (item.id === 1) { item.name = 'bar'; } return item; }); } }); console.log(myObject);

Answer 2

如您所知， Array.prototype.map()返回一個包含修改后版本的新 Array。
In your first map function myObject.map() , you aren't saving the second map function modified result as the childrenList content.
因此不會在第一個 map function 中存儲任何更改，結果也不會發生任何更改。

const alteredObject = myObject.map((thisChild) => {
  if (thisChild.id === 1) {
    // Here you should save the result of this 
    // Array.prototype.map() Function as the new 'thisChild.childrenList'
    thisChild.childrenList = thisChild.childrenList.map((item) => {
      // ...
    });
  }
  return thisChild;
});

 const myObject = [{ id: 1, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, { id: 2, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, ]; const alteredObject = myObject.map((thisChild) => { if (thisChild.id === 1) { thisChild.childrenList = thisChild.childrenList.map((item) => { if (item.id === 1) { return {...item, name: 'bar', }; } return item; }); } return thisChild; }); console.log(alteredObject);

Answer 3

這可以通過幾個 map 調用來完成，如果 firstChild id 為 1 並且葉子 object id 也為 1，我們將更改name值：

 const myObject = [ { id: 1, childrenList: [ { id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, { id: 2, childrenList: [ { id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, ]; const alteredObject = myObject.map((thisChild) => { return {...thisChild, childrenList: thisChild.childrenList.map(({id, name}) => { return { id, name: (thisChild.id === 1 && id === 1)? 'bar': name }; })} }); console.log(alteredObject)

 .as-console-wrapper { max-height: 100%;important }

Answer 4

您可以使用以下代碼：

 const myObject = [ { id: 1, childrenList: [ { id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, { id: 2, childrenList: [ { id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, ]; let result = myObject.map( el => el.id === 1? {...el, childrenList: el.childrenList.map(child => child.id === 1? {...child, name: 'bar'}: child)}: el ); console.log(result);

Answer 5

數組map方法創建了一個新數組 ( mdn )，因此父 object alteredObject仍然具有指向原始數組的childrenList鍵。 要解決這個問題，您可以將新數組的分配添加到鍵：

thisChild.childrenList = thisChild.childrenList.map(...)

這樣，鍵將指向新創建的數組

Answer 6

你錯過了return ； 您必須將修改后的thisChild返回為{...thisChild, childrenList:modifiedChildrenList}

 const myObject = [{ id: 1, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, { id: 2, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, ]; const alteredObject = myObject.map((thisChild) => { if (thisChild.id === 1) { return {...thisChild,childrenList:thisChild.childrenList.map((item) => { if (item.id === 1) { return {...item, name: 'bar', }; } return item; }) } } return thisChild; }); console.log(alteredObject);