新一期的源码共读，我们来看看如何将值转换为数组的库arrify，仓库地址：arrify
很抱歉这一期没有什么黑科技和新的东西分享，还是按照我上一期的方式来预览代码，通过GitHub提供的Codespaces来预览和调试代码。
今天发现这个上面可以打断点调试，和vscode的使用方式相同，非常方便。
使用
根据库的作者提供的readme，使用方式很简单：
- 安装
npm install arrify
- 使用
import arrify from 'arrify'; arrify('🦄'); //=> ['🦄'] arrify(['🦄']); //=> ['🦄'] arrify(new Set(['🦄'])); //=> ['🦄'] arrify(null); //=> [] arrify(undefined); //=> []
通过作者的提供的使用方式可知：
- 传入一个
string，返回一个包含这个string的数组 - 传入一个
array，返回这个array - 传入一个
Set，返回一个包含这个Set的数组 - 传入
null或者undefined，返回一个空数组
思考：上面只提供了四种情况，那么其他的情况呢？
源码
通过GitHub提供的Codespaces来预览和调试代码，省去N多步骤。
代码结构很单纯，没有多余的东西，最主要的就是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]; } if (typeof value[Symbol.iterator] === 'function') { return [...value]; } return [value]; }
代码不长，加上空行也就19行，我们来看看：
- 首先判断传入的值是否为
null或者undefined，如果是，返回一个空数组 - 然后判断传入的值是否为
array，如果是，返回由这个值组成的数组 - 然后判断传入的值是否拥有
Symbol.iterator的函数，如果有，通过解构赋值返回一个数组 - 最后返回一个包含这个值的数组，也就是其他情况
流程图如下：
下面删除线是错误的优化，由评论区小伙伴指出，这里做一个扩展知识补充，String类型的数据，也是自带Symbol.iterator接口的。
这里有一个优化空间，就是string类型的值可以不用判断，他最后也是返回一个包含这个值的数组，可以直接返回;
同理他使用...运算符来解构，那么Array的类型也可以不用判断，因为Array的类型也带有Symbol.iterator的函数，也可以使用...运算符来解构。
优化代码如下：
export default function arrify(value) { if (value === null || value === undefined) { return []; } if (typeof value[Symbol.iterator] === 'function') { return [...value]; } return [value]; }
运行结果相同，大家可以自行尝试，我就不截图了。
index.d.ts
作者还提供了TypeScript的类型定义文件，我们来看看：
export default function arrify<ValueType>( value: ValueType ): ValueType extends (null | undefined) ? [] // eslint-disable-line @typescript-eslint/ban-types : ValueType extends string ? [string] : ValueType extends readonly unknown[] ? ValueType : ValueType extends Iterable<infer T> ? T[] : [ValueType];
看着有点绕，但是其实很简单，这个类型文件的js版本就是上面作者写的库的代码，我们现在来拆解一下：
type hasNullOrUndefined<T> = T extends (null | undefined) ? [] : hasString<T>; type hasString<T> = T extends string ? [string] : hasArray<T>; type hasArray<T> = T extends readonly unknown[] ? T : hasIterable<T>; type hasIterable<T> = T extends Iterable<infer U> ? U[] : [T]; type arrify<T> = hasNullOrUndefined<T>;
拆解下来就是上面这样，我们来看看这个类型文件的作用：
- 首先判断传入的值是否为
null或者undefined，如果是，返回一个空数组 - 然后判断传入的值是否为
array，如果是，返回由这个值组成的数组 - 然后判断传入的值是否拥有
Symbol.iterator的函数，如果有，通过解构赋值返回一个数组 - 最后返回一个包含这个值的数组，也就是其他情况
拆解下来是不是就是和上面库的代码流程相同？那么流程图也就不用画了，上面的流程图就是这个类型文件的流程图。
回到最开始提到的问题，其他类型的情况，在源码解读的过程中已经有了答案，就是返回包含这个值的数组。
好了，这次的分析就到这里了！
