Как пропустить некоторые элементы при использовании карты javascript()

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 

Есть ли способ сделать это при использовании функции карты. Я видел упоминание о функции 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(...);