最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

arrays - find() vs map() in JavaScript - Stack Overflow

programmeradmin0浏览0评论

Say I have the following array, and I want to change the value of a property inside one of the objects:

var array = [{id: 1, exampleBoolean: false}, {id: 2, exampleBoolean: false}];

I've always used map for something like this, but I saw someone use find instead and am curious if that is a legitimate way to do it? The following functions both technically work (at least in Chrome), but I want to know if they're both technically "correct". Reading docs, my interpretation is that you should use map, but it isn't 100% clear to me whether or not I am right.

With find:

changeValueWithFind(id: number) {
  array.find(item => item.id === id).exampleBoolean = true;
}

With map:

changeValueWithMap(id: number) {
    array = array.map(item => {
      if (item.id === id) {
        return {
          ...item,
          exampleBoolean: true,
        }
      }
      return item;
    });
  }

Say I have the following array, and I want to change the value of a property inside one of the objects:

var array = [{id: 1, exampleBoolean: false}, {id: 2, exampleBoolean: false}];

I've always used map for something like this, but I saw someone use find instead and am curious if that is a legitimate way to do it? The following functions both technically work (at least in Chrome), but I want to know if they're both technically "correct". Reading docs, my interpretation is that you should use map, but it isn't 100% clear to me whether or not I am right.

With find:

changeValueWithFind(id: number) {
  array.find(item => item.id === id).exampleBoolean = true;
}

With map:

changeValueWithMap(id: number) {
    array = array.map(item => {
      if (item.id === id) {
        return {
          ...item,
          exampleBoolean: true,
        }
      }
      return item;
    });
  }
Share Improve this question asked Apr 7, 2021 at 18:36 BryanBryan 3,00914 gold badges67 silver badges105 bronze badges 3
  • 5 .map() goes through all entries then creates a new array using the function supplied. .find() locates a specific entry by a predicate and returns it. They are both "legitimate" in the sense that these are both things that the methods are supposed to do. Which one is more appropriate depends on what result you're after. – VLAZ Commented Apr 7, 2021 at 18:40
  • So if your goal is to merely change one property in one object, find probably makes more sense? – Bryan Commented Apr 7, 2021 at 18:41
  • 1 Yes, most likely. Unless you want to avoid mutating the array or the objects. But most of the time it's going to be fine. – VLAZ Commented Apr 7, 2021 at 18:42
Add a ment  | 

2 Answers 2

Reset to default 4

Actually using map() in this case would be an anti-pattern. map() is intended to be used to generate a new array processing individually each of the elements in the original one, and not modifying them. In order to go through the elements modifying them I'd remend forEach instead.

The solution with find() in this case is cleaner, but also take into account that find() could return undefined in case the element is not found.

That way, your example could be modified to:

changeValueWithFind(id: number) {
  const myElem = array.find(item => item.id === id);
  if (myElem) {
    myElem.exampleBoolean = true
  }
}

In my opinion in that case you need use the find(). Doesn’t see any reason to use map() here.

When to use map? .map() when you want to transform elements in an array. When to use find? .find() When you want to select a single element from an array.

More essential info:

https://medium./@JeffLombardJr/understanding-foreach-map-filter-and-find-in-javascript-f91da93b9f2c

发布评论

评论列表(0)

  1. 暂无评论