【若川视野 x 源码共读】第33期 | arrify 转数组

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

要读的源码arrify

1. 作用:将某个值转化为数组形式

2. 例子:

       var let a = 3;
       var arr = arrify(3);
       console.log(arr) //[3]
   

3. 源码及注释如下:

       export default function arrify(value) {
       // 如果是null或者undefined返回 [],undeined可以用void 0代替
           if (value === null || value === undefined) {
           return [];
       }
           // 如果是数组的话，原样返回
           if (Array.isArray(value)) {
                   return value;
           }
           // 如果是string的话，返回[value]
           if (typeof value === 'string') {
                   return [value];
           }
           //如果对象存在迭代器的话，使用展开运算符
           if (typeof value[Symbol.iterator] === 'function') {
                   return [...value];
           }
       // 其他类型返回[value]
       return [value];
   }
   

4. 调试:

• 开启debugger的smart模式
• 在test.js测试文件上打上断点

• 在package.json中运行test命令，不过是以debug模式进行

• 这样就可以安心开始调试了

symbol.iterator

1. 定义:symbol.iterator为每个对象定义了默认的迭代器,该迭代器可以被for...of循环使用
2. Array,TypedArray,String,Map,Set拥有默认的迭代器行为，然后Object则没有
3. 如何給一个对象添加迭代器，迭代器必须返回一个迭代器对象

var myIterable = {}

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

console.log([...myIterable]);//[1,2,3]
for (const item of myIterable) {
    console.log(item); //1,2,3
}

4. 添加不符合标准的迭代器

var nonWellFormedIterable = {};

nonWellFormedIterable[Symbol.iterator] = ()=>1

console.log([...nonWellFormedIterable]); //VM130:3 Uncaught TypeError: Result of the Symbol.iterator method is not an object

展开运算符接收可迭代对象

let str = ''
let arr =[...str] //[a,b,c]

这个显然不是作者单个值转化为array想要的结果，所以单独提取出来作为一个分支条件

参考资料

1. Symbol.iterator

2. 展开语法

3. 迭代协议

总结

1. 迭代器控制了对象默认的迭代行为，并且能够为for...of使用，在for...of中迭代的顺序是固定的，可以使用for...of 来顺序执行接口的调用

2. 学习了如何发布一个npm包并写了自己的经验，链接如下:如何发布一个npm包