arrify源码笔记

• 源码地址：arrify

• 作用：Convert a value to an array ，即将一个值转化为数组形式

• 安装：npm install arrify

• 使用：import arrify from 'arrify'; arrify(value)

• 源码解析：

  1. 先对value的值进行类型判断，可以分为几类，包括 null undefined , array, string , function

  2. 分别对不同的类型做处理：

     对于 null undefined类型，返回空数组 [ ]

     对于 array类型, 返回原数组

     对于 string 类型, 处理成数组，采用[value]的形式。这里的逻辑判断单独拿出来并且放在Symbol.iterator判断之前，是因为string类型具备 Iterator接口，执行 ... 会被分割成单独的字符。如下：

a = '123' // '123'
b = [a] // ['123']
c = [...a] // ['1', '2', '3']

对于可以遍历的类型，处理成数组，使用 [... xxx]，这里主要涉及到一个知识点 Symbol.iterator 。源码中的 typeof value[Symbol.iterator] === 'function'，用于判断 value 是否有遍历器属性，即是否可以被 for of 遍历出来。因为扩展运算符...会调用默认的iterator接口，所以这里要做判断。

• 额外补充两个：对object对象做循环处理，可以使用 Object.keys(obj) 和 Objet.value(obj)

a = '123' // '123'
b = [a] // ['123']
c = [...a] // ['1', '2', '3']

• 关于iterator 何时被调用，场景较多的就是 解构赋值 、 扩展运算符 、for... of... 、 map() 、set() 。

更多分享可以关注公众号：前端怪咖