随机逗号出现在数组 ReactJS

Posted 2023-04-14

【中文标题】随机逗号出现在数组 ReactJS

【英文标题】：Random commas appear in array ReactJS

【发布时间】：2019-06-04 02:45:39

【问题描述】：

我正在尝试在 ReactJS 中创建这个记忆游戏，并且我创建了一个数组，在其中添加了 4 个随机数。现在每次我按下玩游戏时，我都需要用 4 个随机数 0 到 3 填充数组，但我不断得到随机逗号，这些逗号在数组中无处不在。我对 React 还很陌生，因此不胜感激。

我尝试了不同的填充数组的方法，但逗号仍然出现。附言。 keepArray 在 for 循环之前被初始化。

for (let i = 0; i < 4; i++) 
      let rand = Math.floor(Math.random() * 4)
      keepArray = [...keepArray + rand]
      console.log(keepArray)
    

运行截图：http://prntscr.com/nx9sqg

【参考方案1】：

解决方案：

替换：

keepArray = [...keepArray + rand]

与：

keepArray = [...keepArray, rand]

---

说明：

扩展运算符 (...) 实际上是“扩展”您的数组，这就是您需要逗号的原因。下面的示例可能有助于将其可视化：

// Let's start with a simple array:
var myArray = [1, 2, 3];

// Now, we add another element to it using spread:
var updatedArray = [...myArray, 4];

// Here, ...myArray is translated to [1, 2, 3]
// That means that the above could be read as:
var updatedArray = [1, 2, 3, 4];

参考：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/Spread_syntax

---

有关“+”行为的额外解释，请参阅 Pavan Bahuguni 的回答。

【讨论】：

我更新了答案以添加更好的解释。让我知道这是否有意义:)

我现在明白了。很棒的解释谢谢！我在 5 分钟内投票 :)

很高兴知道它有帮助！如果这解决了您的问题，请考虑接受它作为正确答案。祝你的项目好运！

【参考方案2】：

上面的答案确实解决了问题，但行为的真正原因如下。

+ 运算符被重载以用于数字加法和字符串连接的目的。当 + 接收到任一操作数的对象（在您的情况下包括数组）时，它首先调用该值的 ToPrimitive 抽象操作，然后调用带有数字上下文提示的 [[DefaultValue]] 算法。哪个实习生在数组上调用 toString 方法。

var val = [1,2,3] + 1;
console.log(val); // "1,2,31"

然后你试图像这样在一个数组中传播那个字符串，

var arr = [...val];
console.log(arr); // ["1", ",", "2", ",", "3", "1"]

这就是您看到这些逗号的真正原因。

【讨论】：

感谢您更深入的解释！确实有帮助

很好的解释！我将参考您的答案进行更新。