使你的 JavaScript 代码简单易读
解决一个问题可以有很多方法,但是有些方法很复杂,甚至有些是荒谬的。在本文中,我想谈谈解决一个问题时的好方案和坏方案。
#1
让我们先从怎样删除数组中的重复项这个简单问题开始。
复杂 - 使用 forEach 删除重复项
首先,我们新创建一个空数组,用 forEach() 在数组的每个元素上执行一次提供的函数。最后检查新数组中是否存在该值,如果不存在,则添加它。
1function removeDuplicates(arr) {
2 const uniqueVals = [];
3 arr.forEach((value,index) => {
4 if(uniqueVals.indexOf(value) === -1) {
5 uniqueVals.push(value);
6 }
7 });
8 return uniqueVals;
9}
简单 - 使用 filter 删除重复项
用 filter 方法创建一个包含所有元素的新数组,通过提供的函数进行测试。基本上我们只需要迭代数组,并检查当前元素在数组中出现的第一个位置是否和当前位置相同。当然,这两个位置对于重复元素来说是不同的。
1function removeDuplicates(arr) {
2 return arr.filter((item, pos) => arr.indexOf(item) === pos)
3}
简单 - 使用 Set 删除重复项
ES6 提供了 Set 对象,这使事情变得更加容易。 Set 仅允许存在唯一值,所以当你传入数组时,它会自动删除重复的值。
但是,如果你需要一个包含唯一元素的数组,为什么不一开始就用 Set 呢?
1function removeDuplicates(arr) {
2 return [...new Set(arr)];
3}
#2
接下来让我们解决第二个问题:写一个函数,向该函数传入一组非负整数,其中的值各不不同,要求使它们连续,并返回缺失的数字个数。
对于const arr = [4,2,6,8],输出应为
countMissingNumbers(arr)= 3
你可以看到 3,5 和 7 是缺失的。
复杂 - 使用 sort 和 for 循环解决
要获得最小和最大的数字,我们需要用用 sort方法按升序进行排序来达到这个目的,然后从最小的数字循环到最大的数字。每次检查数组中是否存在应该出现的序号,如果不存在,就对计数器加一。
1function countMissingNumbers(arr) {
2 arr.sort((a,b) => a-b);
3 let count = 0;
4 const min = arr[0];
5 const max = arr[arr.length-1];
6 for (i = min; i<max; i++) {
7 if (arr.indexOf(i) === -1) {
8 count++;
9 }
10 }
11 return count;
12}
简单 - 使用 Math.max 和 Math.min 求解
这个解决方案有一个简单的解释:Math.max()函数返回数组中最大的数字,而Math.min() 返回数组中最小的数字。
首先,如果没有丢失数字,我们能知道数组中有多少个数字。所以可以用以下公式 maxNumber - minNuber + 1,并用这个结果减去数组长度,得到的差就是缺失数字的个数。
1function countMissingNumbers(arr) {
2 return Math.max(...arr) - Math.min(...arr) + 1 - arr.length;
3}
#3
最后一个问题是检查字符串是否为回文。所谓 回文 是一个从左到右和从右到左读起来都一样的字符串。
复杂 - 使用 for 循环检查
这个方法的循环从字符串的第一个字符开始,一直到字符串长度的一半。字符串中最后一个字符的索引是 string.length-1,倒数第二个字符的索引是string.length-2,依此类推。所以在这里我们检查从左边开始的指定索引处的字符是否等于右边指定索引处的字符。如果它们不相等,就返回false。
1function checkPalindrome(inputString) {
2 let length = inputString.length
3 for (let i =0; i<length / 2; i++) {
4 if (inputString[i] !== inputString[length - 1 -i]) {
5 return false
6 }
7 }
8 return true
9}
简单 - 用 reverse 和 join 检查
我认为这个解决方案简单到不需要解释,因为代码本身说明了一切。我们只需使用 spread operator 从字符串创建一个数组,然后reverse数组,最后用 join 方法将其再次转换为字符串,并与原始字符串进行比较。
1function checkPalindrome(string) {
2 return string === [...string].reverse().join('');
3}
保持简单!
当有更简单的方法时,为什么要搞得那么复杂?希望你能从这篇文章中学到一些很有意思的思路。祝你有一个美好的编码时间,尽量不要让生活中简单的事情复杂化。
十五年编程经验,今年1月整理了一批2019年最新WEB前端教学视频,不论是零基础想要学习前端还是学完在工作想要提升自己,这些资料都会给你带来帮助,从HTML到各种框架,帮助所有想要学好前端的同学,学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流Q群:296212562,即可免费获取。
- nginx反向代理+缓存开启+url重写+负载均衡(带健康探测)的部署记录
- [转自blueidea]像table一样布局div Ⅰ
- 如何对动态创建控件进行验证以及在Ajax环境中的使用
- 升级个人网站框架组件IBatisNet+Castle
- 如何在多线程中调用winform窗体控件
- gerrit代码简单备份方案分享
- svn代码发版的脚本分享
- 正则表达式提取指定内容
- mysql数据库误删除后的数据恢复操作说明
- 在.NET平台上运行Java程序-IKVM.NET入门
- ArraySegment<T>泛型结构示例
- SwitchButton 开关按钮 的多种实现方式
- SVN和Git对比梳理
- linux下expect环境安装以及简单脚本测试
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用vue-cli4快速搭建vue项目demo
- Vue实现pc/H5弹窗拖拽
- 微信小程序skeleton骨架屏
- 微信小程序锚点选择导航栏
- vue-ripple-directive点击水波纹
- dubbo学习之源码创建属于自己的dubbo-demo
- Vue4.x配置env开发环境、测试环境、生产环境
- SpringBoot总结之CommandLineRunner
- 详细整理Spring事务失效的具体场景及解决方案
- Vue监听文本框实时输入限制输入长度
- 30 分钟轻松搞定正则表达式基础
- Vant引入CDN实现图片懒加载
- Js时间戳倒计时天时分秒
- 微信小程序引用we-cropper裁切图片
- NodeJs获取get/post传值