JavaScript手寫(xiě)源碼之實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組

更新時(shí)間：2023年02月09日 10:09:22 作者：mick

這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一點(diǎn)的幫助，需要的可以參考一下

添加測(cè)試文件

依然和上篇文章一樣，使用vitest測(cè)試，具體怎么操作可以移步上一篇文章，這里我們就只寫(xiě)寫(xiě)測(cè)試文件了。

import { test, expect } from "vitest"
import { arrify } from "."

test("main", () => {
  expect(arrify("foo")).toEqual(["foo"])

  expect(arrify(null)).toEqual([])

  expect(arrify(undefined)).toEqual([])

  expect(arrify([1, 2])).toEqual([1, 2])
  
  expect(arrify(new Map([[1, 2]]))).toEqual([[1, 2]])

  expect(arrify(new Set([1, 2]))).toEqual([1, 2])

})

實(shí)現(xiàn)arrify

毫無(wú)疑問(wèn)我們需要實(shí)現(xiàn)一個(gè)arrify函數(shù)并導(dǎo)出,并且需要傳入?yún)?shù)。

傳入字符串

首先看這個(gè)測(cè)試

expect(arrify("foo")).toEqual(["foo"])

arrify傳入一個(gè)字符串，返回的是一個(gè)數(shù)組，而且這個(gè)數(shù)組將我們傳入的字符串包裹起來(lái)。那我們可以很簡(jiǎn)單的實(shí)現(xiàn)出來(lái)。

export function arrify(value) {
  if (typeof value === "string") {
    return [value]
  }
}

傳入null或undefined

下面看下這個(gè)測(cè)試

expect(arrify(null)).toEqual([])

expect(arrify(undefined)).toEqual([])

如果傳入的是null或者undefined則直接返回[]

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

傳入數(shù)組

expect(arrify([1, 2])).toEqual([1, 2])

如果傳入的是數(shù)組，則直接返回

export function arrify(value) {
  ···
  if (Array.isArray(value)) {
    return value
  }
  ···
}

可迭代對(duì)象

expect(arrify(new Map([[1, 2]]))).toEqual([[1, 2]])

expect(arrify(new Set([1, 2]))).toEqual([1, 2])

這里要著重介紹一下。Symbol.iterator 為每一個(gè)對(duì)象定義了默認(rèn)的迭代器。當(dāng)需要對(duì)一個(gè)對(duì)象進(jìn)行迭代時(shí)（比如開(kāi)始用于一個(gè)for..of循環(huán)中），它的@@iterator方法都會(huì)在不傳參情況下被調(diào)用，返回的迭代器用于獲取要迭代的值。

一些內(nèi)置類型擁有默認(rèn)的迭代器行為，其他類型（如 Object）則沒(méi)有。下表中的內(nèi)置類型擁有默認(rèn)的@@iterator方法：

Array.prototype[@@iterator]()
TypedArray.prototype[@@iterator]()
String.prototype[@@iterator]()
Map.prototype[@@iterator]()
Set.prototype[@@iterator]()

我們可以像下面這樣創(chuàng)建自定義的迭代器：

var myIterable = {}
myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
[...myIterable] // [1, 2, 3]

所以我們想要讓測(cè)試通過(guò)就可以判斷value[Symbol.iterator]的類型是不是function即可

export function arrify(value) {
  ···
  if (typeof value[Symbol.iterator] === "function") {
    return [...value]
  }
}

總結(jié)

以上就是我實(shí)現(xiàn)的一個(gè)手寫(xiě)arrify庫(kù)。在手寫(xiě)過(guò)程中，會(huì)有很多自己的想法，思考測(cè)試該怎么寫(xiě)，思考代碼該怎么重構(gòu)，更重要的是你真的懂了源碼，把它寫(xiě)下來(lái)就變成你自己的了。剛開(kāi)始手寫(xiě)的庫(kù)比較簡(jiǎn)單，后面會(huì)不斷的給自己加大難度。

到此這篇關(guān)于JavaScript手寫(xiě)源碼之實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組的文章就介紹到這了,更多相關(guān)JavaScript arrify轉(zhuǎn)數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: