【源码阅读】arrify | 如何把一个值转为数组?

141 阅读1分钟

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

export default function arrify(value) {  if (value === null || value === undefined) {    return [];  }  if (Array.isArray(value)) {    return value;  }  if (typeof value === 'string') {    return [value];  }  if (typeof value[Symbol.iterator] === 'function') {    return [...value];  }  return [value];}

arrify依赖包:可以通过 包分析工具查看

xo: ESlint包装器,对代码进行检查
ava: 执行根目录的test.js文件中的测试用例
tsd: 通过index.test-d.ts文件测试index.d.ts定义    

转为数组值的类型与判断?

JS数据类型:

1 基本类型(值类型):未定义(undefined)、空(null)、布尔值(Boolean)、字符串(String)、数值(Number)、大整数(BigInt)、Symbol。

2 引用类型(对象类型):对象(Object)、数组(Array)、函数(Function)、基本包装类型、单体内置对象类型、正则(RegExp)和日期(Date)

基本类型中注意事项:

  •    undefined与null区别:null是一个空对象,undefined是全局对象中的一个特殊属性。null与undefined区别:null与undefined相等但由于类型不一样所以不恒等于;

  • JS内置对象

JS类型判断:

console.log(typeof undefined === "undefined"); // trueconsole.log(typeof null === "object"); // trueconsole.log(typeof 12 === "number"); // trueconsole.log(typeof "hello" === "string"); // trueconsole.log(typeof BigInt("1") === "bigint"); // trueconsole.log(typeof 1n === "bigint"); // trueconst symbol1 = Symbol();console.log(typeof symbol1);  // symbol

内置可迭代对象

StringArrayTypedArrayMapSet 都是内置可迭代对象,因为它们的原型对象都拥有一个 Symbol.iterator 方法。

用于可迭代对象的语法:一些语句和表达式专用于可迭代对象,例如 for-of 循环,展开语法yield*解构赋值

在arrify源码实现中因为字符串是内置可迭代对象,所以需要单独拿出来判断。

const str1='hello';const str1Arr=[str1];const str2Arr=[...str1];console.log(str1Arr,str2Arr); // [ 'hello' ] , [ 'h', 'e', 'l', 'l', 'o' ]console.log(typeof str1[Symbol.iterator]); // funtion