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

web前端开发

共 2206字,需浏览 5分钟

 ·

2022-02-17 16:02

英文 | 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类型



学习更多技能

请点击下方公众号

浏览 6
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报