【若川视野 x源码共读】第33期 | arrify 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天

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

在线调试例子收到同期群友文章的启发 juejin.cn/post/710463… ，非常感谢！

arrify : Convert a value to an array （将值转换为数组）

本期学习目标

1. 学习 Symbol.iterator 的使用场景

2. 如何区别不同类型转化时的类型判断

前置概念查询 @@iterator

要成为可迭代对象，一个对象必须实现 **@@iterator** 方法。这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 Symbol.iterator 访问该属性：

前置概念查询: Symbol.iterator

Symbol.iterator 为每一个对象定义了默认的迭代器。

该迭代器可以被 for...of 循环使用。它的@@iterator方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值。

[Symbol.iterator]: 一个无参数的函数，其返回值为一个符合迭代器协议的对象

在MD5规范中描述一下几种数据类型拥有默认迭代器属性

使用迭代协议例子

String 是一个内置的可迭代对象：

let someString = "test";  
 
typeof someString[Symbol.iterator];    // "function"

自定义迭代对象方法

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

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];
}

arrify 的转换规则如下：

当参数为 null , nudefined 类型的情况下直接返回一个空数组
当通过 isArray() 函数判断为true时，该参数为'[]'类型，直接返回当前参数
当通过 typeof 判断为 string 时则返回当前字面量包裹后的数组
当参数判断认为是一个迭代器对象，@@iterator属性已经被定义时，则直接迭代后创建新数组
默认且其他类型直接返回包裹数组

总结

1. 学习了迭代器的定义，以及定义以,实现的注意事项 , 明确了之前不关注的知识点

2. 观看源码后，明确对于类型的理解。

3. 在封装函数是单一函数功能，对于函数边界要清晰，在 github issuse 作者建议如果是类数组对象则直接使用 ES6 提供的 Array.from 函数进行转换。