怎样使你的 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 相关文章推荐
JS 表单验证大全
Nov 23 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
JS实现评价的星星功能
Aug 20 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
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下正则来匹配dede模板标签的代码
2010/08/21 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
繁简字转换功能
2006/07/19 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
跟老齐学Python之Python文档
2014/10/10 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python制作简易注册登录系统
2016/12/15 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python中自带的三个装饰器的实现
2019/11/08 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
Python容器类型公共方法总结
2020/08/19 Python
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
应付会计岗位职责
2013/12/12 职场文书
教师的实习鉴定
2013/12/15 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
助学感谢信范文
2015/01/21 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang