星期三 , 22 1 月 2025

js map方法以及如何在html里替换内容并用join()方法串联

var testArray = ['red','blue','green'];
		$('#primary').html(`${testArray.map( item => {
			return `${item}`;
		}).join('')}`);

如果map函数里面 写成一行因为箭头函数的关系不用return, item => item 直接会return出来, 像上面如果要加大括号的话 里面要用return的方法, 如果return里面要加html的话要用template literal “ 然后用 ${} 形式 加载出来

join() 方法用于将数组的元素连接成一个字符串。在前面提供的代码中,它在 map() 方法之后使用,将由 map() 生成的 HTML 字符串数组转换为单个字符串。

当您在数组上使用 map() 时,它会生成一个包含经过转换的元素的新数组。在您的情况下,它生成了一个包含 HTML 字符串(对于 testArray 中的每个 item,生成 <span>${item}</span>)的数组。

然而,要使用 jQuery 的 .html() 方法设置元素的 HTML 内容,您需要一个包含要插入的 HTML 的单个字符串。因此,在 map() 之后使用了 join('') 方法,将所有 HTML 字符串连接在一起,创建一个单个字符串,可以用作 $('#primary') 的 HTML 内容。

join('') 方法中的空字符 '' 表示在数组元素之间没有任何字符连接,有效地产生一个连续的字符串,符合通过 .html() 设置 HTML 内容所需的格式。

所以,总而言之,join('') 方法用于将由 map() 生成的 HTML 字符串数组转换为单个字符串,然后用于设置指定元素的 HTML 内容。