JavaScript中對數組和數組API的認識

来源:https://www.cnblogs.com/Ni-F/archive/2018/05/11/9015938.html
-Advertisement-
Play Games

JavaScript中對數組和數組API的認識 一、數組概念: 數組是JavaScript中的一類特殊的對象,用一對中括弧“[]”表示,用來在單個的變數中存儲多個值。在數組中,每個值都有一個對應的不重覆的索引值。自動匹配索引值的數組稱為索引數組,自定義索引值的數組稱為關聯數組(又叫哈希數組)。以下均 ...


JavaScript中對數組和數組API的認識

 

一、數組概念:

  數組是JavaScript中的一類特殊的對象,用一對中括弧“[]”表示,用來在單個的變數中存儲多個值。在數組中,每個值都有一個對應的不重覆的索引值。自動匹配索引值的數組稱為索引數組,自定義索引值的數組稱為關聯數組(又叫哈希數組)以下均研究索引數組。

 

二、創建數組:

  使用數組之前首先都要先創建並賦值給一個變數,創建數組有兩種不同的方法。

  1、調用構造函數Array()創建數組,索引數組索引值都從0開始

    eg:var arr=New Array();           //創建一個空數組

    eg:var arr=New Array(3);       //創建一個長度為3的數組

       arr[0]=12;              //存儲一個Number類型的值

       arr[1]="abc";         //存儲一個String類型的值

       arr[2]=true;              //存儲一個Boolean類型的值

       可以簡寫:var arr=New Array(12,"abc",true);

 

  2、用數組字面量表示

    eg:var arr=[];          //創建一個空數組

    eg:var arr=[3];          //創建一個長度為1的數組,存錯了一個數值3

    eg:var arr=[12,"abc",true];             //創建一個存儲3個值的數組

 

三、簡單操作

  1、讀取和設置數組中的值時,要使用一對方括弧“[]”,裡面是值的索引值

    eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

      console.log(arr[0]);        //12,取arr數組索引值為1的值,並列印在控制台

      arr[1]="ABC";         //取arr數組索引值為1的值,修改為“ABC”放入原數組

      console.log(arr[1]);     //ABC

      arr[3]="一";          //在數組中索引值為3的位置增加一個值"一"

      console.log(arr[3]);     //一

 

  2、數組的length屬性可以得到數組的長度,修改length屬性可以起到修改數組的效果

     索引數組裡面最後一個值的索引值總比數組長度小1

    eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

      console.log(arr.length);    //3,此時arr數組的長度

      arr[arr.length]="ABC";    //在arr數組末尾新增一個值“ABC”,

      console.log(arr.length);    //4,新增之後arr數組的長度

      arr.length=arr.length-1;   //刪除arr數組末尾的值

      console.log(arr.length);    //3,新增之後arr數組的長度

 

      也可以直接修改數組的長度

      arr.length=2;

      console.log(arr.length);    //2(小於之前的3),之前多出來的值會被刪除

      arr.length=6;

      console.log(arr.length);    //6(大於之前的3),不夠的值被自動補充為空值

 

四、遍曆數組

  1、普通的for迴圈遍歷

    通常情況下是從索引值0開始遍歷,這樣 i 的取值就要限制在[0,arr.length)

    eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

      for(var i=0;i<arr.length;i++){

        console.log(arr[i]);

      }                //12  abc  true (空格處均有換行)

 

  2、用for...in方法遍歷

    其中key表示索引值,arr表示要遍歷的數組

     eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

      for(var key in arr){

        console.log(arr[key]);

      }                              //12  abc  true (空格處均有換行)

 

  3、用for...of方法遍歷

    val表示數組的值,arr為數組

     eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

      for(var val of arr){

        console.log(val);

      }              //12  abc true (空格處均有換行)

 

  4、用forEach()方法遍歷

    讓數組的每一項都執行給定的函數,此方法沒有返回值。

    該函數預設需要傳參,分別是:數組每一項值,每一項值的索引值以及數組本身

     eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

      arr.forEach(function(x,index,a){

        console.log(index+"--"+x);

      })              //0--12  1--abc  2--true (空格處均有換行)

五、數組屬性

  1、length:數組包含的元素的個數,即數組的長度。詳見上文 簡單操作 第二條

  2、constructor:返回對創建此對象的數組函數的引用(不常用)

  3、prototype:可以用來向數組對象添加屬性和方法(不常用)

 

六、數組方法

  1、增加

    push():向數組末尾增加元素,並返回修改後數組的長度(後加)

    unshift():向數組開頭增加元素,並返回修改後數組的長度(前加)

    eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

        var change1=arr.push("ABC");

      console.log("change1:"+change1+",當前數組:"+arr);

      //change1:4,當前數組:12,abc,true,ABC

      var change2=arr.unshift("一");

      console.log("change2:"+change2+",當前數組:"+arr);

      //change2:5,當前數組:一,12,abc,true,ABC

 

  2、刪除

    pop():刪除並返回數組的最後一個元素(後減)

    shift():刪除並返回數組的第一個元素(前鹼)

    eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

        var change3=arr.pop();

        console.log("change3:"+change3+",當前數組:"+arr);

      //change3:true,當前數組:12,abc

        var change4=arr.shift();

        console.log("change4:"+change4+",當前數組:"+arr);    

      //change4:12,當前數組:abc,true

  

  3、修改

    concat():連接兩個或兩個以上的數組,並返回新構建的數組

       創建原數組的副本,將元素或者數組添加到此副本的末尾並返回。

      在沒有參數的情況下,只是返回原數組的副本。

         eg:var arr=[12,"abc",true];   //創建一個存儲3個值的數組

         var arr1=arr.concat(8,["ABC","一"]);

         console.log("arr:"+arr+",arr1:"+arr1);  

         //arr:12,abc,true,arr1:12,abc,true,8,ABC,一(原數組未被改變)

    join():把數組元素組成一個字元串,通過參數指定的分隔符進行分隔

      該方法只有一個參數,即分隔符,用引號“""”包裹

      省略的話預設用逗號“,”分隔,若想要無縫銜接,用“""”

       eg:var arr=[12,"abc",true];     //創建一個存儲3個值的數組

        console.log(arr.join());      //12,abc,true(預設用逗號分隔)

        console.log(arr.join(""));   //12abctrue(無縫銜接)

        console.log(arr.join(" "));  //12 abc true(用空格分隔)

    sort():對數組的元素進行排序,預設按升序排列數組中的元素

      sort()方法調用數組中值的toString()方法,比較得到的字元串排序(數值不例外)

      sort()方法是在原數組上進行排序的,會改變原數組

      eg:var arr=["a","b","c","d","e"];

        console.log(arr.sort());

        console.log(arr);    

        //["a", "b", "c", "d", "e"] ["a", "b", "c", "d", "e"](空格處有換行,原數組被改變)

      eg:var arr=[2,12,5,34];

        console.log(arr.sort());

        console.log(arr);    

        //[12, 2, 34, 5] [12, 2, 34, 5](空格均有換行,原數組被改變)

      上例顯然是錯誤的,是因為sort()把所有數據類型轉為字元串進行對比的

      為瞭解決這個問題,我們可以給sort()方法設置一個對比規則的函數作參數

      這個函數接收兩個參數,若要第一個參數位於第二份參數之前,就返回一個負值

      反之則反,兩個參數相等即返回0

      通過這個函數我們可以設置自定義的規則來進行數組排序

      eg:var arr=[2,12,5,34];

        function compare(a,b){

          if(a<b){

            return -1;

          }else if(a>b){

            return 1;

          }else{

            return 0;

          }

        }

        console.log(arr.sort(compare));

        //[2, 5, 12, 34] [2, 5, 12, 34](空格處有換行,原數組被改變)

    reverse():顛倒數組中值的順序

      eg:var arr=[12,"abc",true];     //創建一個存儲3個值的數組

        console.log(arr.reverse());

        console.log(arr);

        //[true, "abc", 12] [true, "abc", 12](空格處有換行,原數組被改變)

    slice():返回截取數組的一個片段組成的新數組,原數組不變

      該方法接受參數,表示從原數組截取項起始和結束索引值(不包括結束位置的值)

      若沒有參數,則返回整個數組,相當於複製

      若只有一個參數,則表示從原數組截取項的起始位置索引值,結束位置預設為數組末尾

      若參數為負數,則表示將數組從後向前找位置,如:-2即倒數第二個值

      第二個參數表示的位置一定要在第一個參數表示位置之後,否則返回空數組

      eg:var arr=[0,2,4,6,8,10];

        console.log(arr.slice(2,4));    //[4,6]

        console.log(arr.slice(2));       //[4,6,8,10]

        console.log(arr.slice(2,-2));     //[4,6]

        console.log(arr.slice(-4,-2));      //[4,6]

        console.log(arr);          //[0,2,4,6,8,10]

    splice():可以實現多種操作,刪除,插入和替換,會改變原數組

      刪除:可以刪除數組中任意項,接受兩個參數,分別為:

        要刪除的第一項的索引值和要刪除的長度

      插入:可以在指定位置插入任意項,接受三個部分參數,分別為:

        要插入的起始位置,要刪除的項的數量(0) 以及 要插入的項(可以是多個)

      替換:可以在是定位置插入任意項,同時刪除任意項,接受三個部分參數,分別為:

        要插入的起始位置,要刪除的項的數量(不為0) 以及 要插入的項(可以是多個)

        刪除的項的數量和要插入的項的數量沒有必然的關係,不必完全相等

      該方法返回包含刪除項的數組,若沒有刪除項,則返回空數組,此方法會改變原數組

      eg:var arr=[0,2,4,6,8,10];

      console.log(arr.splice(2,2));       

      //[4,6] 被刪除的值

      console.log(arr);            

      //[0,2,8,10] 刪除:從索引值為2的地方開始刪除兩個元素

      var arr=[0,2,4,6,8,10];

      console.log(arr.splice(2,0,3));      

      //空數組 並未刪除元素

      console.log(arr);            

      //[0,2,3,4,6,8,10]  插入:在索引值為2的地方插入一個數值3

      var arr=[0,2,4,6,8,10];

      console.log(arr.splice(2,1,3,5));        

      //[4] 把索引值為2的4刪除,替換成了3,5

      console.log(arr);            

      //[0,2,3,5,6,8,10]  替換:把索引值為2的地方替換為兩個數值3,5

 

    toString() :把數組轉換為字元串,並返回結果

      eg:var arr=[0,2,4,6,8,10];

        console.log(arr.toString());      //0,2,4,6,8,10

    toLocaleString():把數組轉換為本地字元串,並返回結果

      用地區特定的分隔符把生成的字元串連接起來,形成一個字元串

      eg:var arr=[0,2,4,6,8,10];

        console.log(arr.toString());      //0,2,4,6,8,10

 

  4、查找

    indexOf():獲取元素在數組中第一次出現的位置,找不到則返回-1

      接受兩個參數,分別為要查找的元素和開始查找的位置,從前往後查找

      第二個參數可以省略,表示預設從第一項開始查找,該參數必須小於數組長度

      eg:var arr=[0,2,4,6,2,10];

        console.log(arr.indexOf(2));      //1 預設從第一項開始查找

        console.log(arr.indexOf(2,2));      //4 從索引值為2的地方開始從前向後查找

    lastIndexOf():獲取元素在數組中最後一次出現的位置,找不到則返回-1

      接受兩個參數,分別為要查找的元素和開始查找的位置,從後往前查找

      第二個參數可以省略,表示預設從最後一項開始查找,該參數必須小於數組長度

      eg:var arr=[0,2,4,6,2,10];

        console.log(arr.lastIndexOf(2));    //4 預設從最後一項開始查找

        console.log(arr.lastIndexOf(2,2));    //1 從索引值為2的地方開始從後向前查找

 

 

 

    已上即為本文全部內容,希望能對各位有所幫助,若有不妥之處也請各位多多指正,共同進步。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一.兩個日期大小比較 1.格式:(yyyy-mm-dd) function duibi(a, b,flag) { var arr = a.split("-"); var starttime = new Date(arr[0], arr[1], arr[2]); var starttimes = st ...
  • 用來確定字元串A是否包含字元串B,ES6有提供了三種新方法: 需要註意的是,這三個方法都接受第二個參數-一個數字n。前兩個均表示從第n個開始查詢,而,endsEith()是指針對前n個字元。 repeat() 將原字元串重覆n次。 字元串對象,一共有四個方法可以使用正則表達式:match()、rep ...
  • 將值從一種類型轉換為另一種類型通常稱為類型轉換,這是顯式的情況,隱式的情況稱為強制類型轉換。 JavaScript中的強制類型轉換總是返回標量基本類型值,如字元串、數字和布爾值,不會返回對象和函數。 類型轉換髮生在靜態類型語言的編譯階段,而強制類型轉換則發生在動態類型語言的運行時。 我們能夠從代碼中 ...
  • 講這個方法之前,我們應該先瞭解下插入節點時瀏覽器會做什麼。 在瀏覽器中,我們一旦把節點添加到document.body(或者其他節點)中,頁面就會更新並反映出這個變化,對於少量的更新,一條條迴圈插入也會運行很好,也是我們常用的方法。代碼如下: 但是,如果當我們要向document中添加大量數據時(比 ...
  • 相容IE是個坑,低版本IE很多都沒法跑起來 問題現象:vue-cli項目在IE下運行,會在鉤子函數出現 ReferenceError: “Promise”未定義 解決辦法: step1:安裝最新的web-pack-server 命令行:npm install --save-dev webpack-s ...
  • 先上傳統文件載入方式代碼,傳統方式在處理多層嵌套時代碼比較混亂 第二階段 promsie 新建一個promise對象讀取文件成功是返回 resolve(data) 失敗是返回 rejext, promise.then里可以得到返回結果 co + generator function Generato ...
  • 先最簡單的代碼 安裝 npm install express app.js 代碼內容 打開 localhost:2334埠可以看到 在上一個豐富點的代碼,包含 swig模版引擎,靜態資源載入,mongoose使用 我在上面代碼中做了詳細的註寫,還會詳細完善 github地址:https://git ...
  • 在介紹js中Object.defineProperty()和defineProperties()之前,我們瞭解下js中對象兩種屬性的類型:數據屬性和訪問器屬性。 數據屬性 數據屬性包含一個數據的位置,在這個位置可以讀取和寫入。其有4個描述其行為的特性 [[Configurable]] 表示能否通過d ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...