React--》学习Lodash：让你的JS代码更加优雅和易于阅读

此时隔壁 vue专栏正在项目实战，为了不打断它的文章连续性，我们把lodash的讲解文章搬到react专栏来进行学习，当然是否用框架或用什么框架都不会影响我们学习的恒心！

初识Lodash

Lodash是一个流行的JavaScript实用工具库，提供了高效、灵活和模块化的操作数组、对象、字符串、函数等数据类型的工具函数。Lodash相对于原生JavaScript，可以让你更快捷地编写代码，减少重复工作和出错风险。其主要特点如下：

Lodash 以模块化的方式构建，可以按需载入所需的功能。

提供了很多对JavaScript内置对象方法的扩展，可以方便地进行常用的数据处理。

优化了内置方法的性能，提高了应用程序的运行效率。

对于跨浏览器兼容性、缓存机制、错误处理等方面都进行了增强。

为什么要学习lodash？学习过ES6+语法的朋友都知道，它已经提供了很多的方法来操作我们的数据结构，但是Lodash提供了更加全面和完善的API支持，并且兼容更多的浏览器版本。Lodash还提供了许多实用的函数，如deepClone、debounce、throttle等，可以帮助开发者更快速地实现常见的编程任务，提高开发效率。

虽然ES6/ES7在语言特性上有很大的提升，但Lodash仍然是一个非常有价值的工具库，使用它可以让我们更轻松地开发和维护JavaScript应用程序。如果你是一名前端开发者，学习Lodash仍然是非常有必要的。本篇文章将用react框架为基础，简单介绍一下lodash的使用，当然如果想了解更多的lodash知识，推荐查阅官方文档：https://www.lodashjs.com/ ，lodash的安装官方文件已经讲解的很清除了，因为本篇文章采用的是react框架进行讲解，所以我们在终端执行如下命令进行安装lodash第三方库：

npm i --save lodash

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

操作数组方法

_.compact(array)：创建一个新数组，包含原数组中所有的非假值元素，返回过滤掉假值的新数组

import _ from 'lodash';

// 例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。
const result = _.compact([0, 1, false, 2, '', 3]);
console.log(result); // 控制台打印结果：[1, 2, 3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.concat(array, [values])：创建一个新数组，将array与任何数组或值连接在一起，返回连接后的新数组，这一点和原生JS concat 方法类似，这里也简单的讲解一下：

import _ from 'lodash';

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

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.difference(array, [values])：创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。（这个方法还挺新颖的）

import _ from 'lodash';

// 参数1：要检查的数组。参数2：排除的值。
const result = _.difference([5, 4, 3, 2, 1], [4, 2, 1]);
console.log(result); // 控制台打印结果：[5, 3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

该方法也衍生出其它类似方法，使得排除的条件变得更加严格，如下：

import _ from 'lodash';

// 参数1：要检查的数组。参数2：排除的值。参数3：调用每个元素
const result = _.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
console.log(result); // 控制台打印结果：[3.1, 1.3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.drop(array, [n=1])：创建一个切片数组，去除array前面的n个元素。（n默认值为1。）

import _ from 'lodash';

// 参数1：要查询的数组。参数2：要去除的元素个数。
const result = _.drop([1, 2, 3], 2);
console.log(result); // 控制台打印结果：[3]

const App = () => {
  return <div>{result}</div>;
};
export default App;

该方法也衍生出其它类似方法，使得切片数组变得更加灵活，如下：

// 参数1：要查询的数组。参数2：要去除的元素个数。
const result = _.dropRight([1, 2, 3], 2); // 去除array尾部的n个元素。
console.log(result); // 控制台打印结果：[1]

_.fill(array, value, [start=0], [end=array.length])：使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。

import _ from 'lodash';

// 参数1：要填充改变的数组。参数2：填充给 array 的值。参数3：开始位置（默认0）。参数4：结束位置（默认array.length）。
const result = _.fill([4, 6, 8, 10], '*', 1, 3);
console.log(result); // 控制台打印结果：[4, '*', '*', 10]

const App = () => {
  return <div>{result}</div>;
};
export default App;

_.pull(array, [values])：移除数组array中所有和给定值相等的元素：

import _ from 'lodash';

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

const App = () => {
  return <div>{result}</div>;
};
export default App;

该方法也衍生出其它类似方法，使得移除数组指定元素变得更加灵活，如下：

var array = [1, 2, 3, 1, 2, 3];
const result = _.pullAll(array, [2, 3]);// 这个方法类似_.pull，区别是这个方法接收一个要移除值的数组。
console.log(result); // 控制台打印结果：[1, 1]

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);// 根据索引 indexes，移除array中对应的元素，并返回被移除元素的数组。
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]

_.sortedUniq(array)：优化排序数组，返回一个新的不重复的数组。

import _ from 'lodash';

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

const App = () => {
  return <div>{result}</div>;
};
export default App;

该方法也衍生出其它类似方法，使得优化数组变得更加灵活，如下：

_.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);
// => [1.1, 2.3]

操作语言方法

_.eq(value, other)：比较两者的值，来确定它们是否相等。

var object = { 'a': 1 };
var other = { 'a': 1 };
 
_.eq(object, object);
// => true
 
_.eq(object, other);
// => false
 
_.eq('a', 'a');
// => true
 
_.eq('a', Object('a'));
// => false
 
_.eq(NaN, NaN);
// => true

_.isSafeInteger(value)：检查 value 是否是一个安全整数。一个安全整数应该是符合 IEEE-754 标准的非双精度浮点数。

_.isSafeInteger(3);
// => true
 
_.isSafeInteger(Number.MIN_VALUE);
// => false
 
_.isSafeInteger(Infinity);
// => false
 
_.isSafeInteger('3');
// => false

_.isMatch(object, source)：执行一个深度比较，来确定 object 是否含有和 source 完全相等的属性值。

var object = { 'a': 1, 'b': 2 };
// 参数1：要检查的对象。参数2：属性值相匹配的对象。
_.isMatch(object, { 'b': 2 });
// => true
 
_.isMatch(object, { 'b': 1 });
// => false

操作数学方法

_.add(augend, addend)：两个数相加。

_.add(6, 4);
// => 10

_.subtract(minuend, subtrahend)：亮数相减。

_.subtract(6, 4);
// => 2

_.multiply(multiplier, multiplicand)：两个数相乘。

_.multiply(6, 4);
// => 24

_.divide(dividend, divisor)：两个数相除。

_.divide(6, 4);
// => 1.5

_.max(array)：计算 array 中的最大值。如果 array 是空的或者假值将会返回 undefined。

_.max([4, 2, 8, 6]);
// => 8
 
_.max([]);
// => undefined

_.mean(array)：计算 array 的平均值。

_.mean([4, 2, 8, 6]);
// => 5

_.min(array)：计算 array 中的最小值。如果 array 是空的或者假值将会返回 undefined。

_.min([4, 2, 8, 6]);
// => 2
 
_.min([]);
// => undefined

_.sum(array)：计算 array 中值的总和。

_.sum([4, 2, 8, 6]);
// => 20

操作对象方法

_.get(object, path, [defaultValue])：根据 object对象的path路径获取值。如果解析 value 是 undefined 会以 defaultValue 取代。

var object = { 'a': [{ 'b': { 'c': 3 } }] };
// 参数1：要检索的对象。参数2：要获取属性的路径。参数3：如果解析值是 undefined ，这值会被返回。
_.get(object, 'a[0].b.c');
// => 3
 
_.get(object, ['a', '0', 'b', 'c']);
// => 3
 
_.get(object, 'a.b.c', 'default');
// => 'default'

_.has(object, path)：检查 path 是否是object对象的直接属性。

var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
// 参数1：要检索的对象。参数2：要检查的路径path。
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false

操作字符串方法

_.camelCase([string=''])：转换字符串string为驼峰写法。

// 将要转换的字符串，返回驼峰写法的字符串。
_.camelCase('Foo Bar');
// => 'fooBar'
 
_.camelCase('--foo-bar--');
// => 'fooBar'
 
_.camelCase('__FOO_BAR__');
// => 'fooBar'

_.kebabCase([string=''])：转换字符串string为kebab case。

_.kebabCase('Foo Bar');
// => 'foo-bar'
 
_.kebabCase('fooBar');
// => 'foo-bar'
 
_.kebabCase('__FOO_BAR__');
// => 'foo-bar'

_.capitalize([string=''])：转换字符串string首字母为大写，剩下为小写。

_.capitalize('FRED');
// => 'Fred'

_.lowerFirst([string=''])：转换字符串string的首字母为小写。

_.lowerFirst('Fred');
// => 'fred'
 
_.lowerFirst('FRED');
// => 'fRED'

_.endsWith([string=''], [target], [position=string.length])：检查字符串string是否以给定的target字符串结尾。

// 参数1：要检索的字符串。参数2：要检索字符。参数3：检索的位置。
_.endsWith('abc', 'c');
// => true
 
_.endsWith('abc', 'b');
// => false
 
_.endsWith('abc', 'b', 2);
// => true

_.repeat([string=''], [n=1])：重复 N 次给定字符串。

_.repeat('*', 3);
// => '***'
 
_.repeat('abc', 2);
// => 'abcabc'
 
_.repeat('abc', 0);
// => ''

当然lodash这个js库还有很多实用的API，但是文章讲解有限，想了解更多lodash知识可以去官方文档自行查阅，本篇文章关于lodash的讲解就到这，关注博主学习更多前端技术！