使用 Javascript 中的复杂对象 - 友好的初学者指南

当我第一次开始处理 JavaScript 中越来越复杂的对象（例如 API 数据）时，我注意到一些事情让我的工作变得相当慢。我没有花时间去理解对象的结构及其内部的数据。

我在一个全栈训练营学习，所以我看到很多人都有这种情况，尤其是编程新手：
我们喜欢直接上手尝试，写代码，然后看看会发生什么。这很有趣！有时也是一种好方法。
但对于复杂的对象和新手程序员来说……就没那么好了。

如果您有同样的问题，希望这会对您有所帮助。

理解我们的对象

在了解对象本身之前，请确保您熟悉 JavaScript 中值和引用之间的区别（如果这对您来说是新知识，这里是一个很好的补充）。

这是因为很多时候我们想要获取一个嵌套对象或数组并更改其中的一部分，并且我们需要自信地问自己：“我是否刚刚更改了数据中的实际对象？还是我只是更改了我创建的副本？”

现在，我该如何处理一个新的复杂对象？
假设我们想查看一家销售 NFT 的在线商店的数据。
我们的对象如下：

const NFTStore = {
  artPieces: [
    {
      pieceName: "Emo Flamingos",
      price: 30,
      ownerList: [
        {
          name: "Fida Ernest",
          userID: 23849,
          purchaseDate: "09/13/2021",
        },
        {
          name: "Eric Karger",
          userID: 23510,
          purchaseDate: "09/13/2021",
        },
      ],
    },
    {
      pieceName: "Where is my bit wallet",
      price: 100,
      ownerList: [],
    },
  ],
  storeCredits: 1000,
};

假设我们想将新买家添加到刚购买的商品的所有者列表中。
该如何处理呢？
这时你需要花时间阅读对象。
尝试提取其结构，即使是代码中的一小段注释也可以，例如：

// NFTStore {...}
// artPieces [piece1, piece2..]
//      piece1 {pieceName, price, ownerList}
//          ownerList [ owner1, owner2..]
//              owner {name, userID, purchaseDate}
// storeCredits (number)

我知道，说起来容易做起来难，但我保证，你投入的每一分钟，都能让你在写代码时节省至少 10 倍的时间。
谁不想成为一个 10 倍效率的程序员呢？😜

深入内心，但要有意识

现在我们已经熟悉了数据对象，可以更好地深入其中。
例如，让我们获取商店中第一件商品的价格，也就是著名的“Emo Flamingo”🦩。

我们现在先硬编码一下。
我们需要进入 NFTStore，找到第一个部分。
回顾一下之前看到的结构，这些部分位于 store 对象内部的一个数组中。
这意味着我们可以从以下代码开始：

const EmoFlamingoPrice = NFTStore.artPieces[0].price;

第一个点是因为 artPieces 是 NFTStore 对象内部的一个键。
数组索引是因为 artPieces 的值是一个数组。0 只是暂时的。
最后一个点是因为 price 是我们想要的对象“artPieces[0]”内部的键。
控制台日志将为您提供价格值：

console.log(EmoFlamingoPrice); //30

干得好！
现在我们可以再进一步了。

改变对象的内容

假设我们有一位新买家购买这件商品。

const buyer = {
  name: "Rose Daniel",
  userID: 23849,
  purchaseDate: "11/29/2021",
};

要将她添加为新买家，我们需要将买家对象推送到所有者数组，并将该物品的价格添加到 NFTStore 积分中。
我们想要的物品的所有者数组可以在这里找到：

NFTStore.artPieces[0].ownerList

所以我们可以简单地推动新买家：

NFTStore.artPieces[0].ownerList.push(buyer);
//see the list with new buyer :
console.log(NFTStore.artPieces[0].ownerList); 

太棒了！现在我们只需要获取商品的价格并将其添加到 NFTStore 积分中。价格已经知道了，所以接下来我们专注于获取商店的积分。
回顾一下结构体，试着看看怎么做……
很 简单——
它 只是 NFTStore 对象中的一个键而已 ！

NFTStore.storeCredits += NFTStore.artPieces[0].price;
console.log(NFTStore.storeCredits); //new credit is 1030

重构

现在我们可以概括一下，编写一个函数，获取买家和商品名称，并将买家添加到所有者列表中，并将其价格添加到商店积分中。
看看是否明白了，如果不明白，请给我留言，我会解释清楚的😁

function buyPiece(NFTStore, buyer, pieceName) {
  // get the piece using its name
  const piece = NFTStore.artPieces.find(
    (piece) => piece.pieceName === pieceName
  );
  // add buyer to owner list
  piece.ownerList.push(buyer);
  // add piece price to store credit
  NFTStore.storeCredits += piece.price;
}

.find 方法

'.find' 方法接收一个回调函数，该函数告诉它如何找到目标。'find' 会遍历数组（在本例中为艺术品），并针对每一件（艺术品）检查当前作品名称是否等于 buyPiece 函数指定的名称。
“find”返回第一个通过回调函数测试的结果，因此它适用于 ID 等唯一值 - 我使用了作品名称，但请注意，它可能不是唯一的！因此，实际上您应该使用 '.find' 通过 ID 进行搜索。

就是这样，希望我能帮助你们澄清这个有点令人困惑的话题。

我非常高兴收到评论、建议以及评论中的任何其他内容！