前言

前几天在项目中运用到了arrify工具，今天便阅读了arrify的源码，整个源码部分不过才十几行，而且也不难，所以来分享一下阅读心得。

arrify介绍

arrify是什么，有什么作用，或许有些小伙伴还不清楚。简单点理解它就是一个数组转换工具。官方说明它是将传入的任意值转换为数组。

我们先来安装一下arrify。

npm install arrify 

这样我们就可以在项目中正式引入该工具了。

import arrify from 'arrify'; 

源码介绍

下面是源码部分。

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];
} 

源码很简单，就十几行。里面做了四个if判断，前三个判断都很好理解，在第四个判断中，加入了迭代器判断，如果传入参数是可迭代对象, 则使用扩展运算符转换为数组。简单来说就是它解决了很多类型的检验，用 ... 解构出来。

arrify使用

我创建一个空项目，将arrify源码写入，并在后台打印该值，如下所示。

// 源码部分
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];
}
// 打印值
console.log(arrify('abc'));
console.log(arrify('[a,b,c]'));
console.log(arrify(null));
console.log(arrify(undefined));
console.log(arrify(new Set('[a,b,c]')));

function App() {return (<div></div>);
}
export default App; 

通过观察后台，结果如下：

另外，该源码中的判断顺序不可随意改动，如果我们改变if的判断顺序，将迭代器判断移动到前面，结果会不一样。

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

	if (Array.isArray(value)) {
		return value;
	}// 调换顺序if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

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

	return [value];
} 

最终打印结果如下：

Symbol.iterator介绍

Symbol.iterator为每一个对象定义了默认的迭代器。该迭代器可以被for…of… 循环使用。我们可以参考相关文档自定义如下迭代器。

var myIterable = {}
myIterable[Symbol.iterator] = function* () {yield 1;yield 2;yield 3;
};
[...myIterable] 
// 输出[1, 2, 3] 

总结

将arrify总结如下：

• 首先，如果参数是数组, 直接返回原来的参数；如果参数是 string类型, 则返回 [value] ；如果参数是 null 或 undefined 返回 []；如果参数是可迭代对象，则使用扩展运算符...转换为数组。
• 其次，源码中通过迭代器判断巧妙地解决了很多类型的判断。
• 最后，源码中的判断顺序不可随意改动，否则得不到预期效果。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享