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

theme: juejin
highlight: a11y-dark

我正在参与掘金会员专属活动-源码共读第一期，点击参与

新一期的源码共读，我们来看看如何将值转换为数组的库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，如果是，返回一个空数组
然后判断传入的值是否为srray，如果是，返回由这个值组成的数组
然后判断传入的值是否拥有Symbol.iterator的函数，如果有，通过解构赋值返回一个数组
最后返回一个包含这个值的数组，也就是其他情况

流程图如下：

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

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