【若川视野 x 源码共读】第33期 | arrify 转数组

本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

这是源码共读的第33期，链接 ：juejin.cn/post/710021…

这是个简单的工具方法，具体代码如下

export default function arrify(value) {
	if (value === null || value === undefined) {
		return [];
	}

	if (Array.isArray(value)) {
		return value;
	}

	if (typeof value === 'string') {
		return [value];
	}

	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	return [value];
}

• 第一步：先做脏数据兼容： 如果传入null或者undefined的话，就返回空数据
• 第二步：判断传入的数据是否是数组 如果传入的是数组的话，直接将传入的值返回即可
• 第三步： 判断传入数据是否可遍历 如果可遍历的话，就用扩展操作符遍历出来
• 如果以上条件都不满足，那就直接包装成一个数组返回

ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是‘可遍历的’（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。至于属性名Symbol.iterator，它只是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的，类型为Symbol的特殊值。所以要放在方括号内。

总结：这篇工具函数篇幅很短，涉及到的可迭代对象是自己之前不了解的地方，get到了一个新的知识点。除此之外的一个收获就是写代码的严谨，遇到的问题就是，在第三步判断的时候，我直接反应就是直接想通过判断有没有Symbol.iterator来作为条件，忽略了可以自定义同名属性。这个问题我在日常中也会经常这样来做，以前也没觉得有啥毛病，通过这次的学习，觉得写代码还是呆更严谨些才好。