這裏須要解釋一下Map
和forEach
的區別html
通常來講須要返回值時使用Map
,而只須要循環的使用forEach
react
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
循環有一坑爹之處...dom
當用map循環遍歷元素的時候, 會出現多餘的逗號,
!測試
雖然對於單頁面應用開發基本遇不上. 但仍是作一個記錄.防止往後落坑url
爲了生動形象說明一下問題, 我分別循環遍歷四張圖片和四個文字, 且看code
//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>
咱們看一下輸出的效果:htm
嘿嘿嘿, 果真出來了。blog
對於react裏面直接return
這個dom也是同樣會出現這種狀況的.圖片
咱們能夠思考一下爲何會出現這個煩人的,
呢?
原來:
利用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('***')