JavaScript練習筆記整理·3 - 6.25

来源:http://www.cnblogs.com/omoc/archive/2017/06/25/7076426.html
-Advertisement-
Play Games

今天的知識點主要是數組的迭代方法中的一種filter()方法、數組操作方法中的concat()方法以及字元串的replace()方法。filter()方法可用於使用函數判斷數組中各項的值中返回true值的結果所組成的數組。concat()可以複製和創建新數組。而replace()方法可以替換字元串中... ...


歡迎和大家一起來討論~   基礎練習(1):  

我的解答為:
function array_diff(a, b) {
  if (b == "") return a;
  return a.filter(function(item,index,array) {
    var flag = false;
    for(var i=0;i<b.length;i++) {
      if(item !== b[i]) flag = true;
    }
    return flag;
  });
}

較優解答為:

function array_diff(a, b) {
  return a.filter(function(x) { return b.indexOf(x) == -1; });
}

 

分析:

對數組a使用filter()方法,迭代判斷數組a中的值是否存在於數組b中。當x的值,即數組a的值不能在數組b中找到時,b.indexOf()方法將返回-1。數組的filter()方法是指對數組中的每一項運行給定函數,返回該函數會返回true的項組成的的數組。 我的思路就稍微想得複雜了,對數組進行迭代的方法filter()是想到了,卻沒有好好地利用起來,函數內的判斷方法不夠簡潔,也沒有想到可以使用indexOf()方法進行判斷。  

筆記:

filter()方法,是指對數組中的每一項運行給定函數,返回該函數會返回true的項組成的的數組。利用指定的函數確定是否在返回的數組中包含某一項。   使用例子: var numbers = [1,2,3,4,5,4,3,2,1]; var filterResult = numbers.filter(function(item,index,array) {      return (item>2); }); alter(filterResult); //[3,4,5,4,3]   數組的迭代方法真的很常用的,用於對某個數組迴圈某一操作。這些迭代方法要比for迴圈語句簡單很多,要記住! 共有五個迭代方法:every()、filter()、forEach()、map()、some()。  
基礎練習(2):   我的解答為:
var gimme = function (inputArray) {
  var newArray = [];
  for(var i=0;i<inputArray.length;i++) {
    newArray[i] = inputArray[i];
  }
  newArray.sort(function(a,b) {
    if(a < b) {
      return -1;
    } else if (a> b) {
        return 1;
    } else {
        return 0;
    }
  });
  return inputArray.indexOf(newArray[1]);
};

較優解答為:

function gimme(a) {
  return a.indexOf(a.concat().sort(function(a, b) { return a - b })[1])
}

 

分析:

在較優解答中,對原數組使用了concat()方法,該方法可以將原數組複製並創建一個新數組。接著對新數組進行排序,並對於中間值求得索引值。 我的思路和最優解是一樣的,而實現方法還是稚嫩了一些。對於創建新數組不知道可以使用concat()方法進行快速地複製,也說明對基礎知識的熟悉程度不夠了。另外排序方法中,原來可以直接使用“return a-b”,我的方法就顯得很累贅了。  

筆記:

concat()方法可基於當前數組中的所有項創建一個新數組。該方法會先創建當前數組的一個副本,將接收到的參數添加到這個副本的末尾,最後返回新構建的數組。在沒有給concat()方法傳遞參數的情況下,它只是複製。若傳遞給concat()方法的是一個或多個數組,則該方法會將這些數組中的每一項都添加到結果數組中。若傳遞值不是數組,則添加到結果數組的末尾。   使用例子: var colors = ["red","green","blue"]; var colors = colors.concat("yellow",["black","brown"]); alert(colors); // red,green,blue alert(colors); // red,green,blue,yellow,black,brown   重排序方法:使用sort()方法可以進行排序,但仍可能會出現一些問題,因此使用比較函數,可以避免這個問題。 對於大多數數據類型可使用,只需要將其作為參數傳遞給sort()方法即可: function compare(value1,value2) {      if(value1 < value2) {           return -1;      } else if (value1> value2) {           return 1;      } else {           returm 0;      } } 對於數值型或其他valueOf()方法會返回數值類型的對象類型,可以使用更簡單的比較函數: function compare(value1,value2) {      return value2 - value1; }  
基礎練習(3):  

我的解答為:
function minMax(arr){
  var newarr = [];
  newarr.push(Math.min.apply(Math,arr));
  newarr.push(Math.max.apply(Math,arr));
  return newarr;
}

較優解答為:

function minMax(arr){
  return [Math.min(...arr), Math.max(...arr)];
}

分析:

這道題目就很簡單了,較優解答中的擴展語法( spread syntax)也在練習一中提及了。我的寫法還是太謹慎了,是不是應該大膽一些呢?  
基礎練習(4):  

我的解答為:
function XO(str) {
   var str = str.toLowerCase();
   var countx = 0;
   var counto = 0;
   for(var i=0;i<str.length;i++) {
     if(str[i] === "x") {
       countx++;
     }
     if(str[i] === "o") {
       counto++;
     }
    }
    if(counto == countx) {
      return true;
    } else {
      return false;
    }
}

較優解答為:

function XO(str) {
    var a = str.replace(/x/gi, ''),
          b = str.replace(/o/gi, '');
    return a.length === b.length;
}

分析:

較優解使用的是replace()方法,結合正則表達式的使用,對原字元串str分別將x和o用空字元串替換得到a和b字元串,比較a和b字元串的長度,從而得到結果。我的解答方法呢,因為實在想不到可以使用什麼方法,所以用的最原始的方法,仿佛自己在做C語言的題目。   筆記: replace()方法,該方法接受兩個參數,一個參數可以是一個RegExp對象或者一個字元串,第二個參數可以是一個字元串或者是一個函數。若第一個參數是字元串,指揮替換第一個子字元串。要想替換所有子字元串,是提供一個正則表達式,並且指定全局標誌。   使用例子: var text = "cat,bat,sat,fat"; var result = text.replace("at","ond"); alert(result); //"cond,bat,sat,fat"   result = text.replace(/at/g,"ond"); alert(result); //"cond,bond,song,fond"  
 總結: 今天的知識點主要是數組的迭代方法中的一種filter()方法、數組操作方法中的concat()方法以及字元串的replace()方法。filter()方法可用於使用函數判斷數組中各項的值中返回true值的結果所組成的數組。concat()可以複製和創建新數組。而replace()方法可以替換字元串中的一個或多個值。 從這三天的練習來看,對於數組的各種方法也逐漸使用得熟練起來了。但是其他類型的各種方法還是一種挑戰。而我的解答也要從比較冗餘的語句,寫出更為簡潔而有效的語句了。繼續加油吧!    
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 準備篇 適用/適合人群:適合基礎小白 目標:掌握JavaSE。 ●技術點小節: 1.開發工具的安裝配置的介紹 2.JDK安裝 3.DOS環境編程 4.Eclipse的安裝使用 ●JAVA基礎 1.基本的語法規範 2.數據類型 3.流程式控制制 4.函數 ●初識JavaOOP 1.類,對象,面向編程思想 ...
  • 本人從事前端開發的工作,由於一直以來都沒有寫文章的習慣,很多東西不記下來就很容易忘記。如果可以親手把記下來的內容通過自己理解然後寫下來,那將會對所學的知識內容得到更深刻的印象和理解,將會對以後的工作更有幫助。 希望大家可以多多支持^_^ ...
  • 簡介 基於 webpack2 實現的多入口項目腳手架,主要使用 extract text webpack plugin 實現 js 、css 公共代碼提取,html webpack plugin 實現 html 多入口,less loader 實現 less 編譯,postcss loader 配置 ...
  • Web 前端代碼規範 最後更新時間:2017-06-25 原始文章鏈接:https://github.com/bxm0927/web-code-standards 此項目用於記錄規範的、高可維護性的前端代碼,這是通過分析 Github 眾多前端代碼庫,總結出來的前端代碼書寫規範。 目錄 前端普適性規 ...
  • 介紹: markdown是一種可以使用普通文本編譯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本具有一定的格式。說的簡單一點,markdown其實就是一種簡單的文本,與普通的文本文件(txt文件)不同的是,支持一些特殊的符號,通過特殊的符號來表示不同的語義,並且給予不同的樣式。普通的文本文件 ...
  • javascript的數據類型 (symbol)一、原始數據類型 或 基本數據類型 6種 1,undefined (1,申明未賦值,2,函數沒有返回值)2,null (空,不存在)3,number (數字,小數和整數)4,boolean (布爾值,true,false) 5,string (字元串, ...
  • 一、position語法與結構 position語法: position : static absolute relative position參數:static : 無特殊定位,對象遵循HTML定位規則absolute : 將對象從文檔流中拖出,使用left,right,top,bottom等屬性 ...
  • 前言 眾所周知ES6新增的const關鍵字可以用來聲明常量,但是它只對基本數據類型生效(Number、String、Boolean等),那如果我們想聲明一個常量對象呢?該如何實現,Object內置對象早就替我們想到了,下麵來具體看一下 正題 一、先來看一下const方式來聲明基本類型常量 代碼: 運 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...