随机逗号出现在数组 ReactJS 中

Question

我正在尝试在 ReactJS 中创建这个记忆游戏，我制作了一个数组，在其中添加了 4 个随机数。现在每次我按下玩游戏时，我都需要用 4 个随机数 0 到 3 填充数组，但我不断得到数组中无处不在的随机逗号。我是 React 的新手，所以非常感谢您的帮助。

我尝试了不同的方法来填充数组，但逗号仍然出现。 Ps。 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]

解释：

扩展运算符 (...) 字面意思是 "spreading" 您的数组，这就是您需要逗号的原因。下面的示例可能有助于形象化：

// 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 中

Random commas appear in array ReactJS

javascript

arrays

reactjs

random

comma

解决方案：

解释：