Lodash 教程 · ZetCode 中文系列教程

# Lodash 教程 > 原文： [http://zetcode.com/javascript/lodash/](http://zetcode.com/javascript/lodash/) Lodash 教程涵蓋了 Lodash JavaScript 庫。在這個 Lodash 入門教程中，我們在多個示例中介紹 Lodash 函數。 ## Lodash Lodash 是一個 JavaScript 庫，為常見的編程任務提供工具函數。它使用函數式編程范例。 Lodash 受`Underscore.js`的啟發。 Lodash 幫助程序員編寫更簡潔，更易于維護的 JavaScript 代碼。 Lodash 包含一些工具，可簡化使用字符串，數字，數組，函數和對象的編程。按照慣例，Lodash 模塊被映射到下劃線字符。 ## Lodash 安裝首先，我們安裝 Lodash 庫。 ```js $ npm init $ npm i lodash ``` Lodash 庫與`npm`一起本地安裝。 ```js $ cat package.json { "name": "lodash-lib", "version": "1.0.0", "description": "", "main": "lo_sample.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "lodash": "^4.17.11" } } ``` 我們使用 Lodash 版本 4.17.11。 ```js <script src="lodash.js"></script> ``` 在瀏覽器內部，我們將庫包含在`<script>`標簽中。 ## Lodash 版本在第一個示例中，我們確定 Lodash 庫的版本。 `version.js` ```js const _ = require("lodash") const ver = _.VERSION console.log(ver); ``` 該示例打印 Lodash 庫的版本。 ```js const _ = require("lodash") ``` 按照慣例，Lodash 庫被映射到下劃線字符。 ```js const ver = _.VERSION console.log(ver); ``` 版本存儲在`VERSION`變量中。 ```js $ node version.js 4.17.11 ``` 我們使用 Lodash 版本 4.17.5。 ## Lodash 第一個和最后一個數組元素 `_.first()` / `_.head()`函數返回第一個數組元素； `_.last()`函數返回最后一個數組元素。 `first_last.js` ```js const _ = require("lodash") words = ['sky', 'wood', 'forest', 'falcon', 'pear', 'ocean', 'universe']; let fel = _.first(words); let lel = _.last(words); console.log(`First element: ${fel}`); console.log(`Last element: ${lel}`); ``` 該示例輸出單詞數組的第一個和最后一個元素。 ```js $ node first_last.js First element: sky Last element: universe ``` 這是輸出。 ## Lodash 分塊數組 `_.chunk()`函數創建一個元素數組，將指定長度的元素分成幾組。 `chunking.js` ```js const _ = require("lodash") nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let c1 = _.chunk(nums, 2); console.log(c1); let c2 = _.chunk(nums, 3); console.log(c2); ``` 該示例將`nums`數組分為兩個和三個元素子數組的數組。 ```js $ node chunking.js [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9 ] ] [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ] ``` 這是輸出。 ## 獲取數組切片 `_.slice()`方法從數組獲取切片。它有兩個索引：開始索引和結束索引，其中開始索引是包含端點的，結束索引是互斥的。 `slice_fun.js` ```js const _ = require("lodash") nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let c1 = _.slice(nums, 2, 6); console.log(c1); let c2 = _.slice(nums, 0, 8); console.log(c2); ``` 該示例從`nums`數組創建兩個切片。 ```js $ node slice_fun.js [ 3, 4, 5, 6 ] [ 1, 2, 3, 4, 5, 6, 7, 8 ] ``` 這是輸出。 ## Lodash 隨機數 `_.random()`函數在上下限之間產生隨機值。 `random_vals.js` ```js const _ = require("lodash") var r = _.random(10); console.log(r); r = _.random(5, 10); console.log(r); ``` 該示例打印兩個隨機值。 ```js var r = _.random(10); ``` 我們產生 0 到 10 之間的隨機值。 ```js r = _.random(5, 10); ``` 在這里，我們產生 5 到 10 之間的隨機值。 ## Lodash 隨機數組元素使用`_.sample()`函數，我們可以從數組中選擇隨機元素。 `sample_fun.js` ```js const _ = require("lodash") words = ['sky', 'wood', 'forest', 'falcon', 'pear', 'ocean', 'universe']; let word = _.sample(words); console.log(word); ``` 該示例使用`_.sample()`從數組中選擇一個隨機單詞。 ```js $ node sample_fun.js falcon ``` 這是一個示例輸出。 ## Lodash 改組數組元素 `_.shuffle()`函數可對集合進行混洗。 `shuffle_fun.js` ```js const _ = require("lodash") words = ['sky', 'wood', 'forest', 'falcon', 'pear', 'ocean', 'universe']; console.log(_.shuffle(words)); console.log(_.shuffle(words)); console.log(_.shuffle(words)); console.log(words); ``` 該示例從初始單詞數組創建三個新的隨機重組的數組。 ```js $ node shuffle_fun.js [ 'sky', 'ocean', 'universe', 'falcon', 'pear', 'wood', 'forest' ] [ 'wood', 'ocean', 'falcon', 'forest', 'sky', 'universe', 'pear' ] [ 'forest', 'ocean', 'sky', 'wood', 'falcon', 'universe', 'pear' ] [ 'sky', 'wood', 'forest', 'falcon', 'pear', 'ocean', 'universe' ] ``` 這是輸出。原始數組未修改； `_.shuffle()`函數創建一個新數組。 ## Lodash `_.times`函數 `_.times()`執行該函數 n 次。 `times_fun.js` ```js const _ = require("lodash"); _.times(4, () => { console.log("brave"); }) ``` 在示例中，我們執行了內部函數四次。該函數將單詞打印到控制臺。 ```js $ node times_fun.js brave brave brave brave ``` 這是輸出。 ## Lodash `_.delay`函數 `_.delay()`函數將函數的執行延遲指定的毫秒數。 `delay_fun.js` ```js const _ = require("lodash") function message() { console.log("Some message"); } _.delay(message, 150); console.log("Some other message"); ``` 該示例輸出兩個消息。第一個延遲 150ms。 ```js $ node delay_fun.js Some other message Some message ``` 這是輸出。 ## Lodash 確定數據類型 Lodash 包含確定值的數據類型的函數。 `datatype.js` ```js const _ = require("lodash"); const vals = [1, 2, 'good', [1, 2], {name: 'Peter', age: 32}]; vals.forEach( (e) => { if (_.isNumber(e)) { console.log(`${e} is a number`); } if (_.isString(e)) { console.log(JSON.stringify(e) + ' is a string'); } if (_.isArray(e)) { console.log(JSON.stringify(e) + ' is an array'); } if (_.isObject(e)) { console.log(JSON.stringify(e) + ' is an object'); } }); ``` 在示例中，我們確定數組元素的數據類型。 ```js const vals = [1, 2, 'good', [1, 2], {name: 'Peter', age: 32}]; ``` 我們有一個值數組，包括數字，字符串，數組和對象。 ```js if (_.isNumber(e)) { console.log(`${e} is a number`); } ``` `_.isNumber()`函數檢查值是否為數字。 ```js if (_.isString(e)) { console.log(JSON.stringify(e) + ' is a string'); } ``` `_.isString()`函數檢查值是否為字符串。 ```js if (_.isArray(e)) { console.log(JSON.stringify(e) + ' is an array'); } ``` `_.isArray()`函數檢查值是否為數組。 ```js if (_.isObject(e)) { console.log(JSON.stringify(e) + ' is an object'); } ``` `_.isObject()`函數檢查值是否為對象。 ```js $ node index.js 1 is a number 2 is a number "good" is a string [1,2] is an array [1,2] is an object {"name":"Peter","age":32} is an object ``` 這是程序的輸出。 ## Lodash `_.range`函數 Lodash `_.range()`函數創建一個數字數組。該函數接受`start`，`end`和`step`參數。 `range_fun.js` ```js const _ = require("lodash"); const vals = _.range(10); console.log(vals); const vals2 = _.range(0, 15); console.log(vals2); const vals3 = _.range(0, 15, 5); console.log(vals3); ``` 在代碼示例中，我們創建了三個值范圍。 ```js const vals = _.range(10); ``` 該行創建一個值`0..9`的數組。 `end`值是必需的，`start`和`step`是可選的。 `end`不包含在內；因此，不包括值 10。 ```js const vals2 = _.range(0, 15); ``` 在這里，我們指定`start`和`step`參數。我們創建一個值數組`0..14`。 ```js const vals3 = _.range(0, 15, 5); ``` 最后，我們提供所有三個參數。將創建一個包含 0、5 和 10 個值的數組。 ```js $ node range_fun.js [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ] [ 0, 5, 10 ] ``` 這是輸出。 ## Lodash 最大值和最小值 Lodash 允許計算數組的最大值和最小值。 `min_max.js` ```js const _ = require("lodash"); const vals = [-3, 4, 0, 12, 43, 9, -12]; var min = _.min(vals); console.log(min); var max = _.max(vals); console.log(max); max = _.max(_.range(5, 25)); console.log(max); const obs = [{n: 12}, {n: -4}, {n: 4}, {n: -11}]; min = _.minBy(obs, 'n'); console.log(min); max = _.maxBy(obs, 'n'); console.log(max); ``` 該示例計算數組的最小值和最大值。 ```js var min = _.min(vals); console.log(min); ``` `_.min()`函數返回數組的最小值。 ```js var max = _.max(vals); console.log(max); ``` `._max()`函數返回數組的最大值。 ```js min = _.minBy(obs, 'n'); console.log(min); max = _.maxBy(obs, 'n'); console.log(max); ``` 要計算對象屬性的最小和最大值，我們使用`_.minBy()`和`.maxBy()`函數。 ```js $ node min_max.js -12 43 24 { n: -11 } { n: 12 } ``` 這是輸出。 ## Lodash `_.sum`函數 `_.sum()`函數計算數組值的總和。 `sum_fun.js` ```js const _ = require("lodash"); const vals = [-2, 0, 3, 7, -5, 1, 2]; const sum = _.sum(vals); console.log(sum); ``` 在代碼示例中，我們計算并打印數組值的總和。 ```js $ node sum_fun.js 6 ``` 這是輸出。 ## Lodash 集合過濾器 `_.filter()`函數返回其謂詞函數返回`true`的元素數組。 `col_filter.js` ```js const _ = require("lodash"); const nums = [4, -5, 3, 2, -1, 7, -6, 8, 9]; const pos_nums = _.filter(nums, (e) => e > 0); console.log(pos_nums); ``` 在代碼示例中，我們過濾掉數組的正值。 ```js const pos_nums = _.filter(nums, (e) => e > 0); ``` 謂詞是一個返回布爾值的函數。在我們的例子中，我們有一個匿名函數，該函數對于大于 0 的值返回`true`。 ```js $ node col_filter.js [ 4, 3, 2, 7, 8, 9 ] ``` 這是輸出。 ## Lodash 集合分區分區操作將原始集合拆分為一對數組。第一個數組包含其指定謂詞產生`true`的元素，而第二個列表包含其謂詞產生`false`的元素。 `col_partition.js` ```js const _ = require("lodash"); const nums = [4, -5, 3, 2, -1, 7, -6, 8, 9]; const [nums2, nums3] = _.partition(nums, (e) => e < 0); console.log(nums2); console.log(nums3); ``` 使用`_.partition()`函數，我們將數組分為兩個數組；第一個包含正值，第二個包含負值。 ```js const [nums2, nums3] = _.partition(nums, (e) => e < 0); ``` `_.partition()`函數根據謂詞函數創建兩個數組。通過數組解構操作，我們將創建的數組分配給兩個變量：`nums2`和`nums3`。 ```js $ node col_partition.js [ -5, -1, -6 ] [ 4, 3, 2, 7, 8, 9 ] ``` 這是輸出。 ## Lodash 集合歸約歸約是將列表值聚合為單個值的終端操作。 `_.reduce()`函數對累加器和數組中的每個元素（從左到右）應用一個函數，以將其減小為單個值。 `col_reduce.js` ```js const _ = require("lodash"); const nums = [4, 5, 3, 2, 1, 7, 6, 8, 9]; const sum = _.reduce(nums, (total, next) => { return total + next }); console.log(sum); const colours = ["red", "green", "white", "blue", "black"]; const res = _.reduceRight(colours, (next, total) => { return `${total}-${next}` }); console.log(res); ``` 在示例中，我們對整數和字符串列表使用歸約操作。 ```js const sum = _.reduce(nums, (total, next) => { return total + next }); console.log(sum); ``` 我們計算值的總和。 `total`是累加器，`next`是列表中的下一個值。 ```js const res = _.reduceRight(colours, (next, total) => { return `${total}-${next}` }); ``` `_.reduceRight()`累加一個從最后一個元素開始的值，并將從右到左的操作應用于每個元素和當前累加器值。 ```js $ node col_reduce.js 45 red-green-white-blue-black ``` 這是輸出。 ## Lodash 字符串大小寫 Locash 庫包含幾個針對單詞大小寫的函數。 `string_case.js` ```js const _ = require("lodash"); const words = ["sky", "Sun", "Blue Island"]; console.log(_.map(words, _.camelCase)); console.log(_.map(words, _.capitalize)); console.log(_.map(words, _.kebabCase)); console.log(_.map(words, _.lowerCase)); console.log(_.map(words, _.upperCase)); ``` 在示例中，我們用`_.camelCase()`，`_.capitalize()`，`._kebabCase()`，`_lowerCase()`和`_.upperCase()`修改單詞的大小寫。 ```js $ node string_case.js [ 'sky', 'sun', 'blueIsland' ] [ 'Sky', 'Sun', 'Blue island' ] [ 'sky', 'sun', 'blue-island' ] [ 'sky', 'sun', 'blue island' ] [ 'SKY', 'SUN', 'BLUE ISLAND' ] ``` 這是輸出。 ## Lodash 字符串`_.startsWith`和`_.endsWith` `_.startsWith()`函數確定字符串是否以指定的字符串開頭。 `_.endsWith()`函數確定字符串是否以指定的字符串結尾。 `string_startend.js` ```js const _ = require("lodash"); const words = ["tank", "boy", "tourist", "ten", "pen", "car", "marble", "sonnet", "pleasant", "ink", "atom"] console.log("Starting with 't'"); words.forEach( e => { if (_.startsWith(e, 't')) { console.log(e); } }); console.log("Ending with 'k'"); words.forEach( e => { if (_.endsWith(e, 'k')) { console.log(e); } }); ``` 在示例中，我們打印以`"t"`開頭和以`"k"`結尾的單詞。 ```js $ nodejs string_startend.js Starting with 't' tank tourist ten Ending with 'k' tank ink ``` 這是輸出。 ## Lodash 字符串填充如果字符串小于指定的數字，則可以用字符填充字符串。 `string_pad.js` ```js const _ = require("lodash"); const nums = [657, 122, 3245, 345, 99, 18]; nums.forEach( e => { console.log(_.padStart(e.toString(), 20, '.')); }); ``` 該示例使用`_.padStart()`將數字用點字符填充。 ```js $ node string_pad.js .................657 .................122 ................3245 .................345 ..................99 ..................18 ``` 這是輸出。 ## Lodash 對象鍵和值 `_.keys()`函數返回 JavaScript 對象的屬性名稱的數組，`_.values()`函數返回其值的數組。 `keys_values.js` ```js const _ = require("lodash"); const p = {age: 24, name: "Rebecca", occupation: "teacher"}; const keys = _.keys(p); console.log(keys); const values = _.values(p); console.log(values); ``` 在示例中，我們打印人員對象的鍵和值。 ```js $ node keys_values.js [ 'age', 'name', 'occupation' ] [ 24, 'Rebecca', 'teacher' ] ``` 這是輸出。 ## Lodash 迭代對象屬性 `_.forIn()`函數可用于遍歷對象屬性。 `iter_object_props.js` ```js const _ = require("lodash"); const p = {age: 24, name: "Rebecca", occupation: "teacher"}; _.forIn(p, (value, key) => { console.log(`${key}: ${value}`); }) ``` 在示例中，我們使用`_.forIn()`遍歷人員對象的屬性。 ```js $ node iter_object_props.js age: 24 name: Rebecca occupation: teacher ``` 這是輸出。在本教程中，我們介紹了 Lodash JavaScript 庫。您可能也對以下相關教程感興趣： [Ramda 教程](/javascript/ramda/)， [Collect.js 教程](/javascript/collectjs/)， [JSON 服務器教程](/javascript/jsonserver/)， [Moment.js 教程](/javascript/momentjs/)，[從 JavaScript 中的 URL 讀取 JSON](/articles/javascriptjsonurl/) ， [JavaScript 貪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [jQuery 自動完成教程](/articles/jqueryautocomplete/)或[使用 jQuery `DatePicker`](/articles/jquerydatepicker/) 。