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

導讀	這篇文章主要為大家介紹了arrify 轉陣列實現示例原始碼解析，有需要的朋友可以借鑑參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

• 分析 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 是 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後的值。

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

可見我們更改了 array 的預設迭代器。

這些物件能夠被 for...of 迴圈遍歷

陣列

字串

Map（Map）

Set（Set）

總之，一個資料結構如果具有Symbol.iterator屬性，這個物件就可以被for...of遍歷它的成員。我們理解iteration的原理可以更好使用js提供的資料結構，必要時還可以改造不可迭代的資料結構。

原文來自：