对象数组 vs 分隔字符串数组的数组

Question

我需要创建一个可搜索的项目数组，但我不确定是应该创建自定义对象的数组还是只创建分隔字符串的数组。有人能给我一些关于哪种方法更好的建议吗？下面是一个示例：

var Arr = [  "Arts Tower|ArtsTower.htm|104", 
             "Arts Tower|ArtsTower.htm|1203", 
             "Arts Tower|ArtsTower.htm|Arts Tower"
          ];

var searchTerm = "tow"

var ArrResults = jQuery.grep(Arr, function(value, index){
 return (value.split("|")[2].toLowerCase().indexOf(searchTerm) != -1);
}); 

或者

function Item(name, url, str){
  this.name = name;
  this.url = url;
  this.str= str;
}

var Arr = new Array();
Arr.push(new Item("Arts Tower", "ArtsTower.htm", "104"));
Arr.push(new Item("Arts Tower", "ArtsTower.htm", "1203"));
Arr.push(new Item("Arts Tower", "ArtsTower.htm", "Arts Tower"));

var searchTerm = "tow"

var ArrResults = jQuery.grep(Arr, function(value, index){
  return (value.str.toLowerCase().indexOf(searchTerm) != -1);
}); 

我需要搜索数组并返回任何匹配项。哪种方法性能更好？

- Richard Banks

---

就我所见，性能几乎相同 - 只有在处理数百万个项目时才会注意到差异。撇开性能不谈，第二种方法更加优雅，因此建议采用它。 - Shadow The Spring Wizard

Answer 1

使用数组和对象构造器并将项目推入数组是过度的（对于像您这样的静态数据是不必要的）。

使用需要额外处理才能解析的专有编码（使用管道分隔符）也不是很理想。

我会选择以字面形式的对象数组。

var Arr = [
    { name: "Arts Tower", url: "ArtsTower.htm", str: "104" },
    { name: "Arts Tower", url: "ArtsTower.htm", str: "1203" },
    { name: "Arts Tower", url: "ArtsTower.htm", str: "Arts Tower" }
];

这也使得您更接近想要通过XHR（$.ajax）加载数据的点。

- Ates Goral

---

好的，听起来不错。我正在从页面元素中加载数据。我该如何将这些值加载到对象字面量数组中？ - Richard Banks

将属性名称用双引号括起来（以便成为有效的JSON），并将“var Arr =”后面的内容存储到您服务器上的文件中，然后通过“$.getJSON()”获取即可。 - Ates Goral

+1 我也会选择对象数组。对象属性访问比字符串操作更快。 - johnhunter

@Richard，我需要看到源元素才能回答这个问题。 - Ates Goral

谢谢@Ates，我现在明白了。感谢你的建议。 - Richard Banks

Answer 2

我不知道你的建议中哪一个更快，但我个人会使用第二个示例。这是因为稍后要使用ArrResults数组。如果该数组包含字符串，则每次使用结果时都必须将其拆分，例如：ArrResults[0].split('|')[0]而不是ArrResults[0].name

- Thor Jacobsen