1. Toy模板网首页
  2. >Toy博客

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

1年前作者：亦世凡华、分类：Toy博客阅读(7)违法举报

这篇具有很好参考价值的文章主要介绍了React--》学习Lodash：让你的JS代码更加优雅和易于阅读。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

目录

初识Lodash

操作数组方法

操作语言方法

操作数学方法

操作对象方法

操作字符串方法

初识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的讲解就到这，关注博主学习更多前端技术！文章来源地址https://www.toymoban.com/news/detail-527697.html

到了这里，关于React--》学习Lodash：让你的JS代码更加优雅和易于阅读的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用

相关文章

  • 电脑待机怎么设置？让你的电脑更加节能

    电脑待机怎么设置？让你的电脑更加节能

    在日常使用电脑的过程中，合理设置待机模式是一项省电且环保的好习惯。然而，许多用户对于如何设置电脑待机感到困扰。那么电脑待机怎么设置呢？本文将深入探讨三种常用的电脑待机设置方法，通过详细的步骤，帮助用户更好地掌握电脑待机的技巧，实现更高效的电源

    2024年02月02日
    浏览(9)
  • 【Spring Security】让你的项目更加安全的框架

    【Spring Security】让你的项目更加安全的框架

    🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《Spring Security》。🎯🎯 👉点击这里，就可以查看我的主页啦！👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧！🎁🎁 💖期待你的加入，一

    2024年02月04日
    浏览(12)
  • 华为云桌面Workspace，让你的办公更加舒适惬意

    华为云桌面Workspace，让你的办公更加舒适惬意

    在各行各业转型的过程中，企业对于线上办公的需求不断增多，越来越需要一个云办公平台，为企业更好实现数字化网络化办公降本增效。正逢佳节之际，在此为各大企业推荐一个高效的办公神器——华为云桌面Workspace。相信作为企业决策者的你们在了解这款产品的优势后会

    2024年02月13日
    浏览(8)
  • 推荐5款让你的电脑更加有趣的小工具

    推荐5款让你的电脑更加有趣的小工具

    今天推荐的都是一些让你的电脑更加有趣的小工具，喜欢的可以自行在搜索引擎搜索下载。 TranslucentTB是一款用于电脑任务栏美化的软件，可以将Windows 10的任务栏设置成透明模式，透明状态下的任务栏，搭配一张好看的壁纸，视觉效果将超乎你的想象。这款软件本身的操作也

    2024年02月13日
    浏览(7)
  • 什么是CI/CD？让你的项目变得更加敏捷！

    什么是CI/CD？让你的项目变得更加敏捷！

    在今天这个快速变化的时代，开发者们需要与时俱进，不断提升自己的工作效率。在这篇文章里，将一起探讨 如何使用CI/CD和Github Action让你的项目更加高效，快速响应市场变化。 CI（持续集成，Continuous Integration）是一种软件开发实践，它要求开发者频繁地将代码集成到共享

    2024年02月16日
    浏览(14)
  • 快速搭建API随心搭，让你的web开发更加高效

    快速搭建API随心搭，让你的web开发更加高效

    随着互联网的发展，越来越多的应用和服务需要通过API接口来实现。API（Application Programming Interface，应用程序编程接口）可以理解为两个软件之间的桥梁，通过API接口，两个软件可以相互交流并进行数据交换。如今，API已经成为许多公司和应用程序的核心，因此快速搭建并管

    2024年02月08日
    浏览(11)
  • 点击器自动点击器，让你的屏幕操作变得更加简单

    点击器自动点击器，让你的屏幕操作变得更加简单

    点击器自动点击器，也被称为屏幕点击器或鼠标连点器，是一种能够模拟人类点击行为的工具。它可以在特定时间间隔内自动执行鼠标点击操作，来代替用户手动点击屏幕。这种工具通常运行在Windows、MacOS和Linux等操作系统上，并可以与其他软件集成使用。   以下是本文的主

    2024年02月09日
    浏览(8)
  • LoadRunner参数化最佳实践：让你的性能测试更加出色！

    LoadRunner参数化最佳实践：让你的性能测试更加出色！

    距离上次使用loadrunnr 已经有一年多的时间了。初做测试时在项目中用过，后面项目中用不到，自己把重点放在了工具之外的东西上，认为性能测试不仅仅是会用工具，最近又想有一把好的利器毕竟可以帮助自己更好的完成性能测试工作。这算是一个认知的过程吧！ 在次安装

    2023年04月25日
    浏览(10)
  • 五大优化技巧，让你的视频直播app源码更加流畅

    五大优化技巧，让你的视频直播app源码更加流畅

    视频直播app源码在确保流畅体验方面是至关重要的。为了提升性能，以下是几项关键的优化技巧： 使用轻量级编码器和解码器 ：选择高效的编码器和解码器，以减少资源占用，并确保视频流畅播放。 优化视频分辨率和比特率 ：根据用户设备和网络条件，适当调整视频分辨率

    2024年02月09日
    浏览(9)
  • 华为手机录屏全攻略，让你的录制更加顺畅

    华为手机录屏全攻略，让你的录制更加顺畅

    “求助！华为手机录屏在哪里呀，有人知道吗？平时不用的时候也看见过，就没在意，现在需要用到录屏了，却找不到了，真的很头疼，有没有人了解的，教教我。” 随着智能手机的普及和移动娱乐需求的增长，越来越多的用户开始关注手机录屏功能。手机录屏可以帮助用户

    2024年02月04日
    浏览(11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包