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

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

本期要阅读的源码：arrify，同时也是本人第一次提交笔记，以后要多多发笔记！

安装npm install arrify

index.js

	//判断输入的值是否为null或undefined，返回[]
	if (value === null || value === undefined) {
		return [];
	}
	//判断输入的值是否为array类型，返回value
	if (Array.isArray(value)) {
		return value;
	  }
	//判断输入的值是否为string类型，返回[value]
	if (typeof value === 'string') {
		return [value];
	}
	//判断输入的值是否为可迭代对象，返回[...value]
	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}
	//其他情况返回[value]
	return [value];
}

test.js

import test from 'ava';
import arrify from './index.js';

test('main', t => {
	t.deepEqual(arrify('foo'), ['foo']);
	t.deepEqual(arrify(new Map([[1, 2], ['a', 'b']])), [[1, 2], ['a', 'b']]);
	t.deepEqual(arrify(new Set([1, 2])), [1, 2]);
	t.deepEqual(arrify(null), []);
	t.deepEqual(arrify(undefined), []);

	const fooArray = ['foo'];
	t.is(arrify(fooArray), fooArray);
});

知识点总结

1. 可迭代对象 Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。

一些内置类型拥有默认的迭代器行为，其他类型（如 Object）则没有。下表中的内置类型拥有默认的@@iterator方法：

• Array.prototype[@@iterator]()
• TypedArray.prototype[@@iterator]()
• String.prototype[@@iterator]()
• Map.prototype[@@iterator]()
• Set.prototype[@@iterator]()

2. js测试框架ava

ava可以理解为mocha的替代品：

• es6语法支持更好，对aysnc/await有支持
• 执行效率更高，使用io并发，就必须保证测试的原子性
• 语义上更简单，集众家之长 安装设置ava，运行npm init ava， package.json中生成

{
	"name": "awesome-package",
	"scripts": {
		"test": "ava"
	},
	"devDependencies": {
		"ava": "^1.0.0"
	}
}

创建测试文件

import test from 'ava';
test('foo', t => {
	t.pass();
});

test('bar', async t => {
	const bar = Promise.resolve('bar');
	t.is(await bar, 'bar');
});

运行测试npm test

思考

1. 判断可迭代对象可否能与判断String类型互换位置？

String的原型对象拥有Symbol.iteartor方法，如果位置发生变换则提前进入Symbol.iteartor类型判断，结果被解构发生变化。

2. 类数组可否转换为数组？

类数组没有Array的内置方法，若要实现，需要自己动手实现！

调试

设置断点，开始调试

查看每步的变量

测试用例执行完毕

总结

加深对可迭代对象的理解，同时通过调试测试用例，对代码理解更深刻，遗憾就是不会Ts，等看完vue源码文章后，马上入手学习ts。

第一次静下心阅读源码，虽然内容不多，但是受益匪浅，以后也要养成做笔记的好习惯，感谢若川大大！