学习目标
- 分析 arrify 函数的源码
- 通过测试用例调试源码
- 学习 Symbol.iterator 的使用场景
- 其它的可迭代对象
拉取源码
进入到 arrify 仓库下，使用 CodeSpace 克隆一份项目。
项目目录如图：
忽略掉一些配置文件，各个文件的功能如下：
index.js是整个项目的入口，负责对外导出arrify函数index.d.ts是arrify函数的TS类型描述文件test.js是测试用例
分析源码
arrify函数可以接受一个值，并返回一个包含该值的数组,根据传入不同类型的值返回不同的结果。
export default function arrify(value) {
// 如果传入的值是 null 或 undefined，函数会返回一个空数组。
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];
}
// 如果传入的值既不是 null/undefined，也不是一个数组/字符串/可迭代对象，函数会返回一个包含该值的数组。
return [value];
}
Symbol.iterator 的使用场景
Symbol.iterator 是 JavaScript 中的一个内置 Symbol，它用于定义一个对象的默认迭代器。当一个对象被用于 for...of 循环或者解构赋值时，会自动调用它的 Symbol.iterator 方法。
举个例子，假设你有一个数组，你可以使用 Symbol.iterator 方法来定义如何遍历这个数组：
const numbers = [1, 2, 3];
numbers[Symbol.iterator] = function() {
let i = 0;
return {
next: function() {
return {
value: numbers[i] + 1,
done: i++ === numbers.length
};
}
};
};
for (const num of numbers) {
console.log(num);
}
上面的代码定义了一个数组 numbers，并为它定义了一个 Symbol.iterator 方法，这个方法返回一个迭代器对象，这个对象的 next 方法返回数组的下一个元素。然后我们使用 for...of 循环来遍历这个数组，循环会自动调用 numbers 的 Symbol.iterator 方法来获取每个元素+1后的值。
上面代码执行的执行结果：
可见我们更改了 array 的默认迭代器。
具有默认的迭代器函数的对象
这些对象能够被 for...of 循环遍历
- 数组
- 字符串
- Map（Map）
- Set（Set）
总结
总之，一个数据结构如果具有Symbol.iterator属性，这个对象就可以被for...of遍历它的成员。我们理解iteration的原理可以更好使用js提供的数据结构，必要时还可以改造不可迭代的数据结构。
以上就是arrify 转数组实现示例源码解析的详细内容，更多关于arrify 转数组的资料请关注编程网其它相关文章！
