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

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


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


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

image.png

今天发现这个上面可以打断点调试,和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. 然后判断传入的值是否为array,如果是,返回由这个值组成的数组
  3. 然后判断传入的值是否拥有Symbol.iterator的函数,如果有,通过解构赋值返回一个数组
  4. 最后返回一个包含这个值的数组,也就是其他情况


流程图如下:

image.png

下面删除线是错误的优化,由评论区小伙伴指出,这里做一个扩展知识补充,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>;

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


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


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


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


好了,这次的分析就到这里了!


目录
相关文章
|
存储 机器学习/深度学习 Java
数组的定义和使用(全是干货)
数组的定义和使用(全是干货)
157 0
|
4月前
|
C++
C++(十一)对象数组
本文介绍了C++中对象数组的使用方法及其注意事项。通过示例展示了如何定义和初始化对象数组,并解释了栈对象数组与堆对象数组在初始化时的区别。重点强调了构造器设计时应考虑无参构造器的重要性,以及在需要进一步初始化的情况下采用二段式初始化策略的应用场景。
|
8月前
|
存储 编译器
数组应该怎么用?
数组应该怎么用?
34 1
|
8月前
|
存储 索引 Python
什么是数组,什么是对象,并说出他们的区别
什么是数组,什么是对象,并说出他们的区别
53 6
|
存储 JavaScript 前端开发
手撕前端面试题【javascript~ 列表动态渲染、无重复数组、数组排序、新数组、创建数组、深浅拷贝、内存泄露等】
html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。
91 0
|
8月前
|
存储 人工智能 程序员
爱上C语言:超详细讲解数组,学数组看这一篇就够了(数组篇)
爱上C语言:超详细讲解数组,学数组看这一篇就够了(数组篇)
160 0
|
8月前
|
Go 索引
引用一堆数组元素
引用一堆数组元素
58 0
《C++避坑神器·三》带参构造和初始化列表赋值区别
《C++避坑神器·三》带参构造和初始化列表赋值区别
60 0
|
C语言
C语言之用指针实现两个数组中元素的相加并存放到第三个数组中
C语言之用指针实现两个数组中元素的相加并存放到第三个数组中
206 0
|
JavaScript 前端开发 API
📕 重学JavaScript:判断数组中包含哪些值有什么好方法?
你有没有遇到过这样的问题:你想要判断一个数组中包含哪些值,但是却不知道改用什么方法就直接用for循环遍历?🤔
99 0

热门文章

最新文章