Question

假设我有一个类似的产品清单：

let products = [
        {
          id: 1,
          name: 'pro1'
        },
        {
          id: 2,
          name: 'pro2'
        },
        {
          id: 3,
          name: 'pro3'
        }
      ]

所以，如果我有另一个selected状态。我可能有两个选择。例如：

选择1：

products[0].selected = true

Choice2：使用另一个变量来保存状态，例如：

let selectedIndex = 0 //or   let selectedId = 1

所以，我的问题是，在大多数情况下哪个更好？

例如：

products来自后端，并且可能逐页更改。并且将有一个或多个面板来操作所选产品的属性并将其发送到服务器。

Answer 1

如果一次可以选择多个产品，请选择＃1。

如果您只能选择1种产品，请选择选项2。

Answer 2

我会选择第2种选择

所选ID

let selectedId = 1

这是对选择2的改进，因为选择不依赖于实现。

如果要选择多个项目，我将实现一组选定的ID。

Answer 3

这取决于您如何显示当前选择的产品。

如果您将显示所有产品并突出显示选中的产品，则最好使用.selected = true方法，因为您将遍历所有产品，并且阅读起来稍微容易一些标记，然后比较selectedIndex与正在迭代的当前索引。

反之，如果仅显示所选产品，则.selected = true方法将要求进行products.filter调用，如果产品太多，这可能会很昂贵。

也许最好的选择是将两种方法结合使用，请保留选定的id而不是选定的索引。这不仅有助于.filter迭代，而且还可以让您重新订购产品。

Answer 4

使用选项1，可以同时选择多个产品，因为devices(for:)和product[0].selected可以为true。如果不希望这样做，则必须实现一些逻辑，该逻辑仅允许选择一种产品。事情很快就会变得复杂...因此，在这种情况下，选择2会更好。

另一方面，如果出于某种原因您的用例要同时选择多个产品，则最好将属性直接放在对象上（选项1）以便于访问和维护。

TLDR：这取决于...

保存js对象状态的更好方法？

4 个答案: