p5.js rect()参数类型错误：Number与number差异及解决方法

1. JavaScript不是不关注数据类型吗？ #

JS是弱类型语言，确实会自动做隐式类型转换，但这不代表它没有类型区分。p5.js的API会做参数校验，确保传入的值是符合要求的有效数值——比如rect()需要的是原始数值类型，而不是数值包装对象或者无效数值（比如NaN、Infinity）。

2. Number和number的区别是什么？ #

• number是JavaScript的原始数据类型，我们平时写的1、3.14这种直接量都是这个类型，用typeof检测会返回"number"；
• Number是JS的内置构造函数，用new Number(1)创建的是一个数值包装对象，typeof检测会返回"object"。虽然包装对象在多数运算场景下会自动拆箱成原始number，但p5.js的参数校验会严格区分，只接受原始number类型的值。

3. 如何解决这个错误？ #

从你的代码和报错来看，大概率是计算出来的x或y出现了两种情况：要么是数值包装对象，要么是无效数值（比如NaN）。你可以这么处理：

方法一：强制转换为原始number #

在传入rect()时，用+运算符或者Number()把x、y强制转换成原始数值：

x = i * cos(noise(i, j, t + 1) / i) * 15;
y = i * sin(noise(i, j, t + 1) / i) * 15;
rect(
  +x, // 强制转为原始number
  +y,
  (i + 2) * 8 * (noise(0, i, t) + 0.5),
  (i + 2) * 8 * (noise(1, i, t) + 0.5)
);

方法二：检查是否存在除以0的情况 #

如果你的循环里i可能为0，那么noise(...) / i会得到Infinity，再乘以i（0）会得到NaN——NaN属于number类型，但p5.js不接受它作为坐标参数。这种情况下要确保循环从i=1开始，或者在计算前加判断：

if (i !== 0) {
  x = i * cos(noise(i, j, t + 1) / i) * 15;
  y = i * sin(noise(i, j, t + 1) / i) * 15;
  rect(x, y, (i + 2) * 8 * (noise(0, i, t) + 0.5), (i + 2) * 8 * (noise(1, i, t) + 0.5));
}

内容的提问来源于stack exchange，提问作者Sid Chou