上一篇文章寫(xiě)了omit.js 剔除對(duì)象中的屬性,相對(duì)而言比較簡(jiǎn)單。這一篇實(shí)現(xiàn)一個(gè)比較簡(jiǎn)易的庫(kù)。

添加測(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)置類(lèi)型擁有默認(rèn)的迭代器行為，其他類(lèi)型（如 Object）則沒(méi)有。下表中的內(nèi)置類(lè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]的類(lèi)型是不是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)文章希望大家以后多多支持腳本之家！

最新評(píng)論