【javascript】学习Lodash：让你的JS代码更具优雅和易读性

一、前言：

随着JavaScript语言的不断发展，越来越多的开发人员依赖它的强大特性和适应性来构建现代Web应用程序和网站。但是，随着代码库变得越来越大和复杂，我们可能会遇到一些处理不同数据结构的问题。这时，我们可以使用 Lodash 工具包来让我们的JS代码更加优雅和易于阅读。

Lodash 是一个很流行的JavaScript实用工具库，提供了很多有用的函数方法来简化我们的日常任务。Lodash提供了很多高效实用的函数，如lodash.map, lodash.filter，lodash.groupBy等，可以我们简单地对数组，对象，字符串等常用数据类型进行操作。

如果你还没用过Lodash，那么本文将带领你入门Lodash的一些核心概念，并展示如何使用Lodash来书写清晰、简洁的JS代码。

二、入门Lodash

Lodash可以轻松地通过npm引入并使用。如果您还没有安装Lodash，可以通过在控制台输入以下命令来完成安装：

npm install --save lodash

安装完成之后，你可以通过在JavaScript文件中使用ES6 "import"语句来引入Lodash：

import _ from 'lodash';

当然，你也可以选择直接在HTML文件的"script"标签中包含Lodash：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

了解如何引入Lodash之后，让我们通过一些示例来对Lodash进行更深入的了解。

三、Lodash中常用的API

因为lodash官方文档给出了很多的操作数据结构的方法，但是并不是每个方法都很实用，有的方法应用场景很少也很鸡肋，我这一篇文章也不可能将每一个方法都讲解到，所以我会着重挑选其中最实用，应用场景广的方法来介绍Lodash中常用的API。

1. 数组相关API

在Lodash中，数组是最常用的数据类型之一，下面是常用的API：

_.chunk(array, [size=1])

该函数将一个数组按照指定大小分割成多个数组块，并返回这些块组成的新数组。

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let chunks = _.chunk(array, 3);
console.log(chunks);
// 输出结果：
// [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]

_.compact(array)

该函数用于移除数组中的所有假值元素，返回过滤掉假值的新数组（false、null、0，""，undefined 和 NaN）。

let array = ['foo', false, 0, undefined, NaN, '', 246];
let compacted = _.compact(array);
console.log(compacted);
// 输出结果：
// [ "foo", 246 ]

_.concat(array, [values])

该函数用于创建一个新数组，将array与任何数组或值连接在一起，返回连接后的新数组，这一点和原生JS concat 方法类似，这里也简单的讲解一下：

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = [7, 8, 9];
let concatenated = _.concat(array1, array2, array3);
console.log(concatenated);
// 输出结果：
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

_.drop(array, [n=1])

该函数用于移除array的前n个元素，并返回剩余元素组成的新数组。

let array = [1, 2, 3, 4, 5, 6];
let dropped = _.drop(array, 3);
console.log(dropped);
// 输出结果：
// [4, 5, 6]

_.dropRight(array, [n=1])

该函数用于移除一个数组的后n个元素，并返回剩余元素组成的新数组。

let array = [1, 2, 3, 4, 5, 6];
let dropped = _.dropRight(array, 2);
console.log(dropped);
// 输出结果：
// [1, 2, 3, 4]

_.fill(array, value, [start=0], [end=array.length])

该函数用于使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。

let array = [1, 2, 3, 4, 5];
_.fill(array, 'a', 1, 3);
console.log(array);
// 输出结果：
// [1, 'a', 'a', 4, 5]

_.pull(array, [values])

该函数用于移除数组array中所有和给定值相等的元素：

let array = [1, 2, 3, 1, 2, 3];
const result = _.pull(array, 2, 3);
console.log(result); 
// 输出结果：
// [1, 1]

_.pullAll(array, [values])

这个方法类似_.pull，区别是这个方法接收一个要移除值的数组。

var array = [1, 2, 3, 1, 2, 3];
const result = _.pullAll(array, [2, 3]);
console.log(result); // 控制台打印结果：[1, 1]

_.pullAt(array, [indexes])

该函数用于根据索引 indexes，移除array中对应的元素，并返回被移除元素的数组。

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]

_.indexOf(array, value, [fromIndex=0])

该函数用于在一个数组中从头部开始查找指定值的位置。

let array = [1, 2, 3, 4, 5];
console.log(_.indexOf(array, 3));
// 输出结果：
// 2

_.lastIndexOf(array, value, [fromIndex=array.length-1])

该函数用于在一个数组中从尾部开始查找指定值的位置。

let array = [1, 2, 3, 4, 5, 3];
console.log(_.lastIndexOf(array, 3));
// 输出结果：
// 5

_.reverse(array)

该函数用于将一个数组中的元素倒序排列，并返回倒序后的数组。

let array = [1, 2, 3, 4, 5];
let reversed = _.reverse(array);
console.log(reversed);
// 输出结果：
// [5, 4, 3, 2, 1]

2. 对象相关API

在Lodash中，对象也是常用的数据类型之一，下面是常用的API：

_.assign(object, [sources])

该函数用于分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右，随后的下一个对象的属性会覆盖上一个对象的属性。

注意: 这方法会改变 object，参考自Object.assign.

let object = {
    
    
  name: 'John',
  age: 25,
  score: 80,
};

let source1 = {
    
     name: 'Jane' };
let source2 = {
    
     age: 28 };
_.assign(object, source1, source2);
console.log(object);
// 输出结果：
// {
    
    
//   name: 'Jane',
//   age: 28,
//   score: 80
// }

_.omit(object, [props])

反向版_.pick; 这个方法一个对象，这个对象由忽略属性之外的object自身和继承的可枚举属性组成。

（注：可以理解为删除object对象的属性）。

let object = {
    
    
  name: 'John',
  age: 25,
  score: 80,
};

let withoutScore = _.omit(object, 'score');
console.log(withoutScore);
// 输出结果：
// {
    
    
//   name: 'John',
//   age: 25,
// }

_.pick(object, [props])

该函数用于创建一个对象的浅拷贝，并只保留指定键的属性。

let object = {
    
    
  name: 'John',
  age: 25,
  score: 80,
};

let picked = _.pick(object, ['name', 'age']);
console.log(picked);
// 输出结果：
// {
    
    
//   name: 'John',
//   age: 25,
// }

_.isEqual(value, other)

该函数用于比较两个值是否相等，支持比较对象、数组、正则表达式等。

注意: 这个方法支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays.
Object 对象值比较自身的属性，不包括 继承的和可枚举的属性。 不支持 函数和DOM节点比较。

console.log(_.isEqual('abc', 'abc')); // true
console.log(_.isEqual({
    
    a: 1}, {
    
    a: 1})); // true
console.log(_.isEqual([1, 2], [1, 2])); // true
console.log(_.isEqual(/abc/g, /abc/g)); // true

_.merge(object, [sources])

该函数用于将两个或多个对象合并为一个新对象。

该方法类似_.assign， 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为undefined的sources 来源对象属性将被跳过。数组和普通对象会递归合并，其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。

let object1 = {
    
     'a': 1 };
let object2 = {
    
     'b': 2 };
let merged = _.merge(object1, object2);
console.log(merged);
// 输出结果：
// { 'a': 1, 'b': 2 }

.omitBy(object, [predicate=.identity])

该函数用于创建一个对象的浅拷贝，但是过滤掉指定条件满足的属性。

反向版_.pickBy；这个方法一个对象，这个对象忽略 predicate（断言函数）判断不是真值的属性后，object自身和继承的可枚举属性组成。predicate调用与2个参数：(value, key)。

let object = {
    
    
  name: 'John',
  age: 25,
  score: 80,
};

let filtered = _.omitBy(object, function(value, key) {
    
    
  return key === 'score';
});

console.log(filtered);
// 输出结果：
// {
    
    
//   name: 'John',
//   age: 25,
// }

.pickBy(object, [predicate=.identity])

该函数用于创建一个对象，这个对象组成为从 object 中经 predicate 判断为真值的属性。 predicate调用2个参数：(value, key)。

let object = {
    
    
  name: 'John',
  age: 25,
  score: 80,
};

let picked = _.pickBy(object, function(value, key) {
    
    
  return key !== 'score';
});

console.log(picked);
// 输出结果：
// {
    
    
//   name: 'John',
//   age: 25,
// }

3. 字符串相关API

在Lodash中，字符串也是常用的数据类型之一，下面是常用的API：

_.kebabCase

该函数用于将字符串转换为kebab case（短横线连接单词）格式。

console.log(_.kebabCase('foo_bar_baz')); // 'foo-bar-baz'

_.camelCase

该函数用于将字符串转换为camel case（驼峰格式）格式。

console.log(_.camelCase('foo-bar-baz')); // 'fooBarBaz'

_.snakeCase

该函数用于将字符串转换为snake case（下划线连接单词）格式。

console.log(_.snakeCase('fooBarBaz')); // 'foo_bar_baz'

_.startsWith

该函数用于判断字符串是否以指定的字符开始。

console.log(_.startsWith('lodash', 'lod')); // true

_.endsWith

该函数用于判断字符串是否以指定的字符结束。

console.log(_.endsWith('lodash', 'sh')); // true

_.repeat

该函数用于将一个字符串重复n次。

let repeated = _.repeat('abc', 3);
console.log(repeated);
// 输出结果：
// 'abcabcabc'

以上是Lodash中常用的一些API，这些API可以帮助我们更加方便和高效地处理数据。

四、总结

Lodash 是一个必备的JavaScript工具库，可以帮助我们简洁、易读地处理数据。Lodash提供了许多功能强大的函数，主要用于操作数组、对象和字符串等数据类型，同时也提供了许多实用的函数，如merge、debounce、throttle等等。Lodash的使用可以让我们更快速、更高效地编写JavaScript代码，希望这篇文章可以帮助你学习Lodash，并在实际开发中运用它。