ES5 map循环一大坑：循环遍历居然出现逗号！

1、map

map大法好

这里须要解释一下Map和forEach的区别

通常来讲须要返回值时使用Map，而只须要循环的使用forEach

map循环经常使用的一些方法

/********* ES6 **********/
//一行代码能够省略return
const d = array.map( item => console.log(item))   
=>
const d = array.map( item => {
    return console.log(item)
})

//多行代码须要{}
array.map( item => {
    //do someting  若是是纯处理逻辑的,建议使用forEach
})


//返回组件
array.map( item => (
    <div>{item}</div>   //这种比较常出如今react的jsx
))

但map循环有一坑爹之处...

当用map循环遍历元素的时候, 会出现多余的逗号,！

虽然对于单页面应用开发基本遇不上. 但仍是作一个记录.防止往后落坑

2、测试案例

为了生动形象说明一下问题, 我分别循环遍历四张图片和四个文字, 且看

//js
<script>
    //歌曲url.聪明的你会发现这个路径有点奇怪...
    let imgArr = ['./yaba.jpg', './siwujidan.jpg', './motiandalou.jpg', './nashini.jpg', ]     
    
    //歌曲名字
    let titleArr = ['哑吧', '肆无忌惮', '摩天大楼', '那是你离开了北京的生活']

    let imghtml = ''    //输出img
    let titlehtml = ''  //输出title
    
    imghtml += arrobj.map(function(item){
        return '<img src="' + item + '" style="width: 350px"/>'
    })

    titlehtml += name.map(function(item){
        return '<div>' + item + '</div>'
    })
    document.getElementById('output').innerHTML = imghtml
    document.getElementById('output').innerHTML += titlehtml
</script>

//html
<div id="output"></div>

咱们看一下输出的效果:

嘿嘿嘿, 果真出来了。

对于react里面直接return这个dom也是同样会出现这种状况的.

3、KO Bug

咱们能够思考一下为何会出现这个烦人的,呢？

原来:

利用map插入到DOM时 map最终返回的数组由于拼接+=调用了toString方法. 数组结构[1, 2, 3] 里面竟然是这个逗号, 转换的时候把它带上了！

咱们知道了缘由以后就很是方便解决了。咱们能够巧妙地利用join方法：join()能够切开一个数组, 指定要使用的分隔符。若是省略该参数，则使用逗号做为分隔符。

imghtml += arrobj.map(function(item){
    return '<img src="' + item + '" style="width: 200px"/>'
}).join('')

titlehtml += name.map(function(item){
    return '<div>' + item + '</div>'
}).join('')

大功告成！可是要注意记得不要附带参数哦！否则可恶的,就会变成你传入的参数啦！

imghtml += arrobj.map(function(item){
    return '<img src="' + item + '" style="width: 200px"/>'
}).join('***')