for_forEach_map有什么区别?区别大了

简介: for、forEach、map日常都在用,但是你知道他们有什么区别吗?为什么要有这么多功能相似的东西?性能怎么样?看这里,我告诉你

1.简单测下性能区分

      // 计算upVotes的和
    const posts = [
        {id: 1, upVotes: 2},
        {id: 2, upVotes: 18},
        {id: 3, upVotes: 1},
        {id: 4, upVotes: 30},
        {id: 5, upVotes: 50}
    ];
    let sum = 0;
    console.time('reduce');
    sum = posts.reduce((s, p)=> s+=p.upVotes,0);
    console.timeEnd('reduce')
    sum = 0;
    console.time('for 循环');
    for(let i=0; i<posts.length; i++) {
        sum += posts[i].upVotes;
    }
    console.timeEnd('for 循环');

    sum = 0;
    console.time('for each');
    posts.forEach(element => {
        sum += element.upVotes;
    });
    console.timeEnd('for each');

    sum = 0;
    console.time('for of');
    for (let item of posts){
        sum += item.upVotes;
    }
    console.timeEnd('for of');

    sum = 0;
    console.time('map');
    posts.map(item=>{
        sum += item.upVotes;
    })
    console.timeEnd('map');
    //结果:
    // reduce: 0.059ms
    // for 循环: 0.003ms
    // for each: 0.014ms
    // for of: 0.018ms
    // map: 0.012ms

由上述小例子看到:性能等级为:for>map>for each>for of>reduce
但在使用途中,按需使用方法即可
如果你需要将数组按照某种规则映射另一个数组,就应该用 map。
如果你需要进行简单遍历,用 forEach 或者 for of。
如果你需要对迭代器进行遍历,用 for of。
如果你需要过滤出符合条件的项,用 filter。
如果你需要先按照规则映射为新数组,再根据条件过滤,那就用一个 map 加一个 filter。
不要担心这样会慢,小数据量服务器根本不在意。
如果你真的需要考虑性能,或者有 break 的需求,就用 for 吧

1. for

循环代码块一定的次数,for循环可以设置i的开始数字,可以从任何一个位置开始循环

2. forEach

forEach是一个迭代器,负责遍历可迭代对象。那么遍历迭代可迭代对象分别是什么呢。
遍历:指的对数据结构的每一个成员进行有规律的且为一次访问的行为。
迭代:迭代是递归的一种特殊形式,是迭代器提供的一种方法,默认情况下是按照一定顺序逐个访问数据结构成员。迭代也是一种遍历行为。
可迭代对象:ES6中引入了 iterable 类型,ArraySetMapStringargumentsNodeList 都属于 iterable,他们特点就是都拥有 [Symbol.iterator] 方法,包含他的对象被认为是可迭代的 iterable。

forEach方法用来调用数组的每个元素,将元素传给回调函数
forEach对于空数组是不会调用回调函数的,即没有返回值。
forEach不可以使用return/break中断循环
使用try/catch可以跳出forEach循环:

  try {
        let arr = [1, 2, 3, 4];
        arr.forEach(function (item, index) {
            //跳出条件
            if (item === 3) {
                throw new Error("LoopTerminates");
            }
        });
    } catch (e) {
        if (e.message !== "LoopTerminates") throw e;
    }

3.map

map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
map方法不会对空数组进行检测,若arr为空数组,则map方法返回的也是一个空数组,map方法不会改变原始数组。
map 最慢的原因是因为 map 会返回一个新的数组,数组的创建和赋值会导致分配内存空间,因此会带来较大的性能开销。如果将map嵌套在一个循环中,便会带来更多不必要的内存消耗。当大家使用迭代器遍历一个数组时,如果不需要返回一个新数组却使用 map 是违背设计初衷的

4. for in

遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)
for/in 循环会访问该对象的原型,应该用在非数组对象的遍历上,不建议使用该方法遍历数组。

for in与for的区别
数组既可以用for循环,也可以用for in循环(区别:for循环可以设置i的开始数字,可以从任何一个位置开始循环,但是for in循环不能设置,只能从第一个到最后一个进行循环)。
json只能用for in循环,因为json的下标是没有规律的字符串,没有length

目录
相关文章
|
6月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
103 3
|
6月前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
54 7
|
1月前
|
存储 JavaScript 前端开发
Set、Map、WeakSet 和 WeakMap 的区别
在 JavaScript 中,Set 和 Map 用于存储唯一值和键值对,支持多种操作方法,如添加、删除和检查元素。WeakSet 和 WeakMap 则存储弱引用的对象,有助于防止内存泄漏,适合特定场景使用。
|
1月前
|
存储 缓存 Java
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
36 1
WK
|
2月前
|
Python
map和filter的区别是什么
`map()`和`filter()`均为Python中的高阶函数,前者针对可迭代对象中的每个元素执行指定操作,如数值翻倍或字符串转大写;后者则筛选出符合条件的元素,例如仅保留偶数或非空字符串。两者均返回迭代器,并可通过`list()`等函数转换为所需的数据结构。具体使用时,应依据实际需求和场景选择合适的函数。
WK
19 1
WK
|
2月前
map和filter的区别是什么
在编程中,`map` 和 `filter` 是处理数组或集合时常用的两个函数。`map` 用于将每个元素通过指定函数转换后生成新的数组,而 `filter` 则根据条件筛选出符合条件的元素组成新数组。两者的主要区别在于:`map` 的返回数组长度与原数组相同,但元素被转换;`filter` 的返回数组长度可能不同,只包含符合条件的元素。
WK
30 2
|
2月前
数组方法中的`forEach()`方法和`map()`方法有什么区别?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
|
3月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。
|
3月前
|
分布式计算 Serverless 数据处理
|
3月前
|
存储 Java 索引