数组15—join() ： 将所有元素连接成一个字符串

在上节，我们学习如何使用 JavaScript Array reduce() 和 reduceRight() 方法将数组归约为一个值，错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组14—reduce() ：将数组的元素减少为一个值》进行学习。

那么，在今天的教程中，我们将一起来学习如何使用 JavaScript Array join()方法将数组的所有元素连接成由分隔符分隔的字符串。

JavaScript 数组 join() 方法介绍

join() 方法允许我们连接数组的所有元素并返回一个新字符串：

Array.prototype.join([separator])

join() 方法接受一个可选的参数分隔符，它是一个字符串，用于分隔结果字符串中数组的每对相邻元素。

如果我们不将分隔符传递给 join() 方法，则分隔符默认为逗号。

如果数组有一个元素，则 join() 方法将该元素作为字符串返回，而不使用分隔符。

如果数组为空，则 join() 方法返回一个空字符串。

当数组的元素不是字符串时，join() 方法在加入之前将它们转换为字符串。

请注意，join() 方法将 undefined、null 和空数组 [] 转换为空字符串。

JavaScript 数组 join() 方法示例

让我们举一些使用 join() 方法的例子。

1) 使用 JavaScript Array join() 方法加入 CSS 类

以下示例使用 JavaScript Array join() 方法加入 CSS 类：

const cssClasses = ['btn', 'btn-primary', 'btn-active'];const btnClass = cssClasses.join(' ');
console.log(btnClass);

输出：

btn btn-primary btn-active

在这个例子中，我们有一个包含 CSS 类列表的数组。我们使用 join() 方法连接 cssClasses 数组的所有元素，并返回一个由空格分隔的 CSS 类字符串。

2) 使用 JavaScript Array join() 方法替换所有出现的字符串

此示例使用 JavaScript Array join() 方法将所有出现的空格 ' ' 替换为连字符 (-)：

const title = 'JavaScript array join example';const url = title.split(' ')    .join('-')    .toLowerCase();
console.log(url);

输出：

javascript-array-join-example

程序是怎么运行的：

首先，使用 split() 字符串方法将标题字符串按空格分割成一个数组。

其次，使用 join() 方法将结果数组中的所有元素连接成一个字符串。

第三，使用 toLowerCase() 方法将结果字符串转换为小写。

总结

在本教程中，我们学习了如何使用 JavaScript Array join() 方法将数组的所有元素连接成一个由分隔符分隔的字符串的方法。

今天的内容就到这里了。