最常用和最实用的.map/.each我该选择哪个？JS,JQ和Cheerio！

Preface： map/each几乎处处可见，程序员几乎天天都在用，包括JS，JQuery，Cheerio还有JSX里面的元素的循环。但是你真的了解他们吗？？

一：普通Javascript

来源：developer.mozilla.org/en-US/docs/…

1. map

a)普通函数和箭头函数有区别！！

普通函数

箭头函数 （this绑定的global context）

b) 参数顺序是(element, index)

c) 返回的是新的array，如果你不打算用新的array请用foreach！

结论：尽量不用用this，老老实实用element比较安全。

let old = [4, 9, 16]
let new = old.map((e, i)=> {
      return Math.sqrt(e)
})

2. each? javascript里面没有.each！而是.forEach!!

a) 其他跟map一样，区别就是没有返回；如下

结论：尽量用forEach，老老实实用forEach+push比较安全。特殊情况下用map，比如reactjs里面需要循环render的时候！其他时间尽量别用吧？

二：jQuery

来源：learn.jquery.com/using-jquer…

1. map

跟JS的map的区别还是比较大，很容易混淆噢！！

a) ！！！！！！！！！！参数顺序颠倒了！！！！！！！！！！

$( "li" ).map( function(index, element) {
    return this.id;
});

b) 返回的不是普通的array！！！！！而是$collection; 两个方法打回原形。

方法a： .get()

$( "li" ).map( function(i, e) {
    return this.id;   
}).get();

方法b： $.makeArray()

const  ids= $( "li" ).map( function(i, e) {
    return this.id;   
}) ;

if (typeof ids === "object" && ids.jquery) {
      const ids= $.makeArray( ids)
    } else {
      return [];
    }

c) 相同的地方是，剪头函数和普通函数区别

$( "li" ).map( function(i, e) {
    return this.id;  //   this === e;默认this是目前元素
});

$( "li" ).map( (i, e) =>{
    return this;  //  this被绑定到了global context!
});

2. each

跟JS一样，each就是不返回去结果而已。如下。

var newArr = [];
$( "li" ).each( (i, e)=> {
    newArr.push( $(e).id );
});

结论：尽量用each，老老实实用each+push比较安全。特殊情况下用map，比如reactjs里面需要循环render的时候！其他时间尽量别用吧？

三：Cheerio

来源：www.jianshu.com/p/629a81b4e…

跟jQuery一样，不意外。

最终结论：1. 尽量用forEach+each 2. 注意e和i的顺序！

题外话：循环使用async promise怎么办？

结论： 必须用for loop；千万别用forEach, map这些玩意儿！！

具体参考： zellwk.com/blog/async-…

----关于each/forEach/map看这一个文章就够了！------------