Lodash 教程

原文： http://zetcode.com/javascript/lodash/

Lodash 教程涵盖了 Lodash JavaScript 库。 在这个 Lodash 入门教程中，我们在多个示例中介绍 Lodash 函数。

Lodash

Lodash 是一个 JavaScript 库，为常见的编程任务提供工具函数。 它使用函数式编程范例。 Lodash 受Underscore.js的启发。

Lodash 帮助程序员编写更简洁，更易于维护的 JavaScript 代码。 Lodash 包含一些工具，可简化使用字符串，数字，数组，函数和对象的编程。

按照惯例，Lodash 模块被映射到下划线字符。

Lodash 安装

首先，我们安装 Lodash 库。

$ npm init
$ npm i lodash

Lodash 库与npm一起本地安装。

$ 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。

<script src="lodash.js"></script>    

在浏览器内部，我们将库包含在<script>标签中。

Lodash 版本

在第一个示例中，我们确定 Lodash 库的版本。

version.js

const _ = require("lodash")

const ver = _.VERSION
console.log(ver);    

该示例打印 Lodash 库的版本。

const _ = require("lodash")

按照惯例，Lodash 库被映射到下划线字符。

const ver = _.VERSION
console.log(ver);    

版本存储在VERSION变量中。

$ node version.js 
4.17.11

我们使用 Lodash 版本 4.17.5。

Lodash 第一个和最后一个数组元素

_.first() / _.head()函数返回第一个数组元素； _.last()函数返回最后一个数组元素。

first_last.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}`);

该示例输出单词数组的第一个和最后一个元素。

$ node first_last.js
First element: sky
Last element: universe

这是输出。

Lodash 分块数组

_.chunk()函数创建一个元素数组，将指定长度的元素分成几组。

chunking.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数组分为两个和三个元素子数组的数组。

$ 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

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数组创建两个切片。

$ node slice_fun.js
[ 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 6, 7, 8 ]

这是输出。

Lodash 随机数

_.random()函数在上下限之间产生随机值。

random_vals.js

const _ = require("lodash")

var r = _.random(10);
console.log(r);

r = _.random(5, 10);
console.log(r);

该示例打印两个随机值。

var r = _.random(10);

我们产生 0 到 10 之间的随机值。

r = _.random(5, 10);

在这里，我们产生 5 到 10 之间的随机值。

Lodash 随机数组元素

使用_.sample()函数，我们可以从数组中选择随机元素。

sample_fun.js

const _ = require("lodash")

words = ['sky', 'wood', 'forest', 'falcon', 
    'pear', 'ocean', 'universe'];

let word = _.sample(words);
console.log(word);

该示例使用_.sample()从数组中选择一个随机单词。

$ node sample_fun.js
falcon

这是一个示例输出。

Lodash 改组数组元素

_.shuffle()函数可对集合进行混洗。

shuffle_fun.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);

该示例从初始单词数组创建三个新的随机重组的数组。

$ 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

const _ = require("lodash");

_.times(4, () => {

    console.log("brave");
})

在示例中，我们执行了内部函数四次。 该函数将单词打印到控制台。

$ node times_fun.js 
brave
brave
brave
brave

这是输出。

Lodash _.delay函数

_.delay()函数将函数的执行延迟指定的毫秒数。

delay_fun.js

const _ = require("lodash")

function message()
{
    console.log("Some message");
}

_.delay(message, 150);
console.log("Some other message");

该示例输出两个消息。 第一个延迟 150ms。

$ node delay_fun.js
Some other message
Some message

这是输出。

Lodash 确定数据类型

Lodash 包含确定值的数据类型的函数。

datatype.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');
    }

});

在示例中，我们确定数组元素的数据类型。

const 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 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

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

在代码示例中，我们创建了三个值范围。

const vals = _.range(10);

该行创建一个值0..9的数组。 end值是必需的，start和step是可选的。 end不包含在内； 因此，不包括值 10。

const vals2 = _.range(0, 15);

在这里，我们指定start和step参数。 我们创建一个值数组0..14。

const vals3 = _.range(0, 15, 5);

最后，我们提供所有三个参数。 将创建一个包含 0、5 和 10 个值的数组。

$ 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

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

该示例计算数组的最小值和最大值。

var min = _.min(vals);
console.log(min);

_.min()函数返回数组的最小值。

var max = _.max(vals);
console.log(max);    

._max()函数返回数组的最大值。

min = _.minBy(obs, 'n');
console.log(min);

max = _.maxBy(obs, 'n');
console.log(max);    

要计算对象属性的最小和最大值，我们使用_.minBy()和.maxBy()函数。

$ node min_max.js 
-12
43
24
{ n: -11 }
{ n: 12 }

这是输出。

Lodash _.sum函数

_.sum()函数计算数组值的总和。

sum_fun.js

const _ = require("lodash");

const vals = [-2, 0, 3, 7, -5, 1, 2];

const sum = _.sum(vals);
console.log(sum);

在代码示例中，我们计算并打印数组值的总和。

$ node sum_fun.js 
6

这是输出。

Lodash 集合过滤器

_.filter()函数返回其谓词函数返回true的元素数组。

col_filter.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);

在代码示例中，我们过滤掉数组的正值。

const pos_nums = _.filter(nums, (e) => e > 0);

谓词是一个返回布尔值的函数。 在我们的例子中，我们有一个匿名函数，该函数对于大于 0 的值返回true。

$ node col_filter.js 
[ 4, 3, 2, 7, 8, 9 ]

这是输出。

Lodash 集合分区

分区操作将原始集合拆分为一对数组。 第一个数组包含其指定谓词产生true的元素，而第二个列表包含其谓词产生false的元素。

col_partition.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()函数，我们将数组分为两个数组； 第一个包含正值，第二个包含负值。

const [nums2, nums3] = _.partition(nums, (e) => e < 0);

_.partition()函数根据谓词函数创建两个数组。 通过数组解构操作，我们将创建的数组分配给两个变量：nums2和nums3。

$ node col_partition.js 
[ -5, -1, -6 ]
[ 4, 3, 2, 7, 8, 9 ]

这是输出。

Lodash 集合归约

归约是将列表值聚合为单个值的终端操作。 _.reduce()函数对累加器和数组中的每个元素（从左到右）应用一个函数，以将其减小为单个值。

col_reduce.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);

在示例中，我们对整数和字符串列表使用归约操作。

const sum = _.reduce(nums, (total, next) => { return total + next });
console.log(sum);

我们计算值的总和。 total是累加器，next是列表中的下一个值。

const res = _.reduceRight(colours, (next, total) => { return `${total}-${next}` });

_.reduceRight()累加一个从最后一个元素开始的值，并将从右到左的操作应用于每个元素和当前累加器值。

$ node col_reduce.js 
45
red-green-white-blue-black

这是输出。

Lodash 字符串大小写

Locash 库包含几个针对单词大小写的函数。

string_case.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()修改单词的大小写。

$ 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

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"结尾的单词。

$ nodejs string_startend.js 
Starting with 't'
tank
tourist
ten
Ending with 'k'
tank
ink

这是输出。

Lodash 字符串填充

如果字符串小于指定的数字，则可以用字符填充字符串。

string_pad.js

const _ = require("lodash");

const nums = [657, 122, 3245, 345, 99, 18];

nums.forEach( e => {

    console.log(_.padStart(e.toString(), 20, '.'));
});

该示例使用_.padStart()将数字用点字符填充。

$ node string_pad.js 
.................657
.................122
................3245
.................345
..................99
..................18

这是输出。

Lodash 对象键和值

_.keys()函数返回 JavaScript 对象的属性名称的数组，_.values()函数返回其值的数组。

keys_values.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);

在示例中，我们打印人员对象的键和值。

$ node keys_values.js 
[ 'age', 'name', 'occupation' ]
[ 24, 'Rebecca', 'teacher' ]

这是输出。

Lodash 迭代对象属性

_.forIn()函数可用于遍历对象属性。

iter_object_props.js

const _ = require("lodash");

const p = {age: 24, name: "Rebecca", occupation: "teacher"};

_.forIn(p, (value, key) => {

    console.log(`${key}: ${value}`);
})

在示例中，我们使用_.forIn()遍历人员对象的属性。

$ node iter_object_props.js 
age: 24
name: Rebecca
occupation: teacher

这是输出。

在本教程中，我们介绍了 Lodash JavaScript 库。

您可能也对以下相关教程感兴趣： Ramda 教程， Collect.js 教程， JSON 服务器教程， Moment.js 教程，从 JavaScript 中的 URL 读取 JSON ， JavaScript 贪食蛇教程， JQuery 教程， jQuery 自动完成教程或使用 jQuery DatePicker 。

---

我们一直在努力

apachecn/AiLearning

---