[筆記] 紀錄在專案中使用過的lodash

Why Lodash ?

Lodash 在處理 arrays 、numbers、objects、strings 上更加容易，讓 Javascript 變得簡潔。

在專案中使用 lodash

透過 npm or yarn安裝：

npm i lodash
or
yarn add lodash

可以這樣引入：

//只 bundle 需要的功能
import _map from "lodash/map";
import _filter from "lodash/filter";

// lodash將整包被 bundle 到輸出檔案中
import { map, filter } from "lodash";

避免將 lodash 全數引入

可以透過安裝 babel-plugin-lodash來避免 lodash 被全數引入，安裝後下列的寫法只會 bundle 需要的功能。

import { map, filter } from "lodash";

開發專案中用過的 lodash

defaultTo startsWith

Collection

map(collection, [iteratee=_.identity])
通過迭代集合中元素來創建陣列。

- collection (Array|Object): 將被遍歷的集合
- [iteratee=_.identity] (Function): 每次迭代調用的函數.

import { map } from "lodash";

const square = (n) => n * n;

map([4, 8], square);
// => [16, 64]

map({ a: 4, b: 8 }, square);
// // => [16, 64] (不能保證迭代順序))

const users = [{ user: "barney" }, { user: "fred" }];

// // `_.property` 的迭代縮寫.
map(users, "user");
// // => ['barney', 'fred']

forEach(collection, [iteratee=_.identity])
迭代集合，但不會回傳任何東西，可以通過 return false 提早退出迭代

- collection (Array|Object): 將被遍歷的集合.
- [iteratee=_.identity] (Function): 每次迭代調用的函數.

import { forEach } from "lodash";

forEach([1, 2], (value) => console.log(value));
// => Logs `1` then `2`.

forEach({ a: 1, b: 2 }, (value, key) => console.log(key));
// => Logs 'a' then 'b' (不能保證迭代順序).

find(collection, [predicate=_.identity], [fromIndex=0])
通過迭代集合找尋指定的元素

- collection: 將被遍歷的集合
- predicate=_.identity : 每次迭代調用的函數
- fromIndex : 起始位置

import { find } from "lodash";

const users = [
  { user: "barney", age: 36, active: true },
  { user: "fred", age: 40, active: false },
  { user: "pebbles", age: 1, active: true },
];

find(users, (o) => o.age < 40);
// => object for 'barney'

// `_.matches` 的迭代縮寫.
find(users, { age: 1, active: true });
// => object for 'pebbles'

// `_.matchesProperty` 的迭代縮寫.
find(users, ["active", false]);
// => object for 'fred'

// `_.property` 的迭代縮寫.
find(users, "active");
// => object for 'barney'

includes(collection, value, [fromIndex=0])
檢查參考值是否在集合中

- collection (Array|Object|string): 將被檢查的集合.
- value (*): 參考值.
- [fromIndex=0](number): 起始位置.

import { includes } from "lodash";

includes([1, 2, 3], 1);
// => true

includes([1, 2, 3], 1, 2);
// => false

includes({ a: 1, b: 2 }, 1);
// => true

includes("abcd", "bc");
// => true

some(collection, [predicate=_.identity])
檢查是否有符合條件的元素，一旦判斷到符合條件的元素迭代就會停止。

- collection (Array|Object): 將被遍歷的集合.
- [predicate=_.identity] (Function): 每次迭代調用的函數.

import { some } from "lodash";

some([null, 0, "yes", false], Boolean);
// => true

const users = [
  { user: "barney", active: true },
  { user: "fred", active: false },
];

//  `_.matches` 的迭代縮寫.
some(users, { user: "barney", active: false });
// => false

// `_.matchesProperty`的迭代縮寫.
some(users, ["active", false]);
// => true

//  `_.property` 的迭代縮寫.
some(users, "active");
// => true

Array

join(array, [separator=’,’])
將指定的陣列用分隔符連接起來

- array (Array): 將被轉換的陣列.
- [separator=','] (string): 分隔符.

import { join } from "lodash";

join(["a", "b", "c"], "~");
// => 'a~b~c'

findIndex(array, [predicate=_.identity], [fromIndex=0])
通過迭代集合找尋指定的元素並回傳該位置的索引值

- array (Array): 將被檢查的陣列.
- [predicate=_.identity] (Function): 每次迭代調用的函數.
- [fromIndex=0] (number): 起始位置.

import { findIndex } from "lodash";

const users = [
  { user: "barney", active: false },
  { user: "fred", active: false },
  { user: "pebbles", active: true },
];

findIndex(users, (o) => o.user == "barney");
// => 0

// `_.matches` 的迭代縮寫.
findIndex(users, { user: "fred", active: false });
// => 1

// `_.matchesProperty` 的迭代縮寫.
findIndex(users, ["active", false]);
// => 0

//  `_.property` 的迭代縮寫.
findIndex(users, "active");
// => 2

head(array)
獲取陣列的第一個元素

- array (Array): 要查詢的陣列.

import { head } from "lodash";

head([1, 2, 3]);
// => 1

head([]);
// => undefined

Math

floor(number, [precision=0])

- number : 四捨五入後的數字
- [precision=0] : 往後 n 位小數點

import { floor } from "lodash";

floor(4.006);
// => 4

floor(0.046, 2);
// => 0.04

floor(4060, -2);
// => 4000

Lang

isNull(value)
檢查該數值是否為 Null

- value (*): 將被檢查的數值.

import { isNull } from "lodash";

isNull(null);
// => true

isNull(void 0);
// => false

isFinite(value)
檢查該數值是否為有限數值

- value(*): 將被檢查的數值.

import { isFinite } from "lodash";

isFinite(3);
// => true

isFinite(Number.MIN_VALUE);
// => true

isFinite(Infinity);
// => false

isFinite("3");
// => false

isFinite(1000 / 0);
// => false

isFinite(1000 / 1);
// => true

isEmpty(value)
檢查該數值是否為空集合

- value(*): 將被檢查的數值.

import { isEmpty } from "lodash";

isEmpty(null);
// => true

isEmpty(true);
// => true

isEmpty(1);
// => true

isEmpty([1, 2, 3]);
// => false

isEmpty({ a: 1 });
// => false

Object

get(object, path, [defaultValue])
通過路徑獲取該物件的資料，如果是 undefined 則返回預設數值.

- object (Object): 要查詢的物件.
- path (Array|string): 屬性路徑.
- [defaultValue] (*): 預設數值.

import { get } from "lodash";

const object = { a: [{ b: { c: 3 } }] };

get(object, "a[0].b.c");
// => 3

get(object, ["a", "0", "b", "c"]);
// => 3

get(object, "a.b.c", "default");
// => 'default'

Util

defaultTo(value, defaultValue)
如果數值為 NaN 、 null 、 undefined 就返回預設值

- value (*): 將被檢查的數值.
- defaultValue (*): 預設值.

import { defaultTo } from "lodash";

defaultTo(1, 10);
// => 1

defaultTo(undefined, 10);
// => 10

String

startsWith([string=’’], [target], [position=0])
檢查該位置的字串是否為目標字串

- [string=''] (string): 將被檢查的字串.
- [target] (string): 想找尋的字串.
- [position=0] (number): 想找尋的位置.

import { startsWith } from "lodash";

startsWith("abc", "a");
// => true

startsWith("abc", "b");
// => false

startsWith("abc", "b", 1);
// => true

結語

這篇參考充分利用 lodash 讓你的程式碼更易讀及維護– JIGSAWYE的文章。

另外 lodash 還有提供 lodash/fp 能夠使用 Functional Programming 讓程式碼更簡潔，如果有興趣可以看看官方文件或是參考 jigsawye 翻譯的 JavaScript Functional Programming 指南