Lodash 教程
最后修改于 2023 年 10 月 18 日
Lodash 教程涵盖了 Lodash JavaScript 库。在本入门 Lodash 教程中,我们通过多个示例介绍了 Lodash 函数。
Lodash
Lodash 是一个 JavaScript 库,它为常见的编程任务提供了实用函数。它使用函数式编程范式。Lodash 的灵感来自于 Underscore.js
。
Lodash 帮助程序员编写更简洁、更易于维护的 JavaScript 代码。Lodash 包含简化字符串、数字、数组、函数和对象编程的工具。
按照惯例,Lodash 模块映射到下划线字符。
Lodash 安装
首先,我们安装 Lodash 库。
$ npm init -y
$ npm i lodash
Lodash 库使用 npm
在本地安装。
Lodash 版本
在第一个例子中,我们确定 Lodash 库的版本。
main.js
const _ = require("lodash");
const ver = _.VERSION;
console.log(ver);
该示例打印 Lodash 库的版本。
const _ = require("lodash");
按照惯例,Lodash 库映射到下划线字符。
const ver = _.VERSION;
console.log(ver);
版本存储在 VERSION
变量中。
$ node main.js
4.17.21
我们使用 Lodash 版本 4.17.21。
Lodash 数组的第一个和最后一个元素
_.first
/_.head
函数返回第一个数组元素;_.last
函数返回最后一个数组元素。
main.js
const _ = require("lodash");
let 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}`);
该示例输出一个单词数组的第一个和最后一个元素。
$ node main.js
First element: sky
Last element: universe
Lodash 数组的第 n 个元素
_.nth
函数获取数组中索引 n 处的元素。如果 n 为负数,则返回倒数第 n 个元素。
main.js
const _ = require("lodash");
let nums = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(_.nth(nums, 3));
console.log(_.nth(nums, -3));
在示例中,我们从开头和结尾获取第四个元素。索引从零开始。
$ node main.js
4
6
Lodash 数组分块
_.chunk
函数创建一个由元素组成的数组,这些元素被分成指定大小的组。
main.js
const _ = require("lodash");
let 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
数组分块成两个和三个元素的子数组组成的数组。
$ node main.js
[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9 ] ]
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
获取数组切片
_.slice
方法从数组中获取一个切片。它需要两个索引:起始索引和结束索引,其中起始索引是包含的,结束索引是排除的。
main.js
const _ = require("lodash");
let 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
数组创建两个切片。
$ node main.js
[ 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 6, 7, 8 ]
Lodash 随机数
_.random
函数生成介于包含的下限和上限之间的随机值。
main.js
const _ = require("lodash");
let r = _.random(10);
console.log(r);
r = _.random(5, 10);
console.log(r);
该示例打印两个随机值。
let r = _.random(10);
我们生成一个介于 0 和 10 之间的随机值。
r = _.random(5, 10);
这里我们生成一个介于 5 和 10 之间的随机值。
Lodash 随机数组元素
使用 _.sample
函数,我们可以从数组中选择一个随机元素。
main.js
const _ = require("lodash");
let words = ['sky', 'wood', 'forest', 'falcon',
'pear', 'ocean', 'universe'];
let word = _.sample(words);
console.log(word);
该示例使用 _.sample
从数组中选择一个随机单词。
$ node main.js
falcon
Lodash 数组元素洗牌
_.shuffle
函数对一个集合进行洗牌。
main.js
const _ = require("lodash");
let words = ['sky', 'wood', 'forest', 'falcon',
'pear', 'ocean', 'universe'];
console.log(_.shuffle(words));
console.log(_.shuffle(words));
console.log(_.shuffle(words));
console.log(words);
该示例从一个初始的单词数组中创建了三个新的随机重新组织的数组。
$ node main.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 次。
main.js
const _ = require("lodash");
_.times(4, () => {
console.log("brave");
})
在示例中,我们执行内部函数四次。该函数将一个单词打印到控制台。
$ node main.js
brave
brave
brave
brave
Lodash _.delay 函数
_.delay
函数将函数的执行延迟指定的毫秒数。
main.js
const _ = require("lodash");
function message()
{
console.log("Some message");
}
_.delay(message, 150);
console.log("Some other message");
该示例输出两条消息。第一条消息延迟 150 毫秒。
$ node main.js
Some other message
Some message
Lodash 确定数据类型
Lodash 包含确定值的数据类型的函数。
main.js
const _ = require("lodash");
let 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');
}
});
在示例中,我们确定数组元素的的数据类型。
let vals = [1, 2, 'good', [1, 2], {name: 'Peter', age: 32}];
我们有一个值的数组,包括数字、字符串、数组和对象。
if (_.isNumber(e)) {
console.log(`${e} is a number`);
}
_.isNumber
函数检查一个值是否是数字。
if (_.isString(e)) {
console.log(JSON.stringify(e) + ' is a string');
}
_.isString
函数检查一个值是否是字符串。
if (_.isArray(e)) {
console.log(JSON.stringify(e) + ' is an array');
}
_.isArray
函数检查一个值是否是数组。
if (_.isObject(e)) {
console.log(JSON.stringify(e) + ' is an object');
}
_.isObject
函数检查一个值是否是对象。
$ node main.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
参数。
main.js
const _ = require("lodash");
let vals = _.range(10);
console.log(vals);
let vals2 = _.range(0, 15);
console.log(vals2);
let vals3 = _.range(0, 15, 5);
console.log(vals3);
在代码示例中,我们创建了三个值范围。
let vals = _.range(10);
此行创建了一个值范围 0..9 的数组。end
值是必需的,start
和 step
是可选的。end
是非包含的;因此,不包含值 10。
let vals2 = _.range(0, 15);
这里我们指定 start
和 step
参数。我们创建了一个值范围 0..14 的数组。
let vals3 = _.range(0, 15, 5);
最后,我们提供所有三个参数。创建了一个包含 0、5 和 10 值的数组。
$ node main.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 允许计算数组的最大值和最小值。
main.js
const _ = require("lodash");
let vals = [-3, 4, 0, 12, 43, 9, -12];
let min = _.min(vals);
console.log(min);
let max = _.max(vals);
console.log(max);
max = _.max(_.range(5, 25));
console.log(max);
let obs = [{n: 12}, {n: -4}, {n: 4}, {n: -11}];
min = _.minBy(obs, 'n');
console.log(min);
max = _.maxBy(obs, 'n');
console.log(max);
该示例计算数组的最小值和最大值。
let min = _.min(vals);
console.log(min);
_.min
函数返回数组的最小值。
let max = _.max(vals);
console.log(max);
._max
函数返回数组的最大值。
min = _.minBy(obs, 'n');
console.log(min);
max = _.maxBy(obs, 'n');
console.log(max);
要计算对象属性的最小值和最大值,我们使用 _.minBy
和 .maxBy
函数。
$ node main.js
-12
43
24
{ n: -11 }
{ n: 12 }
Lodash _.sum 函数
_.sum
函数计算数组值的总和。
main.js
const _ = require("lodash");
let vals = [-2, 0, 3, 7, -5, 1, 2];
let sum = _.sum(vals);
console.log(sum);
在代码示例中,我们计算并打印数组值的总和。
$ node main.js
6
Lodash _.curry
柯里化是将具有多个参数的函数转换为具有单个参数的嵌套函数序列的变换。柯里化允许执行函数专业化和组合。在 JavaScript 柯里化教程中了解更多关于柯里化的信息。
_.curry
函数将一个普通函数转换为一个柯里化函数。
main.js
const _ = require("lodash");
function multiply(a, b, c) {
return a * b * c;
}
let curried = _.curry(multiply);
let ret = curried(2)(3)(4);
console.log(ret);
在示例中,我们将 multiply 函数转换为柯里化版本。
$ node main.js
24
Lodash 集合过滤
_.filter
函数返回一个元素的数组,对于这些元素,谓词函数返回 true。
main.js
const _ = require("lodash");
let nums = [4, -5, 3, 2, -1, 7, -6, 8, 9];
let pos_nums = _.filter(nums, (e) => e > 0);
console.log(pos_nums);
在代码示例中,我们过滤掉数组的正值。
let pos_nums = _.filter(nums, (e) => e > 0);
谓词是一个返回布尔值的函数。在我们的例子中,我们有一个匿名函数,它对大于 0 的值返回 true。
$ node main.js
[ 4, 3, 2, 7, 8, 9 ]
Lodash 集合查找
_.find
函数迭代一个集合的元素,并返回谓词返回 true 的第一个元素。同样,_.findLast
返回最后一个元素。
main.js
const _ = require("lodash");
let users = [
{ name: 'John', age: 25 },
{ name: 'Lenny', age: 51 },
{ name: 'Andrew', age: 43 },
{ name: 'Peter', age: 81 },
{ name: 'Anna', age: 43 },
{ name: 'Albert', age: 76 },
{ name: 'Adam', age: 47 },
{ name: 'Robert', age: 72 }
];
let u1 = _.find(users, {name: 'Adam'});
console.log(u1);
let u2 = _.find(users, (u) => { return u.age > 60 });
console.log(u2);
let u3 = _.findLast(users, (u) => { return u.age > 60 });
console.log(u3);
在示例中,我们找到名字是 Adam 的用户。然后我们找到第一个和最后一个年龄大于 60 岁的用户。
$ node main.js
{ name: 'Adam', age: 47 }
{ name: 'Peter', age: 81 }
{ name: 'Robert', age: 72 }
Lodash 集合拉取
_.pull
函数从数组中删除所有给定的值。
main.js
const _ = require("lodash");
let nums = [1, 2, 3, 1, 2, 2, 4, 5, 7, 8];
_.pull(nums, 1, 2);
console.log(nums);
在示例中,我们有一个数字数组。我们从数组中删除所有数字 1 和 2。
$ node main.js
[ 3, 4, 5, 7, 8 ]
Lodash 集合获取
_.take
函数创建一个数组的切片,其中包含从开头取的 n 个元素。_.takeRight
函数创建一个数组的切片,其中包含从结尾取的 n 个元素。
main.js
const _ = require("lodash");
let nums = [1, 2, 3, 4, 5, 6];
let nums2 = _.take(nums);
let nums3 = _.take(nums, 2);
let nums4 = _.takeRight(nums, 3)
console.log(nums2);
console.log(nums3);
console.log(nums4);
这些函数从整数数组中获取一些值并创建新数组。第二个可选参数指定要获取的值的数量。
$ node main.js
[ 1 ]
[ 1, 2 ]
[ 4, 5, 6 ]
Lodash 集合 takeWhile
_.takeWhile
函数创建一个数组的切片,其中包含从开头取的元素。元素被获取,直到给定的谓词返回 false。类似地,_.takeRightWhile
函数从结尾获取元素。
main.js
const _ = require("lodash");
let nums = [1, -2, 3, 4, -5, 6, 7, -8, -9]
let nums2 = _.takeWhile(nums, (n) => { return n < 0 });
let nums3 = _.takeRightWhile(nums, (n) => { return n < 0 });
console.log(nums2);
console.log(nums3);
在示例中,谓词对负值返回 true。
$ node main.js
[]
[ -8, -9 ]
Lodash 集合分区
分区操作将原始集合分成一对数组。第一个数组包含指定谓词产生 true 的元素,而第二个列表包含谓词产生 false 的元素。
main.js
const _ = require("lodash");
let nums = [4, -5, 3, 2, -1, 7, -6, 8, 9];
let [nums2, nums3] = _.partition(nums, (e) => e < 0);
console.log(nums2);
console.log(nums3);
使用 _.partition
函数,我们将数组分成两个数组;第一个包含正值,第二个包含负值。
let [nums2, nums3] = _.partition(nums, (e) => e < 0);
_.partition
函数根据谓词函数创建两个数组。使用数组解构操作,我们将创建的数组分配给两个变量:nums2
和 nums3
。
$ node main.js
[ -5, -1, -6 ]
[ 4, 3, 2, 7, 8, 9 ]
Lodash 集合归约
归约是一个终端操作,它将列表值聚合为单个值。_.reduce
函数对累加器和数组中的每个元素(从左到右)应用一个函数,以将其归约为单个值。正在应用的函数称为 *reducer* 函数。
注意:归约操作非常强大。它们可用于计算总和、乘积、平均值、最大值和最小值、排序、反转、展平数组等等。
有关归约的更深入的介绍,请阅读 JavaScript 归约教程。
main.js
const _ = require("lodash");
let nums = [4, 5, 3, 2, 1, 7, 6, 8, 9];
let sum = _.reduce(nums, (total, next) => { return total + next });
console.log(sum);
let colours = ["red", "green", "white", "blue", "black"];
let res = _.reduceRight(colours, (next, total) => { return `${total}-${next}` });
console.log(res);
在示例中,我们在整数和字符串列表上使用归约操作。
let sum = _.reduce(nums, (total, next) => { return total + next });
console.log(sum);
我们计算值的总和。total
是累加器,next
是列表中的下一个值。
let res = _.reduceRight(colours, (next, total) => { return `${total}-${next}` });
_.reduceRight
从最后一个元素开始累加一个值,并从右到左将操作应用于每个元素和当前的累加器值。
$ node main.js
45
red-green-white-blue-black
Lodash 归约 - 计算出现次数
reducer 函数可用于计算数组中元素的出现次数。
main.js
const _ = require("lodash");
let words = ['sky', 'forest', 'wood', 'sky', 'rock', 'cloud',
'sky', 'forest', 'rock', 'sky'];
let tally = _.reduce(words, (total, next) => {
total[next] = (total[next] || 0) + 1 ;
return total;
}, {});
console.log(tally);
单词数组中,几个单词被多次包含。初始值是一个空对象。reducer 函数要么创建一个新属性,要么增加属性的值。
$ node main.js
{ sky: 4, forest: 2, wood: 1, rock: 2, cloud: 1 }
Lodash 归约 - 按属性分组对象
以下示例按属性对数组中的对象进行分组。
main.js
const _ = require("lodash");
let users = [
{ name: 'John', age: 25, occupation: 'gardener' },
{ name: 'Lenny', age: 51, occupation: 'programmer' },
{ name: 'Andrew', age: 43, occupation: 'teacher' },
{ name: 'Peter', age: 52, occupation: 'gardener' },
{ name: 'Anna', age: 43, occupation: 'teacher' },
{ name: 'Albert', age: 46, occupation: 'programmer' },
{ name: 'Adam', age: 47, occupation: 'teacher' },
{ name: 'Robert', age: 32, occupation: 'driver' }
];
let grouped = _.reduce(users, (result, user) => {
(result[user.occupation] || (result[user.occupation] = [])).push(user);
return result;
}, {});
console.log(grouped);
我们有一个用户数组。我们按他们的职业对用户进行分组。初始值是一个空对象。结果对象将职业作为属性;每个属性包含一个具有相应职业的用户列表。
let grouped = _.reduce(users, (result, user) => {
(result[user.occupation] || (result[user.occupation] = [])).push(user);
return result;
}, {});
reducer 要么创建一个带有空数组的新属性并推送第一个用户,要么向已创建的数组添加一个新用户对象。
$ node main.js
{
gardener: [
{ name: 'John', age: 25, occupation: 'gardener' },
{ name: 'Peter', age: 52, occupation: 'gardener' }
],
programmer: [
{ name: 'Lenny', age: 51, occupation: 'programmer' },
{ name: 'Albert', age: 46, occupation: 'programmer' }
],
teacher: [
{ name: 'Andrew', age: 43, occupation: 'teacher' },
{ name: 'Anna', age: 43, occupation: 'teacher' },
{ name: 'Adam', age: 47, occupation: 'teacher' }
],
driver: [ { name: 'Robert', age: 32, occupation: 'driver' } ]
}
Lodash 字符串大小写
Locash 库包含几个用于处理单词大小写的函数。
main.js
const _ = require("lodash");
let 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
修改单词的大小写。
$ node main.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
函数确定字符串是否以指定的字符串结尾。
main.js
const _ = require("lodash");
let 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”结尾的单词。
$ nodejs string_startend.js
Starting with 't'
tank
tourist
ten
Ending with 'k'
tank
ink
Lodash 字符串填充
如果字符串短于指定的数字,则可以用字符填充。
main.js
const _ = require("lodash");
let nums = [657, 122, 3245, 345, 99, 18];
nums.forEach( e => {
console.log(_.padStart(e.toString(), 20, '.'));
});
该示例使用 _.padStart
用点字符填充数字。
$ node main.js
.................657
.................122
................3245
.................345
..................99
..................18
Lodash 字符串修剪
可以使用 _.trim
、_.trimStart
和 _.trimEnd
函数修剪字符串。要修剪的默认字符是空格。我们可以提供自己的要修剪的字符。
main.js
const _ = require("lodash");
let word = '\tfalcon\t';
let trimmed = _.trim(word);
console.log(trimmed + 'owl');
let trimmed2 = _.trimStart(word);
console.log(trimmed2 + 'owl');
let trimmed3 = _.trimEnd(word);
console.log(trimmed3 + 'owl');
在示例中,我们从一个单词中修剪空格字符。
let trimmed = _.trim(word);
_.trim
函数从两端删除空格字符。
let trimmed2 = _.trimStart(word);
_.trimStart
函数从字符串的开头删除空格字符。
let trimmed3 = _.trimEnd(word);
_.trimEnd
函数从字符串的结尾删除空格字符。
$ node main.js
falconowl
falcon owl
falconowl
main.js
const _ = require("lodash")
let words = ['_falcon', '-owl-', '_-sky-_'];
let trimmed = _.map(words, (word) => { return _.trim(word, '-_')});
console.log(trimmed);
在此示例中,我们从一个字符串数组中删除两个自定义字符。我们还使用了 _.map
函数。
$ node main.js
[ 'falcon', 'owl', 'sky' ]
Lodash 对象键和值
_.keys
函数返回 JavaScript 对象的属性名称数组,_.values
函数返回它们值的数组。
main.js
const _ = require("lodash");
let p = {age: 24, name: "Rebecca", occupation: "teacher"};
let keys = _.keys(p);
console.log(keys);
let values = _.values(p);
console.log(values);
在示例中,我们打印一个 person 对象的键和值。
$ node main.js
[ 'age', 'name', 'occupation' ]
[ 24, 'Rebecca', 'teacher' ]
Lodash 对象拾取
_.pick
函数创建一个由拾取的对象属性组成的对象。
main.js
const _ = require("lodash");
console.log(_.pick({ name: 'John', age: 25 }, 'name'));
console.log(_.pick({ name: 'John', age: 25 }, 'age'));
我们从一个简单对象中拾取属性。
$ node main.js
{ name: 'John' }
{ age: 25 }
Lodash 对象 at
_.at
函数返回给定对象路径处的值。
main.js
const _ = require("lodash");
let users = [
{ id: 1, name: 'John', about: { 'age': 25, 'colours': ['red', 'green'], } },
{ id: 2, name: 'Lenny', about: { 'age': 51, 'colours': ['blue'], } },
{ id: 3, name: 'Andy', about: { 'age': 43, 'colours': ['orange', 'steelblue'], } },
{ id: 4, name: 'Peter', about: { 'age': 52, 'colours': ['black'], } },
{ id: 5, name: 'Anna', about: { 'age': 43, 'colours': ['purple'], } },
];
let name = _.at(users[2], 'name');
console.log(name);
let colour = _.at(users[0], 'about.colours[0]');
console.log(colour);
我们有一个对象列表。我们通过指定给定属性的路径来获取值。
$ node main.js
[ 'Andrew' ]
[ 'red' ]
Lodash 对象获取和设置
_.set
函数在对象的路径处设置值。如果路径的一部分不存在,则创建它。_.get
函数在对象的路径处获取值;如果该值不存在,我们可以提供一个默认值。
main.js
const _ = require("lodash");
let data = { user: { name: "John Doe", age: 34, occupation: "gardener"} };
_.set(data, "user.age", 36);
console.log(data);
console.log(_.get(data, "user.name", "unknown"));
console.log(_.get(data, "user.marital_status", "unknown"));
在示例中,我们为用户设置了一个新的年龄,获取了他的姓名和婚姻状况。婚姻状况属性不存在,所以我们得到了默认的 unknown。
$ node main.js
{ user: { name: 'John Doe', age: 36, occupation: 'gardener' } }
John Doe
unknown
Lodash 迭代对象属性
_.forIn
函数可用于迭代对象属性。
main.js
const _ = require("lodash");
let p = {age: 24, name: "Rebecca", occupation: "teacher"};
_.forIn(p, (value, key) => {
console.log(`${key}: ${value}`);
})
在示例中,我们使用 _.forIn
迭代一个 person 对象的属性。
$ node main.js
age: 24
name: Rebecca
occupation: teacher
来源
Lodash 文档
在本文中,我们介绍了 Lodash JavaScript 库。
作者
我的名字是 Jan Bodnar,我是一位热情的程序员,拥有丰富的编程经验。自 2007 年以来,我一直在撰写编程文章。到目前为止,我撰写了 1,400 多篇文章和 8 本电子书。我拥有超过十年的编程教学经验。
查看 所有 JavaScript 教程。