怎样使你的 JavaScript 代码简单易读(推荐)


Posted in Javascript onApril 16, 2019

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

复杂 - 使用 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 代码简单易读详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 #Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 #Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 #Javascript
详解vue-cli 脚手架 安装
Apr 16 #Javascript
详解jquery和vue对比
Apr 16 #jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 #Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
简约JS日历控件 实例代码
2013/07/12 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
node.js中watch机制详解
2014/11/17 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
解读ES6中class关键字
2017/11/20 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
JavaScript实现动态留言板
2020/03/16 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
化学教学随笔感言
2014/02/19 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
优秀党支部申报材料
2014/12/24 职场文书
法学专业求职信范文
2015/03/19 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
nginx rewrite功能使用场景分析
2022/05/30 Servers