返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript重构技巧中如何让函数简单明了
  • 695
分享到

JavaScript重构技巧中如何让函数简单明了

2024-04-02 19:04:59 695人浏览 八月长安
摘要

这期内容当中小编将会给大家带来有关javascript重构技巧中如何让函数简单明了,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。本文转载自微信公众号「大迁世界」,转载本文

这期内容当中小编将会给大家带来有关javascript重构技巧中如何让函数简单明了,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

本文转载自微信公众号「大迁世界」,转载本文请联系大迁世界公众号。

JavaScript 是一种易于学习编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

对对象参数使用解构

如果我们希望函数接收很多参数,那么应该使用对象。在此基础上,我们就可以使用解构语法提取我们需要的参数。

例如,对于对象参数,我们可能会这样使用:

const greet = (obj) => {   return `${obj.greeting}, ${obj.firstName}${obj.lastName}`; }

上面的语法,我们可以使用解构方式会更优雅:

const greet = ({   greeting,   firstName,   lastName }) => {   return `${greeting}, ${firstName}${lastName}`; }

这样我们可以少写很多重复的东西,命名也会更加清晰。

命名回调函数

好的命名会使阅读代码更容易,回调函数的命名也是一样的,例如下面不好的命名方式:

const arr = [1, 2, 3].map(a => a * 2);

我们可以这样分开命名:

const double = a => a * 2; if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); } const arr = [1, 2, 3].map(double);

现在我们知道我们的回调函数实际上是用来加倍原始数组的每个元素的。

让条件句具有描述性

通过在自己的函数的条件语句中编写条件表达式,可以使条件语句更具描述性。

对于复杂的条件判断, 我们可以单独使用函数来表示,会让条件语句更具描述性,例如下面代码:

if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); }

当条件多时,我们可以用函数来表示:

const winnerExists = () => {   return score === 100 ||     remainingPlayers === 1 ||     remainingPlayers === 0 } if (winnerExists()) {   quitGame(); }

这样,我们就知道这些条件是检查游戏代码中是否存在赢家的条件。

在第一个例子中,我们有一个很长的表达式在括号里,大多数人可能不知道它在判断什么。但在第二个例子中,一旦我们把它放到一个命名函数中,我们就知道它大概在判断什么了。

在条件语句中拥有一个命名函数比在拥有一堆布尔表达式要清晰得多。

用 Map 或 Object替换 switch 语句

由于  switch语句很长,这样容易出错。因此,如果可以的话,我们应该用较短的代码代替它们。许多switch语句可以用map或object替换。例如,如果我们有下面的switch语句:

const getValue = (prop) => {   switch (prop) {     case 'a': {       return 1;     }     case 'b': {       return 2;     }     case 'c': {       return 3;     }   } } const val = getValue('a');

我们可以将其替换为object或map,如下所示:

const obj = {   a: 1,   b: 2,   c: 3 } const val = obj['a'];

如我们所见,switch 语法很长。我们需要嵌套多个带有多个return语句的块,只是为了获得给定prop值的返回值。

相反使用对象,我们仅仅需要一个对象就可以了:

const obj = {   a: 1,   b: 2,   c: 3 }

使用对象还有一个好处,就是对于键不必是有效的标识符号,这样这增加了更多的灵活性。

我们还可以使用map替换对象,如下所示:

const map = new Map([['a', 1], ['b', 2], ['c', 3]]) const val = map.get('a')

如我们所见,使用Map时,代码也短很多。我们通过传递一个数组,数组中的每项包含键和值。然后,我们仅使用Map实例的get方法从键中获取值。

Map优于对象的一个好处是,我们可以将数字,布尔值或对象等其他值用作键。而对象只能将字符串或symbol作为键。


使用解构语法可以使对象参数更清楚,更短。这样,可以选择性地将属性作为变量进行访问。

通过将条件表达式放在它自己的命名函数中,可以使条件表达式更具描述性。同样,我们应该为回调函数命名,以便更容易地读取代码。

最后,应该尽可能用Map和Object替换switch语句。

上述就是小编为大家分享的JavaScript重构技巧中如何让函数简单明了了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网node.js频道。

--结束END--

本文标题: JavaScript重构技巧中如何让函数简单明了

本文链接: https://www.lsjlt.com/news/82524.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript重构技巧中如何让函数简单明了
    这期内容当中小编将会给大家带来有关JavaScript重构技巧中如何让函数简单明了,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。本文转载自微信公众号「大迁世界」,转载本文...
    99+
    2024-04-02
  • JavaScript重构技巧中如何降低函数复杂度
    这篇文章给大家介绍JavaScript重构技巧中如何降低函数复杂度,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的...
    99+
    2024-04-02
  • Go 函数单元测试的重构技巧
    为了提高 go 函数单元测试的可维护性和可读性,我们可以:提取断言函数简化代码。采用表驱动的测试组织测试数据。编写 mocking 接口测试函数与组件的交互。运行细粒度的测试隔离和调试问...
    99+
    2024-05-04
    go 单元测试 git
  • 深入理解Go语言中的函数重构技巧
    在Go语言程序开发中,函数重构技巧是十分重要的一环。通过优化和重构函数,不仅可以提高代码质量和可维护性,还可以提升程序的性能和可读性。本文将深入探讨Go语言中的函数重构技巧,结合具体的...
    99+
    2024-04-02
  • C++ 函数性能优化中的代码重构技巧是什么?
    代码重构是提高 c++++ 函数性能的关键步骤,涉及改变代码结构和组织方式,无需改变功能。具体技巧包括:1. 内联函数以消除函数调用开销;2. 消除虚函数调用以消除虚表查找开销;3. 循...
    99+
    2024-04-18
    c++ 函数性能优化
  • 如何理解JavaScript中构造函数
    如何理解JavaScript中构造函数,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。JavaScript学习笔记...
    99+
    2024-04-02
  • 揭秘:JavaScript 构造函数模式的奥秘,原来如此简单!
    理解 JavaScript 构造函数模式 构造函数模式是 JavaScript 中创建对象的一种强大而流行的技术。它允许您使用一个函数,从一个原型对象创建多个对象。原型对象包含所有方法和属性,该模式用于创建新对象。 构造器函数的语法 ...
    99+
    2024-02-23
    JavaScript 构造函数 对象 原型 继承
  • Javascript中如何实现reduce函数查重
    这篇文章给大家分享的是有关Javascript中如何实现reduce函数查重的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。原代码:var arr="qweqr...
    99+
    2024-04-02
  • 如何使用代码重构技术提升 PHP 函数性能?
    代码重构是提升 php 函数性能的有效技术,通过内联变量、提取方法、使用查找表等方式优化代码结构和减少重复,包括:1. 内联变量:消除变量创建和销毁开销。2. 提取方法:提高代码可读性和...
    99+
    2024-04-26
    代码重构 php 函数性能 代码可读性
  • 如何在javascript中使用构造函数继承
    本篇文章给大家分享的是有关如何在javascript中使用构造函数继承,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1、说明使用父亲的结构函数来增强子类的实例,等于复制父亲的实...
    99+
    2023-06-15
  • 如何在 Python 面试中巧妙地运用 javascript 函数?
    在Python的面试中,经常会遇到需要使用JavaScript函数的情况。虽然Python和JavaScript是两种不同的编程语言,但是它们都是广泛使用的语言,因此在面试中,掌握如何巧妙地在Python中使用JavaScript函数是非常...
    99+
    2023-08-22
    面试 javascript 函数
  • 如何在Word中制作目录索引?简单有效的大神技巧
    在利用Word文档制作会议记录等文件时,由于内容太多,为了方便了解文档大纲我们往往需要制作一个目录索引。那么很多小伙伴就有了疑惑,这个看似简单的目录索引到底该如何制作呢?今天小编就来教大家快速制作目录索引的方法。一:设置标题首先我们要设置好...
    99+
    2023-06-05
  • Go Shell重定向技巧:为何在大数据处理中如此重要?
    Go是一种快速、高效的编程语言,它的Shell也同样强大。在Go Shell中,重定向技巧是非常重要的,特别是在大数据处理中。本文将介绍Go Shell重定向技巧的原理、用途和示例代码。 一、什么是重定向? 在计算机中,重定向是一种将输出...
    99+
    2023-06-22
    shell 重定向 大数据
  • C++ 函数重载中如何使用宏来简化代码?
    宏简化 c++++ 函数重载:创建宏,将通用代码提取到单个定义中。在每个重载函数中使用宏替换通用的代码部分。实际应用包括创建打印输入数据类型信息的函数,分别处理 int、double 和...
    99+
    2024-04-13
    c++ 函数重载
  • JavaScript如何在构造函数中给对象添加方法
    小编给大家分享一下JavaScript如何在构造函数中给对象添加方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!构造函数中给对象添加方法// 给对象添...
    99+
    2023-06-03
  • PHP8中如何通过Constructor Property Promotion简化类的构造函数?
    PHP8中如何通过Constructor Property Promotion简化类的构造函数?在PHP8中,引入了Constructor Property Promotion(构造函数属性推广)特性,这使得编写类的构造函数更加简洁和高效。...
    99+
    2023-10-22
    PHP constructor Property Promotion
  • 如何使用Python和Laravel函数实现重定向:一个简单的指南
    重定向是Web开发过程中一个非常重要的概念。它可以帮助你将用户引导到正确的页面,同时也能提高用户体验和SEO排名。在本文中,我们将介绍如何使用Python和Laravel函数实现重定向。 Python是一种流行的编程语言,拥有强大的功能和...
    99+
    2023-10-22
    laravel 函数 重定向
  • 如何在微信小程序中生成二维码:一个最简单的案例就让你明白
    使用weapp.qrcode.js 在 微信小程序 中,快速生成二维码 一、效果 二、具体步骤、代码     下载weapp-qrcode代码 然后 将 dist 目录下的weapp.qrcode.esm.js 复制到项目目录中(这里...
    99+
    2023-09-09
    微信小程序 小程序 javascript
  • 实用技巧:如何利用PHP中的trim函数处理中文空格
    在PHP编程中,处理字符串时经常会遇到空格的问题,这其中包括中文空格。在实际开发中,我们常常会使用trim函数来去除字符串两端的空格,但是对于中文空格的处理相对复杂一些。本文将介绍如何...
    99+
    2024-04-02
  • 大数据分析中的 ASP 函数技巧:如何更好地处理 numy 数据?
    大数据分析中的 ASP 函数技巧:如何更好地处理 numy 数据? 在大数据分析中,经常会用到 numpy 库。这个库是 Python 中用于科学计算的常用库,提供了高效的数组操作和数学函数。然而,对于初学者来说,numpy 的函数和用法可...
    99+
    2023-07-25
    函数 大数据 numy
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作