ES5 map迴圈一大坑:迴圈遍歷竟然出現逗號!
阿新 • • 發佈:2018-11-10
一、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('***')