如何跳過某些元素時使用JavaScript地圖（）

我目前有這一點的代碼來拆分一個字符串，並將其顯示爲一個列表。如何跳過某些元素時使用JavaScript地圖（）

<span className="reply">{this.props.message.split("\n").map((chunk) => { 
    return <span className="message-chunk">{chunk}<br /></span> 
})}

我想跳過拆分數組中的第一個和最後一個元素，因爲字符串是窗體。

Heading\n 
List Item\n 
List Item\n 
List Item\n 
Ending\n

有沒有一種方法可以在使用地圖功能時執行此操作。我在其他相關問題中看到filter()函數的提及，但我認爲這不適用於此。任何幫助表示讚賞。

來源

2016-09-10 user3282276

你的意思是「跳過」，仍然返回標題和結束，但轉換一切，或只返回列表項？ – vlaz

@vlaz我的意思是第一個 – user3282276

@ user3282276如果其中一個答案是正確的，請將其標記爲如此。如果他們中沒有人請提供反饋意見，說明它不能解決您的問題。謝謝 – winhowes

一種選擇是隻slice數組，然後映射，所以你的情況這將是：

this.props.message.split("\n").slice(1, -1).map((chunk) => { 
    return <span className="message-chunk">{chunk}<br /></span> 
})

注意，這會從數組中刪除第一個和最後一個元素。如果你打算不修改第一個或最後一個元素，我推薦@ vlaz的回答:)

來源

2016-09-10 21:26:16 winhowes

切片不改變數組，但返回一個新的，所以這是最好的答案。 – lustoykov

Array.prototype.map的回調函數將傳遞三個參數 - 元素，索引和數組。所以，你可以轉化

arr.map(function(item, index, list) { 
    if(index === 0 || index === list.length -1) { 
     return item; 
    } else { 
     /* transformation logic */ 
     return transformedItem; 
    } 

})

來源

2016-09-10 21:28:18 vlaz

這個問題是，第一個和最後一個元素仍然在返回的數組中 – winhowes

OP表示_skip_他們，我認爲他們仍然需要返回。也許需要去除它們，但它並不完全清楚。 – vlaz

公平點。它是含糊不清的 – winhowes

一個漂亮乾淨的解決方案時，將存儲線分開排列很容易跳過第一個和最後一個元素。然後.shift()和.pop()它修剪邊緣（並根據需要存儲它們），並使用.map()迭代修剪後的陣列。 :)

// Example with stored heading and ending 
let messageLines = this.props.message.split("\n"); 
const heading = messageLines.shift(); 
const ending = messageLines.pop(); 

// Map whenever you need to 
messageLines.map(...);

來源

2016-09-10 21:40:34 Kootoopas