如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。

让我们先从怎样删除数组中的重复项这个简单问题开始。

复杂 - 使用 forEach 删除重复项

首先,我们新创建一个空数组,用 forEach() 在数组的每个元素上执行一次提供的函数。最后检查新数组中是否存在该值,如果不存在,则添加它。

function removeDuplicates(arr) {  
   const uniqueVals = [];   
   arr.forEach((value,index) => {     
       if(uniqueVals.indexOf(value) === -1) {
           uniqueVals.push(value);
       }  
   });
  return uniqueVals;
}

简单 - 使用 filter 删除重复项

filter 方法创建一个包含所有元素的新数组,通过提供的函数进行测试。基本上我们只需要迭代数组,并检查当前元素在数组中出现的第一个位置是否和当前位置相同。当然,这两个位置对于重复元素来说是不同的。

function removeDuplicates(arr) {
  return arr.filter((item, pos) => arr.indexOf(item) === pos)
}

简单 - 使用 Set 删除重复项

ES6 提供了 Set 对象,这使事情变得更加容易。 Set 仅允许存在唯一值,所以当你传入数组时,它会自动删除重复的值。
但是,如果你需要一个包含唯一元素的数组,为什么不一开始就用 Set 呢?

function removeDuplicates(arr) {
   return [...new Set(arr)];
}

接下来让我们解决第二个问题:写一个函数,向该函数传入一组非负整数,其中的值各不不同,要求使它们连续,并返回缺失的数字个数。

对于const arr = [4,2,6,8],输出应为

countMissingNumbers(arr)= 3

你可以看到 357 是缺失的。

复杂 - 使用 sort 和 for 循环解决

要获得最小和最大的数字,我们需要用用 sort方法按升序进行排序来达到这个目的,然后从最小的数字循环到最大的数字。每次检查数组中是否存在应该出现的序号,如果不存在,就对计数器加一。

function countMissingNumbers(arr) {
    arr.sort((a,b) => a-b);    
    let count = 0;    
    const min = arr[0];    
    const max = arr[arr.length-1];
    for (i = min; i<max; i++) {
      if (arr.indexOf(i) === -1) {
          count++;         
      }      
    }        
    return count;
}

简单 - 使用 Math.max 和 Math.min 求解

这个解决方案有一个简单的解释:Math.max()函数返回数组中最大的数字,而Math.min() 返回数组中最小的数字。

首先,如果没有丢失数字,我们能知道数组中有多少个数字。所以可以用以下公式 maxNumber - minNuber + 1,并用这个结果减去数组长度,得到的差就是缺失数字的个数。

function countMissingNumbers(arr) {
      return Math.max(...arr) - Math.min(...arr) + 1 - arr.length;
}

最后一个问题是检查字符串是否为回文。所谓 回文 是一个从左到右和从右到左读起来都一样的字符串。

复杂 - 使用 for 循环检查

这个方法的循环从字符串的第一个字符开始,一直到字符串长度的一半。字符串中最后一个字符的索引是 string.length-1,倒数第二个字符的索引是string.length-2,依此类推。所以在这里我们检查从左边开始的指定索引处的字符是否等于右边指定索引处的字符。如果它们不相等,就返回false。

function checkPalindrome(inputString) { 
   let length = inputString.length
   for (let i =0; i<length / 2; i++) {
        if (inputString[i] !== inputString[length - 1 -i]) {
             return false        
        }
   }
  return true
}

简单 - 用 reverse 和 join 检查

我认为这个解决方案简单到不需要解释,因为代码本身说明了一切。我们只需使用 spread operator 从字符串创建一个数组,然后reverse数组,最后用 join 方法将其再次转换为字符串,并与原始字符串进行比较。

function checkPalindrome(string) {
   return string === [...string].reverse().join('');
}

保持简单!

当有更简单的方法时,为什么要搞得那么复杂?希望你能从这篇文章中学到一些很有意思的思路。祝你有一个美好的编码时间,尽量不要让生活中简单的事情复杂化。

原文地址:https://www.freecodecamp.org/news/how-to-keep-your-javascript-code-simple-and-easy-to-read-bff702523e7c/

Image placeholder
前端答疑
未设置
  36人点赞

没有讨论,发表一下自己的看法吧

推荐文章
可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

可视化的JavaScript:作用域(链)

首先,来看看下面的代码:constname="Lydia" constage=21 constcity="SanFrancisco" functiongetPersonInfo(){ constn

可视化的JavaScript:事件循环

首先,事件循环是什么,为什么要理解它?JavaScript是单线程的:一次只能运行一个任务。通常这没什么大不了的,但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中,我们要等待30秒,然后才

2021适合移动和桌面应用的JavaScript框架是什么

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 当听到JavaScript这个词的时候,“web开发”会一下子出现在我们的脑海中,因为JavaScript在很长一段时间里一直是web应

PHP 代码简洁之道 ( PHP Clean Code)

介绍 RobertC.Martin's的软件工程师准则CleanCode同样适用于PHP。它并不是一个编码风格指南,它指导我们用PHP写出具有可读性,可复用性且可分解的代码。 并非所有的准则都必须严格

一道阿里Web前端面试题看出你的JS基本功

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 //求出如下题目结果({}+{}).length([]+[]).length(function(){}).length这道题目乍一

谁不想写出干净的代码?7 个技巧,让你的同事爱上你的代码

推荐课程:融职教育--web全栈开发就业班(含价值500万10个商业项目) 1使用有意义的变量命名使用有意义的名称,这会让你一眼就知道是什么意思。//不推荐letxyz=validate(‘amyja

JavaScript日常代码开发代码层面的性能优化

课程推荐:java开发工程师--学习猿地精品课程 随着软件开发行业的不断发展,性能优化已经是一个不可避免的话题,本质上说任何可以提高运行效率,降低运行开销的行为,都可以看做是一种优化操作,前端开发过程

一句有趣的JS代码

课程推荐:前端开发工程师--学习猿地精品课程 我们经常在框架级的源码中看到类似如下的一句代码,比如:vartoStr1=Function.prototype.call.bind(Object.prot

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

深入讨论JavaScript中Set对象如何让代码更快

课程推荐:Java开发工程师--学习猿地精品课程 我确信有很多开发人员坚持使用基本的全局对象:数字,字符串,对象,数组和布尔值。对于许多用例,这些都是需要的。但是如果想让你的代码尽可能快速和可扩展,那

如何实现一个有趣的Java脚手架

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 新建应用面临的问题在实际项目来发中,当我们创建一个新应用时,大概会遇到哪些问题? 创建应用过程比较繁琐,很多内容其实都是类似的,但就是得

必备丨开发中常用的25 个JavaScript 单行代码

课程推荐:web全栈开发就业班--融职教育 下面为大家介绍我在开发中常用的30个Java单行代码,没有特别的顺序。 1.强制布尔值 要将变量强制转换为布尔值而不更改其值: constmyBoolean

总结我的Java朋友

推荐课程:java开发工程师--学习猿地精品课程 一、对于Java的认识学习Java,首先要知道Java是一门面向对象编程的语言,而我们之前学过C++,C++是C语言的继承,C++既可以进行C语言的过

Java中的JDBC

课程推荐:前端开发工程师--学习猿地精品课程 JDBC:JavaDatabaseConnectivityJDBCStatement与PreparedStatement的区别参考:https://www

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR如何使用Excel将通道配置简单化?

进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择。EasyNVR核心在于摄像机的音视频

新突破!人工智能会根据你的声音来预测你的长相

麻省理工学院的研究人员发明了一种新的人工智能,它实现了一项惊人的成就:仅通过分析一个人声音的短片段,它就能重建他们在现实生活中的样子。人工智能的预测结果并不完美,但总的来说还是相当不错的,这项研究也是

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

如何通过 Tampermonkey 快速查找 JavaScript 加密入口

在很多情况下,我们可能想要在网页中自动执行某些代码,帮助我们完成一些操作。如自动抢票、自动刷单、自动爬虫等等,这些操作绝大部分都是借助JavaScript来实现的。那么问题来了?在浏览器里面怎样才能方

如何在JavaScript中操作数组?

JavaScript中的数组是什么?在开始之前,你需要先了解数组的真正含义。在JavaScript中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。声明一个数组:l