【若川视野 x 源码共读】第33期 | arrify 转数组这期讲的是arrify、可以将传入的数据转成数据返回。本

本文参加了由公众号@若川视野发起的每周源码共读活动，点击了解详情一起参与。

参考

www.yuque.com/ruochuan12/…

作用

作用：将某个值value转换为数组并返回

例子：

import arrify from 'arrify';

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

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

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

arrify(null);
//=> []

arrify(undefined);
//=> []

源码

export default function arrify(value) {
    if (value === null || value === undefined) {
        return [];
    }

    if (Array.isArray(value)) {
        return value;
    }

    if (typeof value === 'string') {
        return [value];
    }
    // string也有 Symbol.iterator，所以要先判断 string。
    // map、set、argument 
    if (typeof value[Symbol.iterator] === 'function') {
        return [...value];
    }

    return [value];
}

（1）value若为null或者undefined则返回空数组[]

（2）value本身是数组则直接返回

（3）value如果是字符串则返回包含这个字符串的数组

（4）value是Map或者Set等可迭代对象则使用...获取其值放到数组中

（5）value是其他情况则返回包含value的数组

类型校验

可以发现基本和上面的代码流程类似，先判断空。。。

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