1. 前言
阅读本文你将了解：
- 一个源码共读组织
- 一个超好用的ai写代码的插件
- 一个菜鸟如何开始源码阅读
- 本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
- 这是源码共读的第# 33 期，链接：arrify 转数组。
2. 准备
-
根据前端程序员必学基本技能——调试JS代码习得debug的基本技能
-
安装依赖arrify
3. 开始阅读readme文件
node_modules/arrify阅读readme文件
Convert a value to an array
可知这个库的功能是把值转为数组。
下面还有引用示例
import arrify from 'arrify';
arrify('🦄');//=> ['🦄']
arrify(['🦄']);//=> ['🦄']
arrify(new Set(['🦄']));//=> ['🦄']
arrify(null);//=> []
arrify(undefined);//=> []
根据示例，可以很清晰的看出其转换逻辑。
4. 思考若自己撰写，应该如何实现？
示例中传递的参数分别是 string，Array，Set，null，undefined。
-
首先，梳理下js中数据类型
值类型(基本类型) ：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型） ：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）
-
试写
首先整理下思路，写好注释，配合插件Copilot,基本上写完注释再enter换行，看看这灰色的代码提示就出来了，写起来不要太轻松哦
插件名如下：
export function arrify(v) {
// 首先处理空的情况
if (v === null || v === undefined) {
return []
}
// 本身是数组的情况
if (Array.isArray(v)) {
return v
}
// 类数组的情况(Set, Map, ArrayLike)这些都是可迭代的
if (typeof v[Symbol.iterator] === 'function') {
return [...v]
}
// 其他情况（用数组套起来返回就可以了）
return [v]
}
-
调试
新建test.js文件，并拷贝readme中得示例代码，打上断点开始调试。f11进入
糟糕。。。为何第一个用例arrify('🦄')直接走到可迭代的分支里了？ 是了，字符串也是能用for of、map、forEach方法的。'hello'->['h','e','l','o']? 不行，得赶紧改
export function arrify(v) {
// 首先处理空的情况
if (v === null || v === undefined) {
return []
}
// 本身是数组的情况
if (Array.isArray(v)) {
return v
}
// 字符串的情况(也是可迭代的，所以要单独处理)
if (typeof v === 'string') {
return [v]
}
// 类数组的情况(Set, Map, ArrayLike)这些都是可迭代的
if (typeof v[Symbol.iterator] === 'function') {
return [...v]
}
// 其他情况（用数组套起来返回就可以了）
return [v]
}
5. 查看源码
打开index.js文件，对比下，竟然一样！我只能说AI太厉害了。。。
6. 后记
加入川神的源码组很长一段时间了，有跟着看过两三篇源码文章，但是笔记还真是第一次写啊，昨还写着写着断电了。。。 这次的源码非常短小，非常适合我哈，千里之行始于足下，希望还有下文。
