【JavaScript 教程】第六章 数组15—join() ： 将所有元素连接成一个字符串

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节，我们学习如何使用 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() 方法将数组的所有元素连接成一个由分隔符分隔的字符串的方法。

今天的内容就到这里了。

如果您还想学习更多关于数组的内容，请点击下文链接进行学习。

【JavaScript 教程】第六章 数组14—reduce() ：将数组的元素减少为一个值

【JavaScript 教程】第六章 数组13— forEach() ：遍历数组元素

【JavaScript 教程】第六章 数组12— map() ：转换数组元素

【JavaScript 教程】第六章 数组11— filter() ：过滤数组中的元素

【JavaScript 教程】第六章 数组10— sort() ：对数组中的元素进行排序

【JavaScript 教程】第六章 数组09— some() ：检查数组中是否至少有一个元素通过了测试

【JavaScript 教程】第六章 数组08— every() ：检查数组中的每个元素是否都通过了测试

【JavaScript 教程】第六章 数组07— index() ：在数组中定位一个元素

【JavaScript 教程】第六章 数组06— slice() ：复制数组元素

【JavaScript 教程】第六章 数组05— splice()：删除、插入和替换

【JavaScript 教程】第六章 数组04— JavaScript 队列

【JavaScript 教程】第六章 数组03— Stack ：使用 Array 的push()和pop()方法实现堆栈数据结构

【JavaScript 教程】第六章 数组02— Array Length：如何有效地使用数组的长度属性

【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型

学习更多技能

请点击下方公众号