for 循环、.map() 或 .filter() 什么时候性能更好？

Question

基于this 问题，想法是根据对象可能具有的某些属性值在对象数组中查找对象，因此我制作了这个脚本来检查哪种方法更快：

const elementsInObject = 1000000;
const lengthOfItems = 5;

//just random text
function randomText() {
    var text = "";
    var possible = "abcdefghijklmnopqrstuvwxyz";

    for (var i = 0; i < lengthOfItems; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}


//ccreation of object
console.time("creatingObject");
var arrObj = [];
for (let i = 0; i < elementsInObject; i++) {
  let el = {
    prop1: randomText(),
    prop2: randomText(),
    types: [randomText(), randomText()]
  };

  arrObj.push(el);
}
console.timeEnd("creatingObject");


console.time("forFor");
var result = [];
for (let i = 0; i < arrObj.length; i++) {

     for(let q=0; q<arrObj[i].types.length; q++){

        if (arrObj[i].types[q] == "abcde") {
            result.push(arrObj[i]);
          }

     }

    }
console.timeEnd("forFor");

console.time("forIncludes");
var result = [];
for (let i = 0; i < arrObj.length; i++) {
  if (arrObj[i].types.includes("abcde")) {
    result.push(arrObj[i]);
  }
}
console.timeEnd("forIncludes");

console.time("filterIncludes");
var result = arrObj.filter(obj => {
  return obj.types.includes("abcde");
});
console.timeEnd("filterIncludes");

console.time("mapIncludes");
var result = [];
arrObj.map(obj => {
  if (obj.types.includes("abcde")) {
    result.push(obj);
  }
});
console.timeEnd("mapIncludes");

console.time("filterIndexOf");
var result = arrObj.filter(obj => {
  return obj.types.indexOf("abcde") > -1;
});
console.timeEnd("filterIndexOf");

这个想法是检查哪种方法更快且可扩展，我在这个例子中发现 for inside for 是解决这个问题的最快算法（在 node 和 chrome 中，而不是 firefox）。所以问题是：什么时候 filter() 或 map() 比 for 有更好的性能？

Answer 1

可能 filer 是最好的，您的循环执行良好，因为您最终得到的是空数组，但如果不是这种情况，您的循环正在执行推送操作。

包含的性能可能比 indexOf 稍好，但并不明显。

在 cmets 中，您注意到您想要一种通用的过滤方法，使用 getter 和比较器是非常通用的full example here。

const elementsInObject = 5000000;

//random number between 1 and 11
function randomNum() {
  return Math.floor(Math.random()*100)+1
}

console.time("createObjectArray");
var arrObj = [...new Array(elementsInObject)].map(()=>({
  prop3: [randomNum(),randomNum()]
}));
console.timeEnd("createObjectArray");

const filterFn = getter => comparer => o =>
  comparer(getter(o));

//get a property
const getProp3 = o => o.prop3;
//you can write getB I'm sure

// compare contains
const contains = needle => haystack =>
  haystack.includes(needle);

// compare indexOf
const indexOf = needle => haystack =>
  haystack.indexOf(needle)>-1;

const filterProp3 = filterFn(getProp3);

console.time("filterContains");
arrObj.filter(
  filterProp3(contains(1))
);
console.timeEnd("filterContains");

console.time("filterIndexOf");
arrObj.filter(
  filterProp3(indexOf(1))
);
console.timeEnd("filterIndexOf");
console.log(
  "Items found:",
  arrObj.filter(
    filterProp3(contains(1))
  ).length
);