【若川源码共读】 第33期arrify转数组

未名同学
95 阅读3分钟

一、arrify的简单介绍

什么是arrify? 就是一个用于将任何数据类型转换成数组形式的第三方库，在npm中的介绍如下：

image.png 源码：

// 仅导出一个arrify方法，参数为需要转换成数组的数据
export default function arrify(value) {
	// 如果传入的是null或者undefined，直接返回空数组
	if (value === null || value === undefined) {
		return [];
	}
    // 传入的本身就是数组，则直接将传入的参数返回即可
	if (Array.isArray(value)) {
		return value;
	}
    // 如果传入的数据类型是字符串，则返回包含该字符串的数组
	if (typeof value === 'string') {
		return [value];
	}
    // 当传入的数据类型不是上述的四种，而是具有Symbol.iterator迭代器属性的可迭代对象
	// 则通过扩展运算符取出所有可遍历的属性放在返回的数组中
	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	return [value];
}

二、内容知识总结

2.1 关于迭代器属性Symbol.iterator

通过查阅《JavaScript高级程序设计》可知，实现Iterable接口协议要求同时具备两种能力：

  1. 支持自我迭代的识别能力。
  2. 创建Iterator接口的对象的能力。

当前有以下的内置类型实现了Iterator接口，需要注意的是对象类型没有实现

  • 字符串String
  • 数组Array
  • 映射Map
  • 集合Set
  • arguments对象
  • NodeList等DOM集合类型

具备迭代器属性的对象支持以下的js原生语言特性

  1. for-of循环
  2. 数组解构
  3. 扩展运算符
  4. Array.from()
  5. 创建映射
  6. 创建集合
  7. Promise.all()接受由promise组成的可迭代对象
  8. Promise.race()接受的由promise组成的可迭代对象
  9. yield* 操作符，在生成器中使用

迭代器通过next()方法在可迭代对象中遍历数据，不通过调用next()方法，则无法知道迭代器的当前位置。调用next()方法返回的迭代器对象包含以下两个属性：

image.png

value:就是包含可迭代对象的下一个值。 done:为布尔类型的值，当为true的时候，状态称为“耗尽”，当为false的时候，继续迭代。

2.2 如何使用对象数据类型具备迭代器属性呢？

坦率的来说，自己一开始并不知道如何使得对象也具备迭代器属性，通过查找资料了解迭代器属性的基本实现原理，相简易代码如下所示：当我们给Object的原型上添加[Symbol.iterator]属性的时候，就可以实现对象支持for..of，但是通常来讲一般不建议直接对内置数据类型的原型进行修改。

const preson={
    name:'zhangsan',
    age:17,
    hobbies:['唱歌','读书'],
    // 创建一个[Symbol.iterator]方法属性
    [Symbol.iterator](){
        let index=0;
        let _this=this;
        // 返回的是一个next对象
        return {
            next:function(){
                if(index<_this.hobbies.length){
                    const res={value:hobbies[index],done:false};
                    index++;
                }else{
                    return {value:undefined,done:true}
                }
            }
        }
    }
}

三、收获与总结

  • 学会了在vscode中对nodejs进行简单的调试。

  • 理解了为什么对象数据类型不支持使用for...of的原因以及如何使得其支持迭代器对象。

  • ava等第三方库的使用还不是很熟悉，需要进一步的学习了解。

    第一次参加源码的阅读，arrify作为一个使用广泛的数据类型转换的库，其源码也就短短十几行，这也体现了源码其实并不可怕，克服畏难的情绪去学习会有很大收获的，希望后期能坚持下去，一周至少完成一次笔记的提交。

avatar
文章
阅读
粉丝