Array(4) 有 6 个元素答案

【问题标题】：Array(4) has 6 elements [closed]Array(4) 有 6 个元素
【发布时间】：2019-03-18 15:42:25
【问题描述】：

我遇到了一个问题，我有一个包含神秘重复项的数组。

在firebase中，我的对象包含数组

{
   ink_colors:
      0: 'Mauve',
      1: 'Mineral',
      2: 'Mocha',
      3: 'Navy' 

}

Firebase 网络控制台：

当我的 React 应用接收到对象时，控制台会报告

console.log(snapshot.val().ink_colors);

> Array(4) [ "Mauve", "Mineral", "Mocha", "Navy" ]

但是

当访问数组时，它显然有 6 个项目

temp1.ink_colors
// => [ "Mauve", "Mineral", "Mocha", "Navy", "Mauve", "Mauve" ]

在 Chrome 72.0.3626.121 中

在 Firefox 65.0.1 中

尝试使用控制台日志和调试器调试此问题，我将控制台输出保存在全局变量 temp1 中，并得到两个不同的结果：

function receive(payload){
   console.log(payload);
   debugger;
}

> payload.ink_colors
< (4) ["Mauve", "Mineral", "Mocha", "Navy"]

> temp1.ink_colors
< (6) ["Mauve", "Mineral", "Mocha", "Navy", "Mauve", "Mauve"]

这告诉我问题是不是具有意外空数组值的典型 firebase 数组陷阱。

NPM 包：

反应：16.8.2

redux：4.0.1

火力基地：5.7.2

【问题讨论】：

还有别的东西在访问它，设置它吗？如果不查看更多代码，很难知道发生了什么。
我似乎很清楚，在您记录数组之后，有些东西正在添加两个额外的 "Mauve" 条目。单行log 输出显示了记录时存在的数组，而该条目的扩展显示了扩展时的数组。在您记录它和展开它的时间之间，该数组正在获得额外的条目。我怀疑如果不查看更多代码，就不可能说出执行这些不需要的添加的原因。
你应该代理你的数组并调试一个调用的方法。
我们缺少重现问题的完整代码。告诉我们它在一个地方是正确的，但在另一个地方不正确是一个很好的问题陈述，但不足以帮助您。尝试在任何人都可以轻松运行的单个独立代码中重现该问题。见how to create a minimal, complete, verifiable example。
请参阅this fiddle 以获取上述@apsillers 评论的演示。控制台记录一个五项数组，展开显示六项。

标签： javascript arrays firebase

【解决方案1】：

您似乎在某处更改了值的代码。以此为例：

let arr = ["Mauve", "Mineral", "Mocha", "Navy"];
debugger
// somewhere in the code, the arr is being modified
arr.length = 6;
arr.fill('Mauve', -2)
// where you are trying to log arr
console.log(arr)

现在，打开开发者工具，运行上面的sn -p，你会看到arr的长度是4。但实际上你可以看到arr的长度是6，你注意到它在@之后被修改了987654322@正在使用中。

如果您无法找到罪魁祸首，那么您可以尝试使用Object.freeze 进行肮脏的修复：

let arr = ["Mauve", "Mineral", "Mocha", "Navy"];
Object.freeze(arr)
// somewhere in the code, the arr is being modified
arr.length = 6;
arr.fill('Mauve', -2)
// where you are trying to log arr
console.log(arr)

然后你就可以看到实际的问题，包含该文件使用这种修改的行。例如。在sn-p这里，可以看到：

Error: {
  "message": "Uncaught TypeError: Cannot assign to read only property '2' of object '[object Array]'",
  "filename": "https://stacksnippets.net/js",
  "lineno": 17,
  "colno": 5
}

所以现在，你知道它在哪里了。您终于可以解决问题，然后再次删除Object.freeze。

【讨论】：

【解决方案2】：

请确保您没有添加两次元素，如果做得正确，您可以改进将结果数组过滤为新的唯一元素数组。

看看：get-all-unique-values-in-a-javascript-array-remove-duplicates

这也可能是在 firebase 中添加元素的方法的问题。

【讨论】：