(我的代码全部关于HTML和Javascript)我有一个包含2万个元素的数组。并且我想自动完成一个搜索框(带有onchange事件)。我正在使用这段代码
if(sozler[i].startsWith(writtenText)) {
commonWords.innerHTML += '<li>' + sozler[i] + '</li>';
}
但是要花很多时间 有没有最佳版本?
我建议按字母顺序将它们分成不同的部分,如下所示:
let data={
"a":[
"aabc",
"abcd",
"accdsd",
"apple",
"azsdfsdf"
],
"b":[
"ba",
"bc",
"bddkjfn"
]
}
之后,使用搜索键中的第一个字母从对象访问数组中的一个,其中数据从a拆分
let writtenText="apple"; // search key
sozler[writtenText[0]].forEach(word=>{
if(word.startWith(writtenText))
{
commonWords.innerHTML += '<li>' + word + '</li>';
}
});
通过这种方法,您将数据划分为26个部分(az),并且当您从数据中选择任何数组时,元素的数量将大大少于原始元素,并且会更快。
如果您不知道如何将数组转换为我所示的数据格式,请使用此功能
function convertData(data)
{
let result={};
"abcdefghijklmnopqrstuvwxyz".split("").forEach(key=>{
result[key]=[];
});
data.forEach(word=>{
result[word[0]].push(word);
});
return result;
}
将结果存储在json文件中,或者根据您的喜好保存并记住convertData()
供一次使用,执行后,将数据保存为某种形式以备后用。
如果您需要在html呈现方面更好的性能,请替换
commonWords.innerHTML += '<li>' + word + '</li>';
与
let li=document.createElement("li");
li.innerHTML=word;
commonWords.appendChild(li);
第二行中的行数更多,但在html中添加大量节点时,它的性能很好。本文很好地解释了innerHTML与createElement,使用innerHTML+=
将使浏览器重新呈现其他同级元素,但是在appendChild()
没有。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句