暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

arrify源码笔记

前端怪咖 2022-06-01
279

源码地址:arrify

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

安装:npm install arrify

使用:import arrify from 'arrify';     arrify(value)

源码解析:

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

- 分别对不同的类型做处理:

    对于 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 = {x:1,y:2,z:3}  // {x: 1, y: 2, z: 3}
Object.keys(a)   // ['x', 'y', 'z']
Object.values(a) // [1, 2, 3]

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



文章转载自前端怪咖,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论