Pure For与ES6地图|选择哪一个? [英] Pure For vs. ES6 Map | Which one to choose?

查看:74
本文介绍了Pure For与ES6地图|选择哪一个?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我喜欢用JavaScript而不是使用map编写Pure For(nested Fors),因为我在性能方面比Map更好。是 True ,还是我一次又一次犯错?

I love writing Pure For(nested Fors) in JavaScript instead of using map because i learnt its better than Map in performance. Is it True or i'm making a mistake over and over again?

如果 For 更快,地图更干净,但选择哪个更好?

If For is faster, Map is cleaner, but which is better to select?

由于我在 ES6 Map 中表现不佳,谁能用更简洁的方式在地图下面编写代码?

Because i'm not good in ES6 Map, can anyone write below code with map in cleaner way?

let categoriesDataArray = [];
let productsDataArray = [];
if (!this.props.categoriesIsFetching) {
  for (let i = 0; i < this.props.categories.length; i += 1) {
    for (let j = 0; j < this.props.products.length; j += 1) {
      if (
        this.props.categories[i]._id === this.props.products[j].category_id
      ) {
        productsDataArray.push(this.props.products[j]);
      }
    }
    categoriesDataArray.push({
      title: this.props.categories[i].title,
      data: productsDataArray
    });
    productsDataArray = [];
  }
}


推荐答案

绝对最佳性能并不总是最大的问题。您是否真的想缩短每分钟运行一次的1-2毫秒的任务?对我来说,可读性和避免错误更为重要。

The absolute best Performance ain't always the biggest concern. Do you really care about shaving off 1-2 ms of a task that runs once a minute? To me, readability and avoiding bugs are more important.


如果 For 更快,则 Map 更干净,但是选择哪个更好?

If For is faster, Map is cleaner, but which is better to select?

总是更干净,直到遇到实际的性能问题。然后调试性能问题的出处;

always cleaner, untill you run into actual performance issues. And then debug where the performance issues come from; not just blind refactoring and "optimizing".

不仅盲目重构和 optimizing for map 相比。您使用嵌套循环的方法。

But your code has a bigger performance problem than for vs map. Your approach with the nested loops.

您的代码必须遍历每个类别的所有产品。

Your code has to iterate over all products for every single category.

let categoriesDataArray = [];

if(!this.props.categoriesIsFetching){   
    categoriesDataArray = this.props.categories.map(category => {
        return {
            title: category.title,
            data: this.props.products.filter(product => product.category_id === category._id)
        }
    });
}

同样,有时可以。这很简单,很容易表达……但是随着数组的变大,其执行时间将迅速增加。
然后,使用不同的方法比讨论for-loop或Array#map更有益。

And again, sometimes this is OK. It is simple, it is expressive ... but as the arrays are getting bigger, the execution time for this will rapidly increase. Then, using a different approach will be more benefitial than the discussion for-loops or Array#map

您可以重复执行一次相同的任务数组并使用地图。 O(n + m)而不是 O(n * m)的运行时。

You can do the same task by iterating once over each array and using a map. A runtime of O(n+m) instead of O(n*m).

let categoriesDataArray = [];

if(!this.props.categoriesIsFetching){
    const productsByCategoryId = {};

    categoriesDataArray = this.props.categories.map(category => {
        return {
            title: category.title,
            data: productsByCategoryId[category._id] = []
        }
    });

    this.props.products.forEach(product => {
        if(product.category_id in productsByCategoryId)
            productsByCategoryId[product.category_id].push(product);
    });
}

或作为循环:

let categoriesDataArray = [];

if(!this.props.categoriesIsFetching){
    const productsByCategoryId = {};

    for(let i=0; i<this.props.categories.length; ++i){
        let category = this.props.categories[i];
        let data = [];

        productsByCategoryId[category.__id] = data;
        categoriesDataArray[i] = {
            title: category.title,
            data: data
        }
    }

    for(let j=0; j<this.products.categories.length; ++j){
        let product = this.products.categories[j];

        if(product.category_id in productsByCategoryId){
            productsByCategoryId[product.category_id].push(product);
        }
    }
}

这篇关于Pure For与ES6地图|选择哪一个?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆