开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

本篇是源码共读第33期 | arrify转数组，点击了解本期详情

开始

什么是arrify？。arrify是指将值转换为数组。官方有给出相关的例子，可以看看官方说明

1、拉取代码

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

2、阅读源码

export default function arrify(value) {
        //判断如果是null或者是undefined就直接返回一个空数组
	if (value === null || value === undefined) {
		return [];
	}
        //判断如果是数组就直接返回value
	if (Array.isArray(value)) {
		return value;
	}
        //判断如果是String就直接返回[value]
	if (typeof value === 'string') {
		return [value];
	}
        //判断如果是可迭代对象，浅拷贝迭代值创建新数组，这里的迭代选择器还得回顾一下
	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	return [value];
}

3、测试

测试我直接就放在浏览器上测试了。

function arrify(value) {
        //判断如果是null或者是undefined就直接返回一个空数组
	if (value === null || value === undefined) {
		return [];
	}
        //判断如果是数组就直接返回value
	if (Array.isArray(value)) {
		return value;
	}
        //判断如果是String就直接返回[value]
	if (typeof value === 'string') {
		return [value];
	}
        //判断如果是可迭代对象，浅拷贝迭代值创建新数组，这里的迭代选择器还得回顾一下
	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	return [value];
}
console.log(arrify());//[]
console.log(arrify([]));//[]
console.log(arrify('123'));//["123"]
console.log(arrify({aa:'bb'}));//[{aa: "bb"}]
console.log(arrify([1,2,3]));//[1, 2, 3]
console.log(arrify([{aa:'bb'},{cc:'dd'}]));////[{aa: "bb"},{cc:'dd'}]

按测试结果来看，还是能很好的理解的。接下来就回顾一下那个迭代器是个什么玩意儿。

Symbol.iterator

1、什么是Symbol.iterator

每一个数组、伪数组、new Set()、 new Map() 中都有一个Symbol.interator 接口，每个Symbol.interator中都抛出一个next() 函数，next 中都返回两个属性，一个value，一个done。 任何事务（包含对象/数组/伪数组…）只要其中含有Symbol.iterator接口，表示它可以被for…of所循环

2、有什么用？

Symbol.iterator 为每一个对象定义了默认的迭代器，该迭代器可以被 for…of 循环使用 我们也可以自定义symbol.iterator属性为任意对象值定义自己的迭代器逻辑，他将覆盖默认的迭代器。

举例

var test = {}
test[Symbol.iterator] = function* () {
     yield 1;
     yield 2;
     yield 3;
};
[...test] // [1, 2, 3]

总结

本次的arrify是指将值转换为数组，还是很好理解的。可能就是这个Symbol.iterator有点难懂，但是如果多用例子来测试几遍，可能会更好理解一些。这次也收获颇多呀