进入到 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
是 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
循环遍历
总之,一个数据结构如果具有Symbol.iterator
属性,这个对象就可以被for...of
遍历它的成员。我们理解iteration的原理可以更好使用js提供的数据结构,必要时还可以改造不可迭代的数据结构。
以上就是arrify 转数组实现示例源码解析的详细内容,更多关于arrify 转数组的资料请关注脚本之家其它相关文章!
编程 | 2023-02-24 21:36
编程 | 2023-02-21 12:51
编程 | 2023-02-21 12:47
编程 | 2023-02-21 00:15
编程 | 2023-02-21 00:08
编程 | 2023-02-20 21:46
编程 | 2023-02-20 21:42
编程 | 2023-02-20 21:36
编程 | 2023-02-20 21:32
编程 | 2023-02-20 18:12
网友评论