Question

我正在尝试在ReactJS中创建此记忆游戏，并制作了一个数组，其中添加了4个随机数。现在，每当我按下Play游戏时，我都需要用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

Answer 1

解决方案：

替换：

keepArray = [...keepArray + rand]

具有：

keepArray = [...keepArray, rand]

说明：

spread运算符（...）实际上是在“扩展”您的数组，这就是为什么需要逗号的原因。下面的示例可能有助于可视化它：

// 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答案。

Answer 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"]

这是您看到这些逗号的实际原因。

随机逗号出现在数组ReactJS中

2 个答案:

解决方案：

说明：