js中join方法的底层实现原理

我们都知道Js中的join是Array对象中的一个方法,它的主要作用是将数组中的元素按指定的分隔符进行链接在一起,并已字符串的形式返回。语法如下:

str = arr.join(sep)

返回值：str:返回数组元素链接在一起的字符串内容．

arr:要将该数组中的元素链接成一个字符串。
sep:数组中的元素按照这个参数来分隔，比如＂－＂或"|"等．如果省略这个参数．则默认会逗号＂,＂号来分隔。

关于join方法想必都能熟练使用，下面由“fly63前端网”为大家主要介绍下关于join的底层实现原理。

join方法的底层做了什么？

根据 ES 规范， Array.prototype.join(sep) 方法的底层做了如下这些事情（简化步骤）：

1. 首先获取arr数组的长度arr.length
2. 判断参数sep的值,如果sep没传,则设置sep=''
3. 将sep值进行toString()处理,即sep=sep.toString(),这一步主要就是将参数类型转为字符串
4. 对于数组中的每一个元素e：若e为undefined或null，则令 e='' ；否则令e=e.toString()
5. 最后就是把经过以上处理过的元素e使用处理过的sep拼接在一起，元素之间相隔sep

根据此底层的原理,我们可以手写实现join的方法效果,代码如下:

Array.prototype.myjoin = function(emoji = '') {
	let self = this;
	let str = "";
	let i = 0;
	if (!Array.isArray(self)) throw `${self} is not Array`;
	if (self.length === 0) return ''
	if (self.length === 1) return `${self[0]}`;
	i = 1;
	str = this[0];
	for (; i < self.length; i++) {
		str += `${emoji}${self[i]}`;
	}
	return str;
};

理解多维数组使用join方法

 理解了join的实现原理,那么join在多维数组的处理比较容易理解了,比如：

var arr = [1, 2, [3, 4, [5]],[6, 7], 8]
var result = arr.join('') // 结果为：'123,4,56,78'

为什么结果是这样？ 我们来如下分析:

首先数组转字符串的分割参数为 '', 表示分隔符为空串对于每一个元素, 得到如下结果:

1, 2, [3, 4, [5]], [6, 7], 8

可以看出一共5个元素, 由于存在多维数组的情况, 中间还有2个数组被算为一个单独的元素。由于join 方法不会继续向内展开进行转换, 那么就直接对每个元素调用toString() 方法, 对应基本类型结果为:

'1', '2', '8'

中间那个的2个数组呢？ 这里涉及到数组强转转字符串的情况, 多维数组转字符串会将数组拍平后使用 ","进行分隔。 那么得到的结果分别为:

'3,4,5'
'6,7'

最后再将这些字符串进行拼接， 且两两使用 ''分隔, 所以得到结果最终为：

123, 4, 56, 78

链接: https://www.fly63.com/article/detial/12219