arrify源码解析【自用】

通过这篇文章你可以学到什么？

• arrify方法是如何处理数据的
• arrify源码中的Symbol.iterator是干啥的
• 测试js文件的ava
• 测试ts文件的tsd
• 以及package中常见的属性含义

arrify

• 任何数据类型都会被转为数组
• null&undefined 会转空数组
• 数组不变化
• string转为 [string]
• map,set转为 [...map]、 [...set]
• object转为 [object]

Symbol.iterator

原生具备 Iterator 接口的数据结构如下。

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

for...of

一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口

可以使用的范围包括：

• 数组
• Set 和 Map 结构
• arguments对象
• DOM NodeList 对象
• Generator 对象
• 字符串。

源码

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

ava

测试js方法 文档地址：github.com/avajs/ava-d…

// 名称是mian，
// 参数1: 是执行的方法名称，
// 参数2：返回的结果， 会与方法的返回值进行比较  
// 参数3：错误时，提示的日志
test('main', t => {   
	t.deepEqual(arrify('foo'), ['foo']);
	t.deepEqual(arrify(new Map([[1, 2], ['a', 'b']])), [[1, 2], ['a', 'b']]);
	t.deepEqual(arrify(new Set([1, 2])), [1, 2]);
	t.deepEqual(arrify(null), []);
	t.deepEqual(arrify(undefined), []);

	const fooArray = ['foo'];
	t.is(arrify(fooArray), fooArray);
});

tsd

ts的测试文件

package.json 文件

博客地址 juejin.cn/post/709904…

常用属性

• script: 直接用脚本名调用，而不必加上路径
• bin: 将可执行文件加载到全局环境中
• workspaces: 声明目录下的package会软链到最上层root package的node_modules中
• keywords：关键字数组，通常用于搜索

环境相关属性

• type 声明npm包遵循的模块化规范
• main & module & browser 指定入口文件，browser+mjs > module > browser+cjs > main
• exports npm包的真实和全部的导出， 优先级最高

依赖相关

• dependencies 项目需要的依赖
• devDependencies 开发需要的依赖
• peerDependencies 解决核心库被多次下载的问题
• peerDependenciesMeta 是针对peerDependencies的描述信息，比如是否可选