从API获取不同长度的数组

Question

我创建了一个网站，并使用了来自Countrys API的数据，但是它并不完整，因为我只获取了每个国家/地区的一种官方语言，而且显然有些国家/地区使用了更多的官方语言。他们的API例如针对加拿大：

languages: Array(2)
0:
iso639_1: "en"
iso639_2: "eng"
name: "English"
nativeName: "English"
__proto__: Object
1:
iso639_1: "fr"
iso639_2: "fra"
name: "French"
nativeName: "français"
__proto__: Object
length: 2
__proto__: Array(0)

我使用此代码获取语言：

<h3 class='languages'>Languages: ${country.languages[0].name}</h3>

但是如果我添加$ {country.languages [1] .name}，则代码显然会失败，因为并非所有国家/地区在语言数组中都有第二项。我该如何解决？

Answer 1

您可以在多个国家/地区上使用map，并在多个国家/地区上用逗号分隔join。

<h3 class='languages'>
  Languages: ${country.languages.map(el => el.name).join(', ')}
</h3>

几个实际的例子：

const languages1 = [{ name: "English" }, { name: "French" }];
const languages2 = [{ name: "German" }];

console.log(languages1.map(el => el.name).join(", "));
console.log(languages2.map(el => el.name).join(", "));