arrify 轉陣列實現範例原始碼解析

2022-12-27 14:01:27

學習目標

分析 arrify 函數的原始碼
通過測試用例偵錯原始碼
學習 Symbol.iterator 的使用場景
其它的可迭代物件

拉取原始碼

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

專案目錄如圖：

忽略掉一些組態檔，各個檔案的功能如下：

index.js是整個專案的入口，負責對外匯出arrify函數
index.d.ts是arrify函數的TS型別描述檔案
test.js是測試用例

分析原始碼

arrify函數可以接受一個值，並返回一個包含該值的陣列,根據傳入不同型別的值返回不同的結果。

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

Symbol.iterator 的使用場景

Symbol.iterator 是 JavaScript 中的一個內建 Symbol，它用於定義一個物件的預設迭代器。當一個物件被用於 for...of 迴圈或者解構賦值時，會自動呼叫它的 Symbol.iterator 方法。

舉個例子，假設你有一個陣列，你可以使用 Symbol.iterator 方法來定義如何遍歷這個陣列：

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);
}

上面的程式碼定義了一個陣列 numbers，併為它定義了一個 Symbol.iterator 方法，這個方法返回一個迭代器物件，這個物件的 next 方法返回陣列的下一個元素。然後我們使用 for...of 迴圈來遍歷這個陣列，迴圈會自動呼叫 numbers 的 Symbol.iterator 方法來獲取每個元素+1後的值。

上面程式碼執行的執行結果：