在JavaScript中处理点/小向量的最有效方法是什么？

Question

目前我正在创建一个基于Web的（= JavaScript）应用程序，它使用了很多“点”（=小的，固定大小的向量）。基本上有两种表现方式：

var pointA = [ xValue, yValue ];

和

var pointB = { x: xValue, y: yValue };

所以翻译我的观点会有点像：

var pointAtrans = [ pointA[0] + 3, pointA[1] + 4 ];
var pointBtrans = { x: pointB.x + 3, pointB.y + 4 };

从程序员的角度来看，两者都很容易处理（对象变体更具可读性，特别是因为我主要处理的是2D数据，很少使用3D而很难使用4D - 但从来没有更多。它会总是适合x，y，z和w）

但我现在的问题是：
从语言的角度来看，最有效的方法是什么？理论上和实际的实施方式？ 什么是内存要求？
阵列与对象的设置成本是多少？
...

我的目标浏览器是FireFox和基于Webkit的浏览器（Chromium，Safari），但在IE和Opera下获得很好的（=快速）体验并不会有什么坏处......

Answer 1

阵列的创建速度更快，但如果考虑访问时间，则相反。另请注意，构造函数表单可快速创建和访问。它在现代实施中具有最好的两个词new Vector(x, y) - [Test]

浏览器已经过测试： Chrome 10，Firefox 3.6，Firefox Beta 4.0b9，IE 9 Preview 7，Opera 11

Answer 2

我的预感是Arrays会给你更好的表现。（！）

也就是说，在您的Array示例中，代码的可读性明显低于Object示例中的可读性。收益可能很小，所以我建议你做一些基本的基准测试和背面的数学计算，以便在权衡中加上实数。

首先，你可以

• 启动计时器
• 构建1千个随机[X，Y] Arrays
• 访问他们的字段100万次。
• 重复Objects并进行比较。

（！） - 为什么基准测试如此有用的一个很好的例子：数组确实更适合创建，但对象更适合访问，这可能非常重要（取决于您的需要）。 galambalazs为这个案例写了一个很好的测试：http://jsperf.com/object-vs-array

Answer 3

感谢所有答案和输入。非常有趣的是galamalazs编写的测试结果：http://jsperf.com/object-vs-array/2

将所有方面放在一起，我们将得到：

• 数组应按数字而非字符串索引（arr [0] vs. arr ['0']）
• Object和Array表单之间的性能差异主要是实现而不是类型。
• 没有赢家，它从实施变为实施
• 今天已知的浏览器的未来实现也可能改变谁赢了 - 无论哪种方式
• 在Chromium上，Arrays将使用Object的一半内存 - 但我们谈论的是100 MB实例的40 MB和80 MB - 每个实例为40到80个字节。
• 其他JavaScript实现的内存消耗尚不清楚 - 但它最有可能与性能不同。

所以最后两个选项都是合理的，只有代码可读性才能做出决定！

如果它主要用于存储数据并且工作量很小（比如我当前的项目），那么Object方式就是可行的方法。 mouse.x和mouse.y通常会显示开发人员的意图。

在大多数面向数学的应用程序中，使用矢量数学（如坐标变换（尤其是3D）），最好的方法是数组情况，因为像矩阵乘法这样的东西对开发人员来说看起来更原生，并显示出他的意图。