多个条件来生成一个映射函数中的字符串

Question

我存储阵列看起来像：

let arr = [ 
    { 
    name: "James", 
    age: 24 
    }, 
    name: "Patrick", 
    age: 20 
    }, 
    { 
    name: "John", 
    age: 23 
    } 
]; 

我试图得到一个字符串，将是这样的：

Hi James, Patrick and John 
     ^  ^
     |   | 
     Comma  And 

添加,（逗号）在每个名字之后，但不在最后一个之后。以及在最后一个词之前的And这个词。我使用的地图：

arr.map((l,i) => 
    <span key={i}> 
    {i < arr.length - 1 ? `${l.name}, ` : 
    i === arr.length - 1 ? `and ${l.name}.` : ''} 
    </span>) 

我得到：

James, Patrick, and John 
      ^
       | 
     This is Extra 

有一个美丽而简单的方法来获得这样的结果呢？和一个函数将是纯粹的，并在数组中的所有数量的名字工作？最好用ES6 ..谢谢！

Answer 1

我认为不都是一样的，你正在寻找

const names = arr.map((l,i) => html`<span key="${i}">${l.name}</span`); 
const last = names.pop(); 
return names.length ? names.join(", ") + " and " + last : last; 

不要使用map的部分尝试项目。

Answer 2

您可以使用reduce()做到这一点

let arr = [{ 
 
    name: "James", 
 
    age: 24 
 
}, { 
 
    name: "Patrick", 
 
    age: 20 
 
}, { 
 
    name: "John", 
 
    age: 23 
 
}]; 
 

 
var result = arr.reduce(function(r, e, i) { 
 
    if ((i + 1) == (arr.length - 1)) { 
 
    r += e.name; 
 
    } else if ((i + 1) != arr.length) { 
 
    r += e.name + ', '; 
 
    } else { 
 
    r += ' and ' + e.name; 
 
    } 
 
    return r; 
 
}, 'Hi '); 
 

 
console.log(result)

Answer 3

你可以做到这一点。

arr.map((l,i) => 
    if (i <arr.length-1) { 
    if(i === arr.length-2) { 
    <span key={i}> 
    {`${l.name} `} 
    </span>) 
    } else { 
    <span key={i}> 
    {`${l.name}, `} 
    </span>)   
    } 
    } else { 
    <span key={i}> 
    `and ${l.name}.` 
    </span>) 
} 

Answer 4

你可以用下面的代码

arr.map((l,i) => 
    <span key={i}> 
    {i < arr.length - 1 && i !== arr.length - 2 ? `${l.name}, ` : ''} 
    {i === arr.length - 2 ? `${l.name} ` : ''} 
    {i === arr.length - 1 ? `and ${l.name}.` : ''} 
    </span>)