欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript手寫源碼之實現arrify轉數組

 更新時間：2023年02月09日 10:09:22   作者：mick  
這篇文章主要為大家詳細介紹了如何利用JavaScript實現arrify轉數組，文中的示例代碼講解詳細，對我們學習JavaScript有一點的幫助，需要的可以參考一下

上一篇文章寫了omit.js 剔除對象中的屬性,相對而言比較簡單。這一篇實現一個比較簡易的庫。

添加測試文件

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

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])

})

實現arrify

毫無疑問我們需要實現一個arrify函數并導出,并且需要傳入參數。

傳入字符串

首先看這個測試

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

arrify傳入一個字符串，返回的是一個數組，而且這個數組將我們傳入的字符串包裹起來。那我們可以很簡單的實現出來。

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

傳入null或undefined

下面看下這個測試

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

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

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

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

傳入數組

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

如果傳入的是數組，則直接返回

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

可迭代對象

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

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

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

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

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

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

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

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

總結

以上就是我實現的一個手寫arrify庫。在手寫過程中，會有很多自己的想法，思考測試該怎么寫，思考代碼該怎么重構，更重要的是你真的懂了源碼，把它寫下來就變成你自己的了。剛開始手寫的庫比較簡單，后面會不斷的給自己加大難度。

到此這篇關于JavaScript手寫源碼之實現arrify轉數組的文章就介紹到這了,更多相關JavaScript arrify轉數組內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關文章

最新評論