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

news2025/1/15 6:52:15

使用

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

1.安装

npm install arrify

2.使用

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.然后判断传入的值是否为array，如果是，返回由这个值组成的数组
3.然后判断传入的值是否拥有Symbol.iterator的函数，如果有，通过解构赋值返回一个数组
4.最后返回一个包含这个值的数组，也就是其他情况

流程图如下：

graph TD
Start[开始] --> A[判断传入的值是否为null或者undefined]
A --> |是| a[返回一个空数组]
A --> B[判断传入的值是否为string]
B --> |是| b[返回一个包含这个值的数组]
B --> C[判断传入的值是否拥有Symbol.iterator的函数]
C --> |是| c[通过解构赋值返回一个数组]
C --> D[返回一个包含这个值的数组]
D --> End[结束]

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

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

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

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

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