【若川视野 x 源码共读】第33期 | 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、判断是否为空，返回空数组

2、如果是数组直接返回,避免解构带来的额外消耗

3、字符串的话直接返回 [string],避免解构带来的额外消耗，同时，字符串我们也不希解构返回['a', 'b', 'c']

4、其他的具有迭代器的函数，返回解构数组

5、除上述外返回 [value]

重点在于了解 Symbol.iterator， 其实这就是一个迭代器，

有了它可以像一个数组一样使用 ... 扩展运算符去展开，也就可以被 for...of所迭代使用。

试着调试一下

1、创建arrify.js文件

import arrify from "./index.js";

console.log(arrify(null));
console.log(arrify(undefined));

console.log(arrify(1));
console.log(arrify([1, "foo"]));
console.log(arrify("string"));

console.log(
	arrify(function () {
		console.log(1);
	})
);

console.log(arrify({}));
console.log(arrify(true));
console.log(arrify(false ? [1, 2] : [1, "foo"]));

并在package.json 增加调试命令，并执行

调试命令可参考