【源码学习】arrify | 任意值转数组

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

源码

github 地址：arrify

export default function arrify(value) {
    // 若 value 为 null 或 undefined，则返回空数组
    if (value === null || value === undefined) {
        return [];
    }

    // 若 value 为数组，则返回 value 本身
    if (Array.isArray(value)) {
        return value;
    }

    // 若 value 为字符串，则返回由 value 组成的长度为 1 的数组
    if (typeof value === 'string') {
        return [value];
    }

    // 若 value 为可迭代对象，则返回由展开运算符转化的数组
    if (typeof value[Symbol.iterator] === 'function') {
        return [...value];
    }

    return [value];
}

知识点

typeof

typeof 操作符返回一个字符串，表示未经计算的操作数的类型。 更多参考

Array.isArray()

Array.isArray() 用于判断传入的值是否是一个数组。 更多参考

Symbol.iterator（重点）

Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。 更多参考

包含 Symbol.iterator 属性的对象被称为可迭代对象（Iterable），Symbol.iterator 是一个特殊的内置符号，它的值是一个返回迭代器的方法。

当需要对一个对象进行迭代时（比如用于 for...of 循环中），该对象的 @@iterator 方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值。

@@iterator 方法即为可迭代对象的 Symbol.iterator 属性值

ES6 内置了多种可迭代对象，它们都拥有默认的迭代器（即 @@iterator 方法）：

• String
• Array
• TypedArray
• Map
• Set
• 类数组对象（arguments、NodeList）

---

自定义迭代器：

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

总结

• 拥有 Symbol.iterator 属性的对象被称为可迭代对象（Iterable）
• Symbol.iterator 属性，其值为一个返回迭代器的方法，该方法被称为 @@iterator 方法
• String 类型拥有默认的迭代器

ps：第一次掘金笔记就贡献给源码学习了，要坚持写笔记的习惯，加油鸭💪！