在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）），最好的方法是数组情况，因为像矩阵乘法这样的东西对开发人员来说看起来更原生，并显示他的意图。