學(xué)習(xí)目標(biāo)

• 分析 arrify 函數(shù)的源碼
• 通過(guò)測(cè)試用例調(diào)試源碼
• 學(xué)習(xí) Symbol.iterator 的使用場(chǎng)景
• 其它的可迭代對(duì)象

拉取源碼

進(jìn)入到 arrify 倉(cāng)庫(kù)下，使用 CodeSpace 克隆一份項(xiàng)目。

項(xiàng)目目錄如圖：

忽略掉一些配置文件，各個(gè)文件的功能如下：

• index.js是整個(gè)項(xiàng)目的入口，負(fù)責(zé)對(duì)外導(dǎo)出arrify函數(shù)
• index.d.ts是arrify函數(shù)的TS類型描述文件
• test.js是測(cè)試用例

分析源碼

arrify函數(shù)可以接受一個(gè)值，并返回一個(gè)包含該值的數(shù)組,根據(jù)傳入不同類型的值返回不同的結(jié)果。

export default function arrify(value) {
        // 如果傳入的值是 null 或 undefined，函數(shù)會(huì)返回一個(gè)空數(shù)組。
	if (value === null || value === undefined) {
		return [];
	}
        // 如果傳入的值本身就是一個(gè)數(shù)組，函數(shù)會(huì)直接返回這個(gè)數(shù)組
	if (Array.isArray(value)) {
		return value;
	}
        // 如果傳入的值是一個(gè)字符串，函數(shù)會(huì)返回一個(gè)包含該字符串的數(shù)組。
	if (typeof value === 'string') {
		return [value];
	}
        // 如果傳入的值是一個(gè)可迭代對(duì)象，函數(shù)會(huì)返回一個(gè)包含該對(duì)象所有元素的數(shù)組。
	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}
        // 如果傳入的值既不是 null/undefined，也不是一個(gè)數(shù)組/字符串/可迭代對(duì)象，函數(shù)會(huì)返回一個(gè)包含該值的數(shù)組。
	return [value];
}

Symbol.iterator 的使用場(chǎng)景

Symbol.iterator 是 JavaScript 中的一個(gè)內(nèi)置 Symbol，它用于定義一個(gè)對(duì)象的默認(rèn)迭代器。當(dāng)一個(gè)對(duì)象被用于 for...of 循環(huán)或者解構(gòu)賦值時(shí)，會(huì)自動(dòng)調(diào)用它的 Symbol.iterator 方法。

舉個(gè)例子，假設(shè)你有一個(gè)數(shù)組，你可以使用 Symbol.iterator 方法來(lái)定義如何遍歷這個(gè)數(shù)組：

const numbers = [1, 2, 3];
numbers[Symbol.iterator] = function() {
  let i = 0;
  return {
    next: function() {
      return {
        value: numbers[i] + 1,
        done: i++ === numbers.length
      };
    }
  };
};
for (const num of numbers) {
  console.log(num);
}

上面的代碼定義了一個(gè)數(shù)組 numbers，并為它定義了一個(gè) Symbol.iterator 方法，這個(gè)方法返回一個(gè)迭代器對(duì)象，這個(gè)對(duì)象的 next 方法返回?cái)?shù)組的下一個(gè)元素。然后我們使用 for...of 循環(huán)來(lái)遍歷這個(gè)數(shù)組，循環(huán)會(huì)自動(dòng)調(diào)用 numbers 的 Symbol.iterator 方法來(lái)獲取每個(gè)元素+1后的值。

上面代碼執(zhí)行的執(zhí)行結(jié)果：

可見(jiàn)我們更改了 array 的默認(rèn)迭代器。

具有默認(rèn)的迭代器函數(shù)的對(duì)象

這些對(duì)象能夠被 for...of 循環(huán)遍歷

• 數(shù)組
• 字符串
• Map（Map）
• Set（Set）

總結(jié)

總之，一個(gè)數(shù)據(jù)結(jié)構(gòu)如果具有Symbol.iterator屬性，這個(gè)對(duì)象就可以被for...of遍歷它的成員。我們理解iteration的原理可以更好使用js提供的數(shù)據(jù)結(jié)構(gòu)，必要時(shí)還可以改造不可迭代的數(shù)據(jù)結(jié)構(gòu)。

以上就是arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析的詳細(xì)內(nèi)容，更多關(guān)于arrify 轉(zhuǎn)數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論