likes
comments
collection
share

源码阅读01-arrify

作者站长头像
站长
· 阅读数 12

源码理解

先从简单的例子源码阅读,大致会根据源码理解其功能,以及其中的不理解的地址。从源码上分析其基本提供的功能:

  • 对 空值null 和 undefined 直接转为空数组,
  • 遇到字符串也转为数组。
  • 如果本身就是数组就会直接返回数组

源码里看似很简单就几行代码,就完成转数组的功能。但在第一眼看到的源代码内容里也会源码产生了一些不理解:

  • 数据类型还有整型,布尔型,它们会直接转成数组,string字符串也是一样的输出结果,为什么要单独做个 if 条件判断 string 类型然后输出结果
  • value[Symbol.iterator] 是什么?

string类型的 Iterator 能力

MDN 中 String 的用法中有一个方法是 String.prototype[@@iterator()返回一个 Iterator 对象。所以字符串类型具备 Iterator 接口。可以被遍历,然后返回每个字符串的值。当然也是可以被 for 循环遍历出字符串中的每个字符。

var str ="hello world";
for(var v of str){
	console.log(v)
}

将上面的代码在浏览器的控制台中执行下就可以得到遍历字符串的结果:

源码阅读01-arrify

所以,字符串具有 iterator 类型,需要单独拿出来判断,并且放在了Symbol.iterator判断之的前面。

迭代器

在 MDN zhong 对迭代器的解释是:

在 JavaScript 中,迭代器是一个对象,它定义一个序列,并在终止时可能返回一个返回值。更具体地说,迭代器是通过使用 next() 方法实现 Iterator protocol 的任何一个对象,该方法返回具有两个属性的对象: value,这是序列中的 next 值;和 done ,如果已经迭代到序列中的最后一个值,则它为 true 。如果 value 和 done 一起存在,则它是迭代器的返回值。

简单理解,具有 iterator 能力的的对象,能够使用 next() 方法,返回value 和 done 值。这样就可以调用 next 方法不断取出下一个元素。

所以源码中使用value[Symbol.iterator] === 'function'先判断其是否有 iterator 的属性,如果有就可以通过 for of 循环使用。而 ... 其实就是调用默认的 iterator 的next ,直到 done 是 true 时结束。

阅读源码还能学到新知识,迭代器。之所以会被for 循环出来主要是因为其有 iterator 。像对象就没有这个属性所以无法被 for 循环遍历。

源码地址: