怎样使你的 JavaScript 代码简单易读

Lin_YT 发布于2019-08-23 16:49 / 1746人阅读

摘要：让我们先从怎样删除数组中的重复项这个简单问题开始。当然，这两个位置对于重复元素来说是不同的。仅允许存在唯一值，所以当你传入数组时，它会自动删除重复的值。祝你有一个美好的编码时间，尽量不要让生活中简单的事情复杂化。

翻译：疯狂的技术宅
https://medium.freecodecamp.o...

本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章

解决一个问题可以有很多方法，但是有些方法很复杂，甚至有些是荒谬的。在本文中，我想谈谈解决一个问题时的好方案和坏方案。

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

复杂 - 使用 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
简单 - 使用 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
简单 - 用 reverse 和 join 检查
我认为这个解决方案简单到不需要解释，因为代码本身说明了一切。我们只需使用 spread operator 从字符串创建一个数组，然后reverse数组，最后用 join 方法将其再次转换为字符串，并与原始字符串进行比较。
function checkPalindrome(string) {
   return string === [...string].reverse().join("");
}
保持简单！
当有更简单的方法时，为什么要搞得那么复杂？希望你能从这篇文章中学到一些很有意思的思路。祝你有一个美好的编码时间，尽量不要让生活中简单的事情复杂化。

本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章


欢迎继续阅读本专栏其它高赞文章：

12个令人惊叹的CSS实验项目
世界顶级公司的前端面试都问些什么
CSS Flexbox 可视化手册
过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！
从设计者的角度看 React
CSS粘性定位是怎样工作的
一步步教你用HTML5 SVG实现动画效果
程序员30岁前月薪达不到30K，该何去何从
7个开放式的前端面试题
React 教程：快速上手指南

专线服务混合云简单javascript javascript简单教程简单的javascript 易读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103340.html

你不知道的JavaScript（ES6与之未来）

摘要：然而，临近规范发布时，有建议提及未来的版本号切换为编年制，比如用同来指代在年末前被定稿的所有版本。总得来说就是版本号不再那么重要了，开始变得更像一个万古长青的活标准。你不知道的JS（下卷）ES6与之未来第一章：ES的今与明在你想深入这本书之前，你应该对（在读此书时）JavaScript的最近标准掌握熟练，也就是ES5（专业来说是ES 5.1）。在此，我们决定全方面地谈论关于将近的...

Julylovin 2019-08-20 16:41 评论0 收藏0
[翻译] Async/Await 使你的代码更简洁

摘要：取而代之，利用事件循环体系，使用了一种类似语法的工作方式一旦非阻塞的异步操作完成之后，就可以让开发者分配的回调函数被触发。第一个尝试嵌套的回调函数下面是使用嵌套的回调函数的实现方法这可能对于任何使用者来说再熟悉不过了。写在文章前这篇文章翻译自 ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER,这是一篇写于2017年八月的文章，并由某专栏提名为17年十大...

hightopo 2019-08-26 11:31 评论0 收藏0
前端开发周报：JavaScript编程术语和web图片优化

摘要：函数式编程术语大全函数式编程有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。作用域有两种类似全局作用域和局部作用域。目前最重要的应用场景之一，就是在的握手阶段，客户端服务端利用算法交换对称密钥。 1、JavaScript 函数式编程术语大全函数式编程(FP)有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。...

kbyyd24 2019-08-21 12:05 评论0 收藏0
前端开发周报：JavaScript编程术语和web图片优化

摘要：函数式编程术语大全函数式编程有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。作用域有两种类似全局作用域和局部作用域。目前最重要的应用场景之一，就是在的握手阶段，客户端服务端利用算法交换对称密钥。 1、JavaScript 函数式编程术语大全函数式编程(FP)有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。...

kelvinlee 2019-08-29 13:21 评论0 收藏0
《Python技能树》Python简介

摘要：火爆是当今非常热门的语言之一，根据年月编程语言排行，荣获年度编程语言称号，并且其流行度依然处在上升势头。学习完技能树之后，你将进入编程的大门，明白编程的作用，建立编程的兴趣方法和习惯。 ? 作者主页：不吃西红柿 ? 简介：CSDN博客专家?、HDZ核心组成员? 、Python领域优质创作者...

BlackMass 2021-09-26 09:55 评论0 收藏0