源码才十几行的数组转换工具arrify,快学起来

·  阅读 1191
源码才十几行的数组转换工具arrify,快学起来

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

前言

前几天在项目中运用到了arrify工具,今天便阅读了arrify的源码,整个源码部分不过才十几行,而且也不难,所以来分享一下阅读心得。

arrify介绍

arrify是什么,有什么作用,或许有些小伙伴还不清楚。简单点理解它就是一个数组转换工具。官方说明它是将传入的任意值转换为数组。

我们先来安装一下arrify

npm install arrify
复制代码

这样我们就可以在项目中正式引入该工具了。

import arrify from '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];
}
复制代码

源码很简单,就十几行。里面做了四个if判断,前三个判断都很好理解,在第四个判断中,加入了迭代器判断,如果传入参数是可迭代对象, 则使用扩展运算符转换为数组。简单来说就是它解决了很多类型的检验,用 ... 解构出来。

arrify使用

我创建一个空项目,将arrify源码写入,并在后台打印该值,如下所示。

// 源码部分
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];
}
// 打印值
console.log(arrify('abc'));
console.log(arrify('[a,b,c]'));
console.log(arrify(null));
console.log(arrify(undefined));
console.log(arrify(new Set('[a,b,c]')));

function App() {
  return (
    <div></div>
  );
}
export default App;
复制代码

通过观察后台,结果如下:

image.png

另外,该源码中的判断顺序不可随意改动,如果我们改变if的判断顺序,将迭代器判断移动到前面,结果会不一样。

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

	if (Array.isArray(value)) {
		return value;
	}
        // 调换顺序
        if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	if (typeof value === 'string') {
		return [value];
	}

	return [value];
}
复制代码

最终打印结果如下:

image.png

Symbol.iterator介绍

Symbol.iterator为每一个对象定义了默认的迭代器。该迭代器可以被for...of... 循环使用。我们可以参考相关文档自定义如下迭代器。

var myIterable = {}
myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
[...myIterable] 
// 输出[1, 2, 3]
复制代码

关于发包

关于如何发布npm包这个问题,我也研究了几天后,也总结出一篇文章 原来发布 NPM 包这么简单。自己弄个demo案例,走一遍发包流程即可。

总结

arrify总结如下:

  • 首先,如果参数是数组, 直接返回原来的参数;如果参数是 string类型, 则返回 [value] ;如果参数是 null 或 undefined 返回 [];如果参数是可迭代对象,则使用扩展运算符...转换为数组。
  • 其次,源码中通过迭代器判断巧妙地解决了很多类型的判断。
  • 最后,源码中的判断顺序不可随意改动,否则得不到预期效果。
分类:
前端
收藏成功!
已添加到「」, 点击更改