【源码学习】第33期 | arrify 转数组笔记本文参加了由公众号@若川视野发起的每周源码共读活动，点击了解详

本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
这是源码共读的第33期，链接：juejin.cn/post/710021…

0 环境

操作系统：win10
nodejs：最新
npm：最新
编辑器：vscode

1 准备

2 package.json

整个目录结构如下图：

如下图：入口文件 --> index.js，再看scripts下的test脚本，xo默认代码风格(JavaScript/TypeScript linter)，AVA --> 这里用来测试index.js的，得到输出结果的，[tsd]它用来测试ts(.d.ts)文件。

1 xo配置

假如package.json中scripts下的test脚本，加了xo，如下图：需要添加对应的文件，具体代码风格配置看prettier官网，不然运行时，会报错的，或者你直接删除相关xo库。

2 AVA

官网翻译是：AVA是Node.js的测试运行器，具有简洁的API，详细的错误输出，包含新的语言功能和进程隔离，让您有信心开发。和testng类似。

3 tsd

expectType 简单来说，针对单个类型的判断

expectAssignable 更宽泛些，可以使用联合类型这类的。 expectError 断言表达式抛出错误。不会忽略语法错误。

3 index.js

export default function arrify(value) {
	// 无值的情况
	if (value === null || value === undefined) {
		return [];
	}

	// 数组情况
	if (Array.isArray(value)) {
		return value;
	}
	
	// 字符串，直接返回[字符串]
	if (typeof value === 'string') {
		return [value];
	}

	// 通过检查 value 的 Symbol.iterator 属性是否为 function 类型来验证其是否具有可迭代特性。具体看上面的文档。
	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	// 默认返回
	return [value];
}

4 运行

npm install
npm run test

5 test.js

根据测试用例，看结果。

6 迭代器

1 数组和迭代器为啥要单独判断

不知道你们有么有对这迭代器和数组判断有疑惑。

我当时有些疑惑，因为数组也属于迭代器的范畴嘛，找了文章，测了代码，确实是迭代器，后来仔细想想，是不是和拓展运算符有关(网上的回答是：扩展运算法的合并方法性能较优，但是不适用于长度较大的数组，会得到 N/A 的结果)，再整体考虑一下，目的是以数组的形式返回，确实没必要先解构再返回，浪费性能，所以需要单独判断，那也就能理解为啥Array.isArray会优先迭代的判断，其实字符串也是有迭代器的，并且一解构，就会拆解为['单个字符'...]，所以也需要单独判断，如下图：

【源码学习】第33期 | arrify 转数组 笔记