亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

怎樣使你的 JavaScript 代碼簡(jiǎn)單易讀

Lin_YT / 1891人閱讀

摘要：讓我們先從怎樣刪除數(shù)組中的重復(fù)項(xiàng)這個(gè)簡(jiǎn)單問題開始。當(dāng)然，這兩個(gè)位置對(duì)于重復(fù)元素來(lái)說(shuō)是不同的。僅允許存在唯一值，所以當(dāng)你傳入數(shù)組時(shí)，它會(huì)自動(dòng)刪除重復(fù)的值。祝你有一個(gè)美好的編碼時(shí)間，盡量不要讓生活中簡(jiǎn)單的事情復(fù)雜化。

翻譯：瘋狂的技術(shù)宅
https://medium.freecodecamp.o...

本文首發(fā)微信公眾號(hào)：前端先鋒
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

解決一個(gè)問題可以有很多方法，但是有些方法很復(fù)雜，甚至有些是荒謬的。在本文中，我想談?wù)劷鉀Q一個(gè)問題時(shí)的好方案和壞方案。

讓我們先從怎樣刪除數(shù)組中的重復(fù)項(xiàng)這個(gè)簡(jiǎn)單問題開始。

復(fù)雜 - 使用 forEach 刪除重復(fù)項(xiàng)

首先，我們新創(chuàng)建一個(gè)空數(shù)組，用 forEach() 在數(shù)組的每個(gè)元素上執(zhí)行一次提供的函數(shù)。最后檢查新數(shù)組中是否存在該值，如果不存在，則添加它。

function removeDuplicates(arr) {  
   const uniqueVals = [];   
   arr.forEach((value,index) => {     
       if(uniqueVals.indexOf(value) === -1) {
           uniqueVals.push(value);
       }  
   });
  return uniqueVals;
}
簡(jiǎn)單 - 使用 filter 刪除重復(fù)項(xiàng)

用 filter 方法創(chuàng)建一個(gè)包含所有元素的新數(shù)組，通過(guò)提供的函數(shù)進(jìn)行測(cè)試。基本上我們只需要迭代數(shù)組，并檢查當(dāng)前元素在數(shù)組中出現(xiàn)的第一個(gè)位置是否和當(dāng)前位置相同。當(dāng)然，這兩個(gè)位置對(duì)于重復(fù)元素來(lái)說(shuō)是不同的。

function removeDuplicates(arr) {
  return arr.filter((item, pos) => arr.indexOf(item) === pos)
}
簡(jiǎn)單 - 使用 Set 刪除重復(fù)項(xiàng)

ES6 提供了 Set 對(duì)象，這使事情變得更加容易。 Set 僅允許存在唯一值，所以當(dāng)你傳入數(shù)組時(shí)，它會(huì)自動(dòng)刪除重復(fù)的值。
但是，如果你需要一個(gè)包含唯一元素的數(shù)組，為什么不一開始就用 Set 呢？

function removeDuplicates(arr) {
   return [...new Set(arr)];
}

接下來(lái)讓我們解決第二個(gè)問題：寫一個(gè)函數(shù)，向該函數(shù)傳入一組非負(fù)整數(shù)，其中的值各不不同，要求使它們連續(xù)，并返回缺失的數(shù)字個(gè)數(shù)。

對(duì)于const arr = [4,2,6,8]，輸出應(yīng)為

countMissingNumbers（arr）= 3

你可以看到 3，5 和 7 是缺失的。

復(fù)雜 - 使用 sort 和 for 循環(huán)解決

要獲得最小和最大的數(shù)字，我們需要用用 sort方法按升序進(jìn)行排序來(lái)達(dá)到這個(gè)目的，然后從最小的數(shù)字循環(huán)到最大的數(shù)字。每次檢查數(shù)組中是否存在應(yīng)該出現(xiàn)的序號(hào)，如果不存在，就對(duì)計(jì)數(shù)器加一。

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
簡(jiǎn)單 - 使用 Math.max 和 Math.min 求解

這個(gè)解決方案有一個(gè)簡(jiǎn)單的解釋：Math.max()函數(shù)返回?cái)?shù)組中最大的數(shù)字，而Math.min() 返回?cái)?shù)組中最小的數(shù)字。


首先，如果沒有丟失數(shù)字，我們能知道數(shù)組中有多少個(gè)數(shù)字。所以可以用以下公式 maxNumber  -  minNuber + 1，并用這個(gè)結(jié)果減去數(shù)組長(zhǎng)度，得到的差就是缺失數(shù)字的個(gè)數(shù)。


function countMissingNumbers(arr) {
      return Math.max(...arr) - Math.min(...arr) + 1 - arr.length;
}



最后一個(gè)問題是檢查字符串是否為回文。所謂 回文 是一個(gè)從左到右和從右到左讀起來(lái)都一樣的字符串。

復(fù)雜 - 使用 for 循環(huán)檢查

這個(gè)方法的循環(huán)從字符串的第一個(gè)字符開始，一直到字符串長(zhǎng)度的一半。字符串中最后一個(gè)字符的索引是 string.length-1，倒數(shù)第二個(gè)字符的索引是string.length-2，依此類推。所以在這里我們檢查從左邊開始的指定索引處的字符是否等于右邊指定索引處的字符。如果它們不相等，就返回false。


function checkPalindrome(inputString) { 
   let length = inputString.length
   for (let i =0; i
簡(jiǎn)單 - 用 reverse 和 join 檢查

我認(rèn)為這個(gè)解決方案簡(jiǎn)單到不需要解釋，因?yàn)榇a本身說(shuō)明了一切。我們只需使用 spread operator 從字符串創(chuàng)建一個(gè)數(shù)組，然后reverse數(shù)組，最后用 join 方法將其再次轉(zhuǎn)換為字符串，并與原始字符串進(jìn)行比較。


function checkPalindrome(string) {
   return string === [...string].reverse().join("");
}

保持簡(jiǎn)單！

當(dāng)有更簡(jiǎn)單的方法時(shí)，為什么要搞得那么復(fù)雜？希望你能從這篇文章中學(xué)到一些很有意思的思路。祝你有一個(gè)美好的編碼時(shí)間，盡量不要讓生活中簡(jiǎn)單的事情復(fù)雜化。


本文首發(fā)微信公眾號(hào)：前端先鋒
歡迎掃描二維碼關(guān)注公眾號(hào)，每天都給你推送新鮮的前端技術(shù)文章



歡迎繼續(xù)閱讀本專欄其它高贊文章：


12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目


世界頂級(jí)公司的前端面試都問些什么


CSS Flexbox 可視化手冊(cè)


過(guò)節(jié)很無(wú)聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！


從設(shè)計(jì)者的角度看 React


CSS粘性定位是怎樣工作的


一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫效果


程序員30歲前月薪達(dá)不到30K，該何去何從


7個(gè)開放式的前端面試題


React 教程：快速上手指南

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103340.html

相關(guān)文章

  • 你不知道的JavaScript（ES6與之未來(lái)）

    摘要：然而，臨近規(guī)范發(fā)布時(shí)，有建議提及未來(lái)的版本號(hào)切換為編年制，比如用同來(lái)指代在年末前被定稿的所有版本。總得來(lái)說(shuō)就是版本號(hào)不再那么重要了，開始變得更像一個(gè)萬(wàn)古長(zhǎng)青的活標(biāo)準(zhǔn)。 你不知道的JS（下卷）ES6與之未來(lái) 第一章：ES的今與明 在你想深入這本書之前，你應(yīng)該對(duì)（在讀此書時(shí)）JavaScript的最近標(biāo)準(zhǔn)掌握熟練，也就是ES5（專業(yè)來(lái)說(shuō)是ES 5.1）。在此，我們決定全方面地談?wù)撽P(guān)于將近的...

    Julylovin 評(píng)論0 收藏0

  • [翻譯] Async/Await 使你的代碼更簡(jiǎn)潔

    摘要：取而代之，利用事件循環(huán)體系，使用了一種類似語(yǔ)法的工作方式一旦非阻塞的異步操作完成之后，就可以讓開發(fā)者分配的回調(diào)函數(shù)被觸發(fā)。第一個(gè)嘗試嵌套的回調(diào)函數(shù)下面是使用嵌套的回調(diào)函數(shù)的實(shí)現(xiàn)方法這可能對(duì)于任何使用者來(lái)說(shuō)再熟悉不過(guò)了。 寫在文章前 這篇文章翻譯自 ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER,這是一篇寫于2017年八月的文章，并由某專欄提名為17年十大...

    hightopo 評(píng)論0 收藏0

  • 前端開發(fā)周報(bào)：JavaScript編程術(shù)語(yǔ)和web圖片優(yōu)化

    摘要：函數(shù)式編程術(shù)語(yǔ)大全函數(shù)式編程有許多優(yōu)點(diǎn)，它也越來(lái)越流行了。然而，每個(gè)編程范式都有自己獨(dú)特的術(shù)語(yǔ)，函數(shù)式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應(yīng)用場(chǎng)景之一，就是在的握手階段，客戶端服務(wù)端利用算法交換對(duì)稱密鑰。 1、JavaScript 函數(shù)式編程術(shù)語(yǔ)大全 函數(shù)式編程(FP)有許多優(yōu)點(diǎn)，它也越來(lái)越流行了。然而，每個(gè)編程范式都有自己獨(dú)特的術(shù)語(yǔ)，函數(shù)式編程也不例外。...

    kbyyd24 評(píng)論0 收藏0

  • 前端開發(fā)周報(bào)：JavaScript編程術(shù)語(yǔ)和web圖片優(yōu)化

    摘要：函數(shù)式編程術(shù)語(yǔ)大全函數(shù)式編程有許多優(yōu)點(diǎn)，它也越來(lái)越流行了。然而，每個(gè)編程范式都有自己獨(dú)特的術(shù)語(yǔ)，函數(shù)式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應(yīng)用場(chǎng)景之一，就是在的握手階段，客戶端服務(wù)端利用算法交換對(duì)稱密鑰。 1、JavaScript 函數(shù)式編程術(shù)語(yǔ)大全 函數(shù)式編程(FP)有許多優(yōu)點(diǎn)，它也越來(lái)越流行了。然而，每個(gè)編程范式都有自己獨(dú)特的術(shù)語(yǔ)，函數(shù)式編程也不例外。...

    kelvinlee 評(píng)論0 收藏0

  • 《Python技能樹》Python簡(jiǎn)介

    摘要：火爆是當(dāng)今非常熱門的語(yǔ)言之一，根據(jù)年月編程語(yǔ)言排行，榮獲年度編程語(yǔ)言稱號(hào)，并且其流行度依然處在上升勢(shì)頭。學(xué)習(xí)完技能樹之后，你將進(jìn)入編程的大門，明白編程的作用，建立編程的興趣方法和習(xí)慣。 ? 作者主頁(yè)：不吃西紅柿? ? 簡(jiǎn)介：CSDN博客專家?、HDZ核心組成員? 、Python領(lǐng)域優(yōu)質(zhì)創(chuàng)作者...

    BlackMass 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<