學習目標

• 分析 arrify 函數(shù)的源碼
• 通過測試用例調(diào)試源碼
• 學習 Symbol.iterator 的使用場景
• 其它的可迭代對象

拉取源碼

進入到 arrify 倉庫下，使用 CodeSpace 克隆一份項目。

項目目錄如圖：

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

• index.js是整個項目的入口，負責對外導出arrify函數(shù)
• index.d.ts是arrify函數(shù)的TS類型描述文件
• test.js是測試用例

分析源碼

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

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

Symbol.iterator 的使用場景

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

舉個例子，假設你有一個數(shù)組，你可以使用 Symbol.iterator 方法來定義如何遍歷這個數(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);
}

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

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

可見我們更改了 array 的默認迭代器。

具有默認的迭代器函數(shù)的對象

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

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

總結(jié)

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

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

最新評論