for,forEach,map,filter遍历效率之前端性能优化

原创已于 2022-04-02 16:10:33 修改 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-04-02 16:09:08 首次发布

本文探讨了前端性能优化中遍历算法的重要性，通过比较for、forEach、filter和map在解决两数之和问题上的效率，发现for循环表现最佳，filter次之，而forEach和map效率较低。优化建议包括在适用情况下使用filter代替map，减少不必要的数学计算，以及避免过多的日志输出以提升性能。

关于前端性能优化有很多种方式，这里想谈谈算法中最常用的遍历的优化，其实以前我一直认为遍历效率的提升没有多大，但是看到实际数据后觉得这块的优化应该是实用性非常高的
下面通过一个例子来对比几者之间的差别

现有需求：

给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。

你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。

1.for

var twoSum = function(nums, target) {
    var temp;
    for (let i = 0; i < nums.length; i++) {
        for (let j = 0; j < nums.length; j++) {
            if (nums[i] + nums[j] === target && i !== j) {
                temp = [j, i];
            }
        }
    }
    return temp;
};

在这里插入图片描述

2.forEach

var twoSum = function(nums, target) {
    var temp;
    nums.forEach((num1, index1) => {
        nums.forEach((num2, index2) => {
            if (num1 + num2 === target && index1 !== index2) {
                temp = [index2, index1];
            }
        }) 
    });
    return temp;
};

在这里插入图片描述
3.filter

var twoSum = function(nums, target) {
    var temp;
    for (let i = 0; i < nums.length; i++) {
        let want = target - nums[i];
        nums.filter((e, ii) => {
            if (e === want && ii !== i) { 
                temp = [ii, i];
            }
        });
    }
    return temp;
};

在这里插入图片描述
在这里将want变量直接放入循环中从而减少一个块级作用域变量定义

var twoSum = function(nums, target) {
    var temp;
    for (let i = 0; i < nums.length; i++) {
        nums.filter((e, ii) => {
            if (e === target - nums[i] && ii !== i) { 
                temp = [ii, i];
            }
        });
    }
    return temp;
};

发现其执行时间有小幅度增加，而内存消耗并未减少
在这里插入图片描述

4.map

var twoSum = function(nums, target) {
     var temp;
     nums.map((num1, index1) => {
         nums.map((num2, index2) => {
             if (num1 + num2 === target && index1 !== index2) {
                 temp = [index2, index1];
             }
         }) 
     });
     return temp;
};

在这里插入图片描述

var twoSum = function(nums, target) {
     var temp;
     nums.forEach((num1, index1) => {
         nums.map((num2, index2) => {
             if (num1 + num2 === target && index1 !== index2) {
                 temp = [index2, index1];
             }
         }) 
     });
     return temp;
};