源码共读 arrify

shenjilin
116 阅读3分钟

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

前言

从易到难开始学习源码。学习源码不是为了面试，只是想揭开别人造的轮子背后的神秘面纱。同时也希望在此过程中提升自己的能力和开拓视野。

阅读

因为 arrify 的源码很少，我这里直接粘贴过来阅读

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];
}
  1. 入参 value，返回参数将 value 转成数组后再返回
  2. 第一步，入参（value）等等于 null 或 undefined，返回空数组
  3. 第二步，入参（value）是数组类型，直接返回 value
  4. 第三步，入参（value）是字符串类型，转成数组后返回
  5. 第四步，入参（value）的上有Symbol.iterator 属性，且是函数类型，通过使用扩展运算符将 value 转成数组后返回
  6. 最后，入参（value），转成数组直接返回

备注：解释下 Symbol.iterator 。一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable），Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。—— ECMAScript 6 入门

哪些数据类型有 Symbol.iterator属性？

答：Array、Set、Map和部分类数组（arguments）

调试

在 arrify 这里克隆一份代码到本地 首先安装依赖 pnpm install

查看 pageage.json 文件

12dc849717f687f38edf2228d4135de.png

这里用到了三个依赖

  1. xo：强制执行严格代码风格
  2. ava：单元测试包
  3. tsd：检查TypeScript类型定义

e9b6a3fdce223769a44492a348f0b34.png 当命令行运行 pnpm install test 的时候，会走测试流程，测试的入口文件就是test.js 可以看到这里的测试用例涵盖了，字符串、Map、Set、null、undefined 单元测试的过程中，我们可以在左侧是打断点（debug），进行一步一步调试

总结

AVA 是Node的测试运行程序。具有简洁的API、详细的错误输出、新的语言特性和过程隔离，让您可以放心地开发———这个官方对ava的介绍

之前没有使用过 ava 做单元测试，今天使用了下发现真的很简洁 test 函数，参数一标题名称， 自定义一个字符串即可， 参数二测试用例的回调函数，回调函数接收一个参数 t（参数t为内置断言对象）

函数t:

.pass([message]) 测试通过
.fail([message]) 断言失败
.truthy(value, [message]) 断言 value 是否是真值
.falsy(value, [message]) 断言 value 是否是假值
.true(value, [message]) 断言 value 是否是 true
.false(value, [message]) 断言 value 是否是 false
.is(value, expected, [message]) 断言 value 是否和 expected 相等
.not(value, expected, [message]) 断言 value 是否和 expected 不等
.deepEqual(value, expected, [message]) 断言 value 是否和 expected 深度相等
.notDeepEqual(value, expected, [message]) 断言 value 是否和 expected 深度不等
.throws(function|promise, [error, [message]]) 断言 function 抛出一个异常，或者 promise reject 一个错误
.notThrows(function|promise, [message]) 断言 function 没有抛出一个异常，或者 promise resolve
.regex(contents, regex, [message]) 断言 contents 匹配 regex
.notRegex(contents, regex, [message]) 断言 contents 不匹配 regex
.ifError(error, [message]) 断言 error 是假值
.snapshot(expected, [message]) 将预期值与先前记录的快照进行比较
.snapshot(expected, [options], [message]) 将预期值与先前记录的快照进行比较

以上是我对本节学习和理解，如果有什么不对的地方，还请指正！

avatar
文章
阅读
粉丝