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

本文参加了由[公众号@若川视野](https://lxchuan12.gitee.io/) 发起的每周源码共读活动，点击了解详情一起参与。

源码库

github: arrify

使用

将传入的值转成数组

import arrify from 'arrify';

arrify('🦄');
//=> ['🦄']

arrify(['🦄']);
//=> ['🦄']

arrify(new Set(['🦄']));
//=> ['🦄']

arrify(null);
//=> []

arrify(undefined);
//=> []

源码内容

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，条件成立直接返回空数组[]；
• 通过 Array.isArray 判断是否为数组，是则直接返回 value；
• 通过 typeof 判断是否为 string，是则返回 [value]；
• 通过Symbol.iterator 判断当前 value 是否为可迭代对象，是则进行结构返回 [...value]；
• 其他情况直接返回 [value]；

疑问解答

• 什么是可迭代对象？ 解答：使用了迭代协议的对象
• js 里的可迭代对象有哪些？ 解答：目前所有的内置可迭代对象如下：String、Array、TypedArray、Map 和 Set，它们的原型对象都实现了 @@``iterator 方法。
• 源码中的判断顺序是否可调整，问什么要先判断是 string 类型，在判断是否是可迭代对象？ 解答：除了数组判断和string类型判断可以互相调换位置，其它不可调整，因为数组和string都是可迭代对象，所以要放到可迭代对象前面，否则字符串就会被解构了，当然数组的判断可以去掉，直接放到可迭代对象的判断里也是可以的

源码调试

• 打开需要调试的文件，设置断点

• 启动调试

• 查看调试节点

• 所有测试用例执行完毕

总结

通过对 arrify 的阅读我们进一步加深了解什么是可迭代对象，以及了解 js 内置的可迭代对象有哪些。