前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

一提到 Lodash，想必大部分前端開發(fā)者都非常熟悉。這款陪伴了我們多年的 JavaScript 工具庫，然而隨著 ES6 的出現(xiàn)，Lodash 在前端開發(fā)中的使用逐漸減少?，F(xiàn)在，我們會發(fā)現(xiàn)，能夠用 ES6 寫的代碼，我們幾乎不會再依賴 Lodash。雖然 Lodash 并沒有完全消失，但它在現(xiàn)代前端開發(fā)中的使用頻率確實大大降低了。

Lodash 的痛點

仔細研究 Lodash 源碼的開發(fā)者都會發(fā)現(xiàn)，它的底層實現(xiàn)主要基于 ES5，進行了許多繁瑣的封裝和處理。學習 Lodash 源碼的門檻很高，且可讀性較差。隨著 ES6 的出現(xiàn)，許多 Lodash 實現(xiàn)的功能可以通過一個符號來實現(xiàn)，而 Lodash 仍需要傳遞參數(shù)和執(zhí)行額外的操作，造成了不必要的復雜性和低可讀性。

比如，常見的訪問嵌套對象屬性時，可能因為中間某個屬性不存在而導致錯誤。Lodash 提供了 _.get 函數(shù)來處理這個問題，以下是一個對比：

const user = {
profile: {
    address: {
      street: "123 Main St",
      city: "Wonderland"
    }
  }
};

// 使用 ES6 可選鏈（?.）
const city = user?.profile?.address?.city; // "Wonderland" 或 undefined

// 使用 ES6 空值合并（??）
const city2 = user?.profile?.address?.city ?? "Default City"; // "Wonderland" 或 "Default City"

// 使用 Lodash 的 _.get
const city3 = _.get(user, 'profile.address.city', 'Default City'); // "Wonderland" 或 "Default City"

在這個例子中，ES6 的可選鏈和空值合并操作符不僅語法簡潔，而且可讀性也更強。

了解 Radash

Radash 是一款新興的 JavaScript 工具庫，它被設計為“新一代的 Lodash”。Radash 在 GitHub 上得到了大量的關注，并且具備穩(wěn)定的下載量。與 Lodash 相比，Radash 提供了更現(xiàn)代化的功能，并且對 TypeScript 的支持更為友好。

Radash 的特點

• 零依賴：Radash 是一個零依賴的工具庫，意味著它不依賴于任何第三方庫。使用 Radash 時，只需加載該庫本身，無需額外的依賴項。
• 對 TypeScript 的原生支持：Radash 完全使用 TypeScript 編寫，這使得在 TypeScript 項目中使用 Radash 變得更加安全和方便，避免了類型錯誤。
• 現(xiàn)代化功能：Radash 摒棄了 Lodash 中的一些過時功能，增加了許多新特性，全面支持 ES6+ 的特性。
• 易于理解與維護：Radash 的源碼更易理解，適合新手上手，且維護時重點考慮可讀性。
• 性能優(yōu)化：Radash 在設計時就考慮了性能優(yōu)化，部分函數(shù)的性能甚至超過了 Lodash。
• 社區(qū)支持與活躍度：Radash 在社區(qū)中逐漸受到關注，開發(fā)者對于它的現(xiàn)代化設計和 TypeScript 支持給予了高度評價。

圖片

常用的 Radash API 示例

• list() - 創(chuàng)建數(shù)字序列
  list() 函數(shù)可以生成一個指定范圍的數(shù)字序列。

import { list } from 'radash';

const numbers = list(1, 5); // 創(chuàng)建從 1 到 5 的數(shù)字序列
console.log(numbers); // 輸出: [1, 2, 3, 4, 5]

• retry() - 重試失敗的異步操作
  retry() 函數(shù)用于重試一個失敗的異步操作，直到成功或達到最大重試次數(shù)。

import { retry } from'radash';

asyncfunction fetchData() {
try {
    const response = await fetch('api/data');
    return response.json();
  } catch (error) {
    throw error;
  }
}

// 嘗試最多 3 次，每次失敗后等待 2 秒
const data = await retry({ times: 3, delay: 2000 }, fetchData);
console.log(data);

• counting() - 統(tǒng)計數(shù)組中元素的數(shù)量
  counting() 函數(shù)可以統(tǒng)計類數(shù)組集合中各類元素的數(shù)量。

import { counting } from 'radash';

const items = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const counts = counting(items, item => item);
console.log(counts); // 輸出: { apple: 3, banana: 2, orange: 1 }

• unique() - 從數(shù)組中提取唯一元素
  unique() 函數(shù)可以從數(shù)組中提取唯一的元素。

import { unique } from 'radash';

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = unique(array);
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]

• 類型檢查函數(shù)
  Radash 提供了一些類型檢查函數(shù)，如 isArray()、isString()、isNumber() 等，用于檢測變量的數(shù)據(jù)類型。

import { isArray, isString, isNumber } from 'radash';

const myArray = [1, 2, 3];
const myString = 'Hello, Radash!';
const myNumber = 42;

console.log(isArray(myArray)); // 輸出: true
console.log(isString(myString)); // 輸出: true
console.log(isNumber(myNumber)); // 輸出: true

總結(jié)

Radash 為現(xiàn)代 JavaScript 開發(fā)提供了一款輕量級、易于使用且支持 TypeScript 的工具庫。它通過去除 Lodash 中的一些過時功能，提升了可讀性和性能，同時添加了一些新的實用特性，使得開發(fā)者在處理常見問題時更加高效。隨著 Radash 的不斷發(fā)展，它可能會成為前端開發(fā)中一個重要的工具庫。