TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

63 pointsby saranshkover 3 years ago

8 comments

heydenberkover 3 years ago
Something that people may not see immediately is that flatMap is more general than map <i>and</i> filter. Say, for a contrived example, that you&#x27;d like to filter out the even numbers in an array, and then double the odd numbers that remain. Instead of:<p><pre><code> [1, 2, 3, 4, 5].filter(n =&gt; n % 2 === 1).map(n =&gt; n * 2) </code></pre> You can do:<p><pre><code> [1, 2, 3, 4, 5].flatMap(n =&gt; n % 2 === 1 ? [n * 2] : []) </code></pre> Again, this is a contrived example, but I think it&#x27;s interesting since the generality is not obvious (to me)
评论 #29811490 未加载
评论 #29811968 未加载
评论 #29811305 未加载
评论 #29813397 未加载
评论 #29811902 未加载
评论 #29821038 未加载
评论 #29812273 未加载
评论 #29814583 未加载
评论 #29813769 未加载
评论 #29811249 未加载
评论 #29811355 未加载
yawnxyzover 3 years ago
I&#x27;ve made it a habit to check Mozilla&#x27;s JS docs once in a while for functions like Flat() and FlatMap(). Sometimes if I find myself reaching for underscore&#x2F;lodash, I&#x27;ll check Mozilla docs first to see if there&#x27;s some new function that can let me omit using lodash.<p>I&#x27;m often delighted to find new convenience functions I can just use without adding another dependable.
评论 #29810664 未加载
评论 #29811224 未加载
评论 #29816826 未加载
评论 #29818471 未加载
评论 #29814241 未加载
Waterluvianover 3 years ago
I&#x27;ve always found `flatMap` to be interesting because it feels like a convenience function, combining .map(fn).flat() into one function. It&#x27;s interesting because JS doesn&#x27;t really have a lot of convenience functions that are this shallow (ie. that provide just minimal cleanup compared to the functions they&#x27;re wrapping).<p>Is there some specific reason that `flatMap` made the cut?
评论 #29810456 未加载
评论 #29812248 未加载
评论 #29810467 未加载
评论 #29810426 未加载
Rygianover 3 years ago
I have very little experience with arrays in JS, but I always have a nagging feeling that, if my algorithm needs me to flatten an array, then there is something wrong with the data structures I am using.<p>Example in the article is meaningless to me:<p><pre><code> array.map(x =&gt; [x \* 2]); &#x2F;&#x2F; [[2], [4], [6], [8]] array.flatMap(x =&gt; [x * 2]); &#x2F;&#x2F; [2, 4, 6, 8] </code></pre> because the right way would be array.map(x =&gt; x *2); anyway.<p>What am I missing? What is a realistic scenario where an array needs to be flattened?
评论 #29810825 未加载
评论 #29810830 未加载
评论 #29810727 未加载
评论 #29810794 未加载
评论 #29810745 未加载
评论 #29810747 未加载
评论 #29810839 未加载
评论 #29811158 未加载
_greim_over 3 years ago
I&#x27;m glad JS is adding these methods to Array. It would be nice if iterables had similar methods for working with lazy sequences, similar to Rust, but this isn&#x27;t practical since &quot;iterable&quot; is a protocol. Array can do it because it&#x27;s a class. Perhaps JS could also adopt something similar to Rust&#x27;s traits, such that implementing the protocol would make a set of related methods callable on that object.
vmchaleover 3 years ago
In J this is just , (ravel) <a href="https:&#x2F;&#x2F;code.jsoftware.com&#x2F;wiki&#x2F;Vocabulary&#x2F;comma" rel="nofollow">https:&#x2F;&#x2F;code.jsoftware.com&#x2F;wiki&#x2F;Vocabulary&#x2F;comma</a>
评论 #29810866 未加载
krylonover 3 years ago
This stirs up some memories of Perl, where flattening arrays&#x2F;lists is the default, and you need explicit references to have nested arrays or hash tables. I remember it used to be a kind of foot-seeking gun for newbies, but I never ran into trouble with it once I understood references (which isn&#x27;t super hard).
scotty79over 3 years ago
A lot of funtional primitives have really counterintuitive names for me. flatMap is one of them.
评论 #29813108 未加载