ES5 map循環一大坑:循環遍歷竟然出現逗號!

一、map

map大法好

作為當今程序界最好用的循環方法之一map, 在我的項目里基本替代了for循環

map循環常用的一些方法

/********* ES6 **********/
//一行代碼可以省略return
array.map( item => console.log(item))   
=>
array.map( item => {
    return console.log(item)
})

//多行代碼需要{}
array.map( item => {
    //do someting  花括號一般是處理某些邏輯
})

//返回組件
array.mao( item => (
    <div>{item}</div>   //這種比較常出現在react的jsx
))

上面總結了一些我經常用的map方法

下面我就要小小批評一下map的坑爹之處...

當用map循環遍歷元素的時候, 會出現多余的逗號,

雖然對于單頁面應用開發基本遇不上. 但還是做一個記錄.防止日后落坑

二、測試案例

為了生動形象說明一下問題, 我分別循環遍歷四張圖片和四個文字, 且看

//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也是一樣會出現這種情況的.

三、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('***')

posted @ 2018-11-02 22:11 xiaobe 閱讀(...) 評論(...) 編輯 收藏
耐克篮球多少钱