怎樣使你的 JavaScript 代碼簡單易讀

Lin_YT 發布于2019-08-23 16:49 / 1842人閱讀

摘要：讓我們先從怎樣刪除數組中的重復項這個簡單問題開始。當然，這兩個位置對于重復元素來說是不同的。僅允許存在唯一值，所以當你傳入數組時，它會自動刪除重復的值。祝你有一個美好的編碼時間，盡量不要讓生活中簡單的事情復雜化。

翻譯：瘋狂的技術宅
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 方法創建一個包含所有元素的新數組，通過提供的函數進行測試?；旧衔覀冎恍枰鷶到M，并檢查當前元素在數組中出現的第一個位置是否和當前位置相同。當然，這兩個位置對于重復元素來說是不同的。

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 教程：快速上手指南

云服務器 GPU云服務器簡單javascript javascript簡單教程簡單的javascript 易讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103340.html

你不知道的JavaScript（ES6與之未來）

摘要：然而，臨近規范發布時，有建議提及未來的版本號切換為編年制，比如用同來指代在年末前被定稿的所有版本?？偟脕碚f就是版本號不再那么重要了，開始變得更像一個萬古長青的活標準。你不知道的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