怎样使你的 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

你可以看到 3，5 和 7 是缺失的。

复杂 - 使用 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('');
}

保持简单！

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

以上所述是小编给大家介绍的怎样使你的 JavaScript 代码简单易读详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)

    正则表达式判断所填入号码的运营商js代码修改版:http://www.jb51.net/article/31563.htm 在做WEB项目时,有时候需要根据用户的输入手机号码判断该号的运营商是移动.联通.电信或其他,再根据不同的运营商做出相应的处理,下面介绍js中如何判断手机号的运营商的代码 纯js代码   var isChinaMobile = /^134[0-8]\\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\\d{8}$/; //移动方面

  • javascript 代码简单的管理菜单

    我们_www.jb51.net_简单的管理菜单 body{font-size:12px;} ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00} #top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;t

  • JavaScript代码简单实现求杨辉三角给定行的最大值

    复制代码 代码如下: function cal(row) { var result = 1; for(var i = 0; i < row / 2; i++) { return result * = (row - i) / i; } return result; };

  • 通过一段代码简单说js中的this的使用

    今天有朋友说遇到如下代码,让我帮解释原因 复制代码 代码如下: var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()());原因是js的this是动态决定的,和你调用方式有直接关系. 简单说如果你调用一个函数

  • JavaScript代码轻松实现网页内容禁止复制(代码简单)

    以下代码非常简单,轻松实现网页内容禁止复制. 有时候我们需要禁止别人复制网站的内容,以下代码可以轻松实现该功能! 屏蔽鼠标右键 复制代码 代码如下: function document.oncontextmenu(){event.returnValue=false;} 禁止选择复制 复制代码 代码如下: function document.onselectstart(){return false;} 本文只是给大家分享了代码的关键部分,细节部分还需要我们自己根据需求去补充说明.

  • 怎样使你的 JavaScript 代码简单易读（推荐）

    让我们先从怎样删除数组中的重复项这个简单问题开始. 复杂 - 使用 forEach 删除重复项 首先,我们新创建一个空数组,用forEach()在数组的每个元素上执行一次提供的函数.最后检查新数组中是否存在该值,如果不存在,则添加它. function removeDuplicates(arr) { const uniqueVals = []; arr.forEach((value,index) => { if(uniqueVals.indexOf(value) === -1) { unique

  • JavaScript代码性能优化总结(推荐)

    JavaScript代码性能优化总结(推荐)

    下面是我总结的一些小技巧,仅供参考. 以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出. 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面已经做了很多优化. 避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些. 尽量减少循环次数 少一层循环,就能提高数倍性能.如果要对一个数组的每个元素

  • iOS中使用JSPatch框架使Objective-C与JavaScript代码交互

    JSPatch是GitHub上一个开源的框架,其可以通过Objective-C的run-time机制动态的使用JavaScript调用与替换项目中的Objective-C属性与方法.其框架小巧,代码简洁,并且通过系统的JavaScriptCore框架与Objective-C进行交互,这使其在安全性和审核风险上都有很强的优势.Git源码地址:https://github.com/bang590/JSPatch. 一.从一个官方的小demo看起 通过cocoapods将JSPath集成进一个Xcod

  • 深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点

    具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的. 书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且

  • 编写高质量JavaScript代码的基本要点

    才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

  • Javascript 代码也可以变得优美的实现方法

    一.简化代码 采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小.大部分采用简单写法的代码,执行效率都有轻微提高. 1.1 简化常用对象定义:使用 var obj = {}; 代替 var obj = new Object(); 使用 var arr = []; 代替 var arr = new Array(); 1.2 精简if语句三元操作符可以有效精简只涉及赋值传值操作的if语句,比如 var score = 60, grade; if (score < 60) { grade

  • 浅谈JavaScript 代码整洁之道

    浅谈JavaScript 代码整洁之道

    概述 一张幽默的图片:软件质量通过你在阅读代码的时候有多少报怨来进行评估 Robert C. Martin 在 <代码整洁之道> 中提到的软件工程原则,同样适用于 JavaScript.这不是一个风格参考.它指导如何用 JavaScript 编写可读.可复用.可重构的软件. 并不是每一个原则都必须严格遵循,甚至很少得到大家的认同.它们仅用于参考,不过要知道这些原则都是<代码整洁之道>的作者们累积多年的集体经验. 我们在软件工程方面的技术发展刚刚超过 50 年,我们仍然在学习很多东西

  • 简单易用的倒计时js代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js代码</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:18px; text-align:center;} .time{ height:30px; padding:20

随机推荐