Question

我目前有一些代码来分割字符串并将其显示为列表。

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

我想跳过split数组中的第一个和最后一个元素，因为该字符串的格式为。

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

有没有办法在使用map函数时执行此操作。我在另一个相关问题中看到了filter()功能的提及，但我认为这不适用于此。任何帮助表示赞赏。

Answer 1

在映射之前，一个选项就是slice数组，所以在你的情况下它将是：

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

请注意，这将从数组中删除第一个和最后一个元素。如果您打算不修改第一个或最后一个元素，我建议@ vlaz回答：）

Answer 2

Array.prototype.map的回调函数将传递三个参数 - 元素，索引和数组。因此，在转换

时，您可以非常轻松地跳过第一个和最后一个元素

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

})

Answer 3

一个非常干净的解决方案是存储行分隔的数组。然后.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(...);

如何在使用javascript map（）

3 个答案: