How to skip over an element in map

Question

How can I skip an array element in  map   My code   var sources   images map function  img        if img src split      pop        json       if extension is  json         return null     skip           else          return img src              This will return     img png   null   img png

User · Answer

I think the most simple way to skip some elements from an array is by using the filter() method.

By using this method (ES5) and the ES6 syntax you can write your code in one line, and this will return what you want:

_x000D_

let images = [{src: 'img.png'}, {src: 'j1.json'}, {src: 'img.png'}, {src: 'j2.json'}];_x000D_
_x000D_
let sources = images.filter(img => img.src.slice(-4) != 'json').map(img => img.src);_x000D_
_x000D_
console.log(sources);

_x000D_

User · Answer

var sources   images map function  img        if img src split      pop        json       if extension is  json         return null     skip           else          return img src           filter Boolean     The  filter Boolean  will filter out any falsey values in a given array  which in your case is the null

User · Answer

You can do this  x000D   x000D  var sources       images map function  img        if img src split      pop        json       if extension is not  json         sources push img src      just push valid value           x000D   x000D   x000D

User · Answer

Here s a utility method  ES5 compatible  which only maps non null values  hides the call to reduce     x000D   x000D  function mapNonNull arr  cb    x000D      return arr reduce function  accumulator  value  index  arr    x000D          var result   cb call null  value  index  arr   x000D          if  result    null    x000D              accumulator push result   x000D            x000D   x000D          return accumulator  x000D              x000D    x000D   x000D  var result   mapNonNull   a    b    c    function  value    x000D      return value      b    null   value     exclude  b  x000D      x000D   x000D  console log result        a    c   x000D   x000D   x000D

User · Answer

I use  forEach to iterate over   and push result to results array then use it  with this solution I will not loop over array twice

User · Answer

To extrapolate on Felix Kling s comment  you can use  filter   like this   var sources   images map function  img      if img src split      pop        json        if extension is  json     return null     skip     else       return img src         filter Boolean     That will remove falsey values from the array that is returned by  map    You could simplify it further like this   var sources   images map function  img      if img src split      pop        json        if extension is  json     return img src         filter Boolean     Or even as a one-liner using an arrow function  object destructuring and the  amp  amp  operator   var sources   images map    src      gt  src split      pop        json   amp  amp  src  filter Boolean

User · Answer

Just  filter   it first  var sources   images filter function img      if  img src split      pop        quot json quot         return false     skip       return true     map function img    return img src       If you don t want to do that  which is not unreasonable since it has some cost  you can use the more general  reduce    You can generally express  map   in terms of  reduce  someArray map function element      return transform element        can be written as someArray reduce function result  element      result push transform element      return result           So if you need to skip elements  you can do that easily with  reduce    var sources   images reduce function result  img      if  img src split      pop        quot json quot         result push img src         return result           In that version  the code in the  filter   from the first sample is part of the  reduce   callback  The image source is only pushed onto the result array in the case where the filter operation would have kept it  update     This question gets a lot of attention  and I d like to add the following clarifying remark  The purpose of  map    as a concept  is to do exactly what  quot map quot  means  transform a list of values into another list of values according to certain rules  Just as a paper map of some country would seem weird if a couple of cities were completely missing  a mapping from one list to another only really makes sense when there s a 1 to 1 set of result values  I m not saying that it doesn t make sense to create a new list from an old list with some values excluded  I m just trying to make clear that  map   has a single simple intention  which is to create a new array of the same length as an old array  only with values formed by a transformation of the old values

User · Answer

Since 2019  Array prototype flatMap is a good option   images flatMap   src     gt  src endsWith   json          src     From MDN      flatMap can be used as a way to add and remove items  modify the   number of items  during a map  In other words  it allows you to map   many items to many items  by handling each input item separately     rather than always one-to-one  In this sense  it works like the   opposite of filter  Simply return a 1-element array to keep the item    a multiple-element array to add items  or a 0-element array to remove   the item

User · Answer

Answer sans superfluous edge cases   const thingsWithoutNulls   things reduce  acc  thing    gt      if  thing     null        acc push thing         return acc

User · Answer

TLDR  You can first filter your array and then perform your map but this would require two passes on the array  filter returns an array to map   Since this array is small  it is a very small performance cost  You can also do a simple reduce  However if you want to re-imagine how this can be done with a single pass over the array  or any datatype   you can use an idea called  transducers  made popular by Rich Hickey   Answer    We should not require increasing dot chaining and operating on the array    map fn1  filter f2     since this  approach creates intermediate arrays in memory on every reducing function   The best approach operates on the actual reducing function so there is only one pass of data and no extra arrays   The reducing function is the function passed into reduce and takes an accumulator and input from the source and returns something that looks like the accumulator     1  create a concat reducing function that can be passed into  reduce  const concat    acc  input    gt  acc concat  input       note that  1 2 3  reduce concat      would return  1 2 3      transforming your reducing function by mapping    2  create a generic mapping function that can take a reducing function and return another reducing function const mapping    changeInput    gt   reducing    gt   acc  input    gt  reducing acc  changeInput input       3  create your map function that operates on an input const getSrc    x    gt  x src const mappingSrc   mapping getSrc      4  now we can use our  mapSrc  function to transform our original function  concat  to get another reducing function const inputSources     src  one html     src  two txt     src  three json    inputSources reduce mappingSrc concat          - gt    one html    two txt    three json       remember this is really essentially just    inputSources reduce  acc  x    gt  acc concat  x src             transforming your reducing function by filtering    5  create a generic filtering function that can take a reducing function and return another reducing function const filtering    predicate    gt   reducing    gt   acc  input    gt   predicate input    reducing acc  input   acc      6  create your filter function that operate on an input const filterJsonAndLoad    img    gt      console log img    if img src split      pop        json            game loadSprite           return false      else       return true        const filteringJson   filtering filterJsonAndLoad      7  notice the type of input and output of these functions    concat is a reducing function     mapSrc transforms and returns a reducing function    filterJsonAndLoad transforms and returns a reducing function    these functions that transform reducing functions are  transducers   termed by Rich Hickey    source  http   clojure com blog 2012 05 15 anatomy-of-reducer html    we can pass this all into reduce  and without any intermediate arrays  const sources   inputSources reduce filteringJson mappingSrc concat               one html    two txt                                              8  BONUS  compose all the functions    You can decide to create a composing function which takes an infinite number of transducers to    operate on your reducing function to compose a computed accumulator without ever creating that    intermediate array const composeAll       args    gt   x    gt      const fns   args   var i   fns length   while  i--        x   fns i  call this  x         return x    const doABunchOfStuff   composeAll      filtering  x    gt  x src split      pop        json        mapping  x    gt  x src       mapping  x    gt  x toUpperCase         mapping  x    gt  x             const sources2   inputSources reduce doABunchOfStuff concat            ONE HTML       TWO TXT        Resources  rich hickey transducers post

User · Answer

Here is a updated version of the code provided by  theprtk  It is a cleaned up a little to show the generalized version whilst having an example   Note  I d add this as a comment to his post but I don t have enough reputation yet          see http   clojure com blog 2012 05 15 anatomy-of-reducer html     description functions that transform reducing functions     const transduce           a generic map   that can take a reducing    amp  return another reducing        map  changeInput   gt  reducing   gt   acc  input    gt      reducing acc  changeInput input          a generic filter   that can take a reducing    amp  return      filter  predicate   gt  reducing   gt   acc  input    gt      predicate input    reducing acc  input    acc             a composing   that can take an infinite   transducers to operate on       reducing functions to compose a computed accumulator without ever creating       that intermediate array         compose      args    gt  x   gt        const fns   args      var i   fns length      while  i--  x   fns i  call this  x       return x           const example       data     src   file html       src   file txt       src   file json            note    1 2 3  reduce concat       - gt    1 2 3        concat   acc  input    gt  acc concat  input      getSrc  x   gt  x src    filterJson  x   gt  x src split      pop        json           step 1  create a reducing   that can be passed into  reduce     const reduceFn   example concat      step 2  transforming your reducing function by mapping    const mapFn   transduce map example getSrc       step 3  create your filter   that operates on an input    const filterFn   transduce filter example filterJson       step 4  aggregate your transformations    const composeFn   transduce compose    filterFn    mapFn    transduce map x   gt  x toUpperCase              new mapping              Expected example output     Note  each is wrapped in  example data reduce x           1    file html    file txt    file json       2     file html    file txt       3    FILE HTML     FILE TXT        const exampleFns       transducers        mapFn reduceFn       filterFn mapFn reduceFn        composeFn reduceFn          raw         acc  x    gt  acc concat  x src         acc  x    gt  acc concat x src split      pop        json     x src              acc  x    gt  acc concat x src split      pop        json     x src toUpperCase                         const execExample    currentValue  index    gt    console log  Example     index  example data reduce currentValue         exampleFns raw forEach execExample   exampleFns transducers forEach execExample

User · Answer

Here s a fun solution          Filter-map  Like map  but skips undefined values         param callback     function fmap callback        return this reduce  accum     args    gt            let x   callback    args           if x     undefined                accum push x                     return accum                  Use with the bind operator    1 2 -1 3   fmap x   gt  x  gt  0   x   2   undefined       2 4 6

User · Answer

Why not just use a forEach loop    x000D   x000D  let arr     a    b    c    d    e    x000D  let filtered       x000D   x000D  arr forEach x   gt    x000D    if   x includes  b    filtered push x   x000D      x000D   x000D  console log filtered       filtered       a   c   d   e    x000D   x000D   x000D    Or even simpler use filter   const arr     a    b    c    d    e    const filtered   arr filter x   gt   x includes  b          a   c   d   e

User · Answer

You can use after of you method map    The method filter   for example in your case   var sources   images map function  img      if img src split      pop        json       if extension is  json     return null     skip       else       return img src            The method filter   const sourceFiltered   sources filter item   gt  item    Then  only the existing items are in the new array sourceFiltered

User · Answer

if it null or undefined in one line ES5 ES6   will return array of src  images filter p  gt  p src  map p  gt p src    p   property     in your condition images filter p  gt p src split      pop        quot json quot   map p  gt p src

[javascript] How to skip over an element in .map()?

Examples related to javascript