javascript - (let { items } = user) 是否与说 (user.items) 完全相同？

Question

我试图以不同的方式得出下面的答案。

使用let {items} = user解构而不是user.items.

但是 usinglet {items} = user不会返回更改的原始数组（将“！”添加到项目中）。

const array = [
    {
        username: "john",
        team: "red",
        score: 5,
        items: ["ball", "book", "pen"]
    },
    {
        username: "becky",
        team: "blue",
        score: 10,
        items: ["tape", "backpack", "pen"]
    },
    {
        username: "susy",
        team: "red",
        score: 55,
        items: ["ball", "eraser", "pen"]
    },
    {
        username: "tyson",
        team: "green",
        score: 1,
        items: ["book", "pen"]
    },

];

方法1：
它不更改内部的项目array并返回整个数组，最后没有更改。

// BONUS: 
// create a new list with all user information, 
// but add "!" to the end of each items they own.

const newList = array.map(user => {
  let { items } = user;
  items = items.map(item => {
    return item + "!"
  });
  return user;
});

方法2：
但是，这种方法似乎可行。

const answer = array.map(user => {
  user.items = user.items.map(item => {
    return item + "!"
  });
  return user;
});

这是我的观察：

• user.itemsis 抓取 中的项目array并随后返回带有更改的数组，但是

• let { items } = user不允许对返回的数组实施更改。

我想知道为什么会发生上述情况。

标签： javascriptarraysobjectnestedarray.prototype.map

Answer 1

您没有看到更改，因为您正在重新分配局部变量而不是user.items属性。看看稍微修改过的代码，希望它为什么不工作会很明显。

const newList = array.map(user => {
    // Instead of using destructuring assignment
    // let's manually do the same thing.
    //let { items } = user;
    let items = user.items;
    // Now items will be replaced by the result from map()
    items = items.map(item =>{
        return item + "!"
    });
    // user is returned without ever modifying user.items
    return user;
});