【若川视野 x 源码共读】第33期 arrify

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

arrify的github地址

首先看源码

export default function arrify(value) {
	//传入一个任意值

	//值为null 或者 undefined 时返回值为空数组
	if (value === null || value === undefined) {
		return [];
	}

	//是数组是直接返回
	if (Array.isArray(value)) {
		return value; //Array.isArray() 用于确定传递的值是否是一个 Array
	}

  //是字符串类型时把字符串包裹在一个空数组里
	if (typeof value === "string") {
		return [value];
	}

  //如果value可以被迭代 则把他包裹在一个空数组里
	if (typeof value[Symbol.iterator] === "function") {
		//Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用
		return [...value];
	}

  //剩余的情况都包裹在空数组
	return [value];
}

简单的来说可迭代对象的身上有一个Symbol.iterator属性 不可迭代的则没有（不知道这样理解对不对）

        function arrify(value) {
           ...
        }
        // debugger;
        const num = 123;
        const str = "123";
        const arr = [1,2,3,4];
        const boo = true;
        const obj = {name:123,age:12}
        console.log("num",num[Symbol.iterator]);
        console.log("str",str[Symbol.iterator]);
        console.log("arr",arr[Symbol.iterator]);
        console.log("boo",boo[Symbol.iterator]);
        console.log("obj",obj[Symbol.iterator]);
        console.log("arrify",arrify[Symbol.iterator]);
        console.log("null",null[Symbol.iterator]);
        console.log("NaN",NaN[Symbol.iterator]);
        console.log("undefined",undefined[Symbol.iterator]);

可得原始的六种数据类型只有字符串数组支持 回看源码

export default function arrify(value) {
	if (value === null || value === undefined) {
		return []; // null undefined
	}

	if (Array.isArray(value)) {
		return value; // Array
	}

	if (typeof value === 'string') {
		return [value]; //String
	}

	if (typeof value[Symbol.iterator] === 'function') {
		return [...value]; //可迭代值
	}

        // NaN Object
	return [value];
}

先拦截数组和字符串 在拦截可迭代 这里剩余的可迭代应该是后期添加Symbol.iterator属性的值

给对象添加[Symbol.iterator]的属性

let obj = {
	0: "a",
	1: "b",
	2: "c",
	length: 3,
	[Symbol.iterator]: function () {
		let index = 0;
		let next = () => {
			return {
				value: this[index],
				done: this.length == ++index,
			};
		};
		return {
			next,
		};
	},
};