如何将值数组化？- arrify

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

本篇文章介绍了arrify使用方式和源码解读，它的作用是将传入的值转换为数组。

安装

npm install arrify

使用

import arrify from 'arrify';

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

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

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

arrify(null);
//=> []

arrify(undefined);
//=> []

指定undefined和null为空数组。

源码

话不多说，直接把代码拉到本地溜溜~

git clone https://github.com/sindresorhus/arrify.git

要快速了解一个项目，首先得看它的package.json文件，看入口。

"type": "module",
"exports": "./index.js",

从这里分析代码是入口是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];
}

• 第一个判断条件，将undefined和null的结果统一转换为空数组；
• 接着如果这个传入的参数本身是数组直接返回；
• 如果传入的是字符串，则用中括号包裹起来；
• 如果传入的是迭代器，则先将传入的值展开，然后用中括号包裹；
• 最后是统一处理传入值直接用中括号包裹起来；

虽然是短短几行代码，这判断顺序可是别有深意。

首先处理的是边界条件，我们在开发过程中也不要忘了特殊值的处理，比如undefined,null,以及不需要处理的情况； 然后考虑最后一行和判断类型为字符串类型的逻辑是否可以归到一起，发现如果归到一起，字符串的转换结果就和我们预期的不一样了

arrify('123');  
// 预期 ['123']
// 实际结果是 ['1', '2', '3']

究其原因发现，字符串类型被迭代器预先处理了。所以将字符串类型和通用处理的逻辑分开是有原因的。

结束语

在阅读源码的时候，我们除了了解源码如何实现的之外呢，我们还要了解为什么要这样写？这样究其为什么这一步，我们的记忆才足够深刻。