【源码共读】将值转换为数组《arrify》

新一期的源码共读，我们来看看如何将值转换为数组的库arrify，仓库地址：arrify

很抱歉这一期没有什么黑科技和新的东西分享，还是按照我上一期的方式来预览代码，通过GitHub提供的Codespaces来预览和调试代码。

今天发现这个上面可以打断点调试，和vscode的使用方式相同，非常方便。

使用

根据库的作者提供的readme，使用方式很简单：

1. 安装

npm install arrify

1. 使用

import arrify from 'arrify';

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

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

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

arrify(null);
//=> []

arrify(undefined);
//=> []

通过作者的提供的使用方式可知：

1. 传入一个string，返回一个包含这个string的数组
2. 传入一个array，返回这个array
3. 传入一个Set，返回一个包含这个Set的数组
4. 传入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行，我们来看看：

1. 首先判断传入的值是否为null或者undefined，如果是，返回一个空数组
2. 然后判断传入的值是否为srray，如果是，返回由这个值组成的数组
3. 然后判断传入的值是否拥有Symbol.iterator的函数，如果有，通过解构赋值返回一个数组
4. 最后返回一个包含这个值的数组，也就是其他情况

流程图如下：

这里有一个优化空间，就是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>;

拆解下来就是上面这样，我们来看看这个类型文件的作用：

1. 首先判断传入的值是否为null或者undefined，如果是，返回一个空数组
2. 然后判断传入的值是否为srray，如果是，返回由这个值组成的数组
3. 然后判断传入的值是否拥有Symbol.iterator的函数，如果有，通过解构赋值返回一个数组
4. 最后返回一个包含这个值的数组，也就是其他情况

拆解下来是不是就是和上面库的代码流程相同？那么流程图也就不用画了，上面的流程图就是这个类型文件的流程图。

回到最开始提到的问题，其他类型的情况，在源码解读的过程中已经有了答案，就是返回包含这个值的数组。

好了，这次的分析就到这里了！