JavaScript引用類型之Array類型API詳解

来源:https://www.cnblogs.com/peerless1029/archive/2018/11/07/9919908.html
-Advertisement-
Play Games

Array類型也是ECMASCRIPT中最常見的數據類型，而且數據的每一項可以保存任何類型的數值，而且數組的大小是可以動態調整的，可以隨著數據的添加自動增長以容納新的數據。下麵，總結數據的一些常用方法： 1.創建數組 1.1.使用Array構造函數 1.2.數組字面量創建 2.讀取和設置數組的值 i ...


　　Array類型也是ECMASCRIPT中最常見的數據類型，而且數據的每一項可以保存任何類型的數值，而且數組的大小是可以動態調整的，可以隨著數據的添加自動增長以容納新的數據。下麵，總結數據的一些常用方法：

　　1.創建數組

　　　　1.1.使用Array構造函數

var arr=new Array(4); //創建一個包含3項的空數組
var arr2=new Array('red','blue','yellow'); //['red','blue','yellow']

　　　　1.2.數組字面量創建

var arr3=[]; //[]
var arr4=['red','yellow']; //['red','yellow']
var arr5=[1,2,]; //[1,2,]

　　2.讀取和設置數組的值

　　　　index數組的索引，即下標，當index<arr.length時，可以獲取數組中的值，否則取到的值為undefined。

　　　　通過設置數組的length，可以對數組的末尾移除或添加

var arr4=['red','yellow'];
console.log(
  arr4[0],
  arr4[2],
);
//red
//undefined
var arr4=['red','yellow'];
arr4.length=1;
console.log(arr4);
arr4.length=3;
console.log(arr4);
//["red"] 長度變為1
//["red", empty × 2] 長度變為3，後兩項為空

 

  var arr=[1,2,3];
  arr[10]=10;
  console.log(arr);
  //[1, 2, 3, empty × 7, 10] length為10中間的值為undefined

 

　　小結：通過arr[arr.length-1]可以獲取到數組的最後一項，通過arr[length]=item可以設置最後一項的值並動態增加了數組的長度

　　3.數組的方法

　　　　3.1.連接兩個數組或多個數組-concat
　　　　　　不改變原始數組，需要用新的變數保存返回的新數組

var arr1=[1,2];
var arr2=[2,3];
arr1.concat(arr2);
console.log(arr1,arr2);
var arr3=arr1.concat(arr2);
console.log(arr3);

// [1, 2] (2) [2, 3]
// [1, 2, 2, 3]

　　　　3.2.截取數組一部分-slice

　　　　arr.slice(startIndex,endIndex);截取的項包括數組開始的索引的項，不包括數組結束的索引的項

　　　　也不改變原始數組，需要用新的變數保存返回的新數組

var arr=[1,2,3];
arr.slice(0,1);
console.log(arr);
var sub=arr.slice(0,1);
console.log(sub);
// [1, 2, 3]
// [1]

　　　　3.3用不同的分隔符構建字元串-join

　　　　預設以','拼接，

var arr=[1,2,3];
var str1=arr.join();
var str2=arr.join("-");
console.log(str1,str2);
//1,2,3
//1-2-3

// 根據數組拼接成html字元串
var arr=["HTML","CSS","JS"];
var html='<li>'+arr.join('</li><li>')+'</li>';
console.log(html);
// HTML</li><li>CSS</li><li>JS</li>

　　　　3.4.數組的反轉-reverse

var arr=[1,2,3,4,5];
arr.reverse();
// [5, 4, 3, 2, 1]

　　　　3.5.數組的排序-sort方法

　　　　這裡只是通過出入比較函數給sort方法來保持正確的排序，對象也可以根據某一屬性來進行正確的排序，這裡暫不贅述。

var arr=[1,2,11,5,50];
arr.sort();
// [1, 11, 2, 5, 50] 按照uicode編碼排序不是我們想要的結果
通過傳入比較函數保證正確的排序
arr.sort(function(a,b){
  if(a<b){
    return -1;
  }else if(a>b){
    return 1;
  }else{
    return 0;
  }
})
// [1, 2, 5, 11, 50]

　　　　3.6.數組的刪除，替換，插入-splice方法

　　　　array.splice(index,howmany,item1,.....,itemX)；

// 刪除開始索引後的第幾個元素
var arr=[1,2,3,4,5];
arr.splice(1,1); //[1, 3, 4, 5]

// 刪除開始索引後的第幾個元素然後插入新的值
var arr1=[1,2,3,4,5];
arr1.splice(1,2,11,22); // [1, 11, 22, 4, 5]

　　　　3.7.棧方法
　　　　數組提供了一種讓數組類似於其他數據結構的方法，棧是一種LIFO（Last-In-First-Out）後進先出的數據結構，也就是最新添加的最早被移除。

　　　　棧中的推入-push,接收任意變數的參數，把他們添加到數組的末尾，並返回修改後數組的長度

　　　　棧中的彈出-pop，從數組末尾移除最後一項，減少length值，然後返回移除的項
　　　　都發生在同一位置-棧的頂部。

var arr=[1,2,3];
arr.push('a'); //4 返回數組的長度
arr // [1, 2, 3, "a"]

var arr=[1,2,3];
arr.pop(); //3  返回數組最後一項的彈出值
arr

(3) [1, 2]

　　　　3.8.隊列方法

　　　　隊列的數據結構是FIFO（First-In-First-Out），隊列在數組的末端添加項，在列表的前端移除項。

　　　　末端添加項-push,

　　　　前端移除項-shift,移除數組中的第一項，並返回該項，同時將數組長度減1,

　　　　前端新增項-unshift,在數組前端新增一項並返回數組的新長度。

　　　　通過數組的unshift和pop方法可以從相反方向的來模擬隊列

var arr=[1,2,3];
arr.push(4) //4
arr.shift();  //1
arr; //[2,3,4]
arr.unshift("a"); //4
arr; //["a",1,2,3]

　　　　3.9.數組的位置方法-indexOf,lastIndexOf

　　　　indexOf() 方法可返回數組中某個指定的元素位置。

　　　　該方法將從頭到尾地檢索數組，看它是否含有對應的元素。開始檢索的位置在數組 start 處或數組的開頭（沒有指定 start 參數時）。如果找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引為 0。如果在數組中沒找到指定元素則返回 -1。

　　　　lastIndexOf() 方法可返回數組中從尾到頭方向上的位置，找到返回第一次出現的位置，否則返回-1。

var arr=[1,2,3,1,4];
arr.indexOf(1); //0
arr.lastIndexOf(1); //3

　　　　3.10.數組的平鋪（有些低版本瀏覽器不相容）

　　　　 方法會遞歸到指定深度將所有子數組連接，並返回一個新數組。arr.flat(depth);預設深度為1

var arr=[1,2,3,[4,5],[7,8]];
var arr2=arr.flat(); //等價於arr.flat(1)
console.log(arr2);
// [1, 2, 3, 4, 5, 7, 8]

　　4.數組的迭代方法

　　　　4.1.every():對數組的每一項運行給定函數，如果該函數對每一項都返回true,則返回true

var numbers=[1,2,3,4,5];
var result=numbers.every(function(item,index,arr){
  return item>2;
})
result  //false

　　　　4.2.some():對數組的每一項運行給定函數，如果該函數對任一項返回true,則返回true

var numbers=[1,2,3,4,5];
var result=numbers.some(function(item,index,arr){
  return item>2;
})
result  //false

　　　　4.3.filter():對數組中每一項運行給定的函數，返回該函數會返回true的項組成新的數組

var numbers=[1,2,3,4,5];
var result=numbers.filter(function(item,index,arr){
  return item>2;
});
result //[3, 4, 5]

　　　　4.4.map():對數組中每一項運行給定的函數，返回每次函數調用的結果組成新的數組

var numbers=[1,2,3,4,5];
var result=numbers.map(function(item,index,arr){
  return item*item;
});
result // [1, 4, 9, 16, 25]

　　　　4.5.foreach():對數組中每一項運行給定函數，這個方法沒有結果，與for迴圈迭代數組一樣


眼過千遍，不如手寫一遍，以上是對JavaScript數組常用API的一些總結，也是平常業務開發中會經常使用到的，如有不足，歡迎指正。

 

參考資料：

《JavaScript高級程式設計》

《菜鳥教程》

《MDN》

　　　　

 


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

-Advertisement-
Play Games
更多相關文章
  • SpringBoot與mongodb的結合
    本文系列文章： ​ 使用Shell 操作 MongoDB的技巧 ​ MongoTemplate的使用技巧及其註意事項 敬請期待。 前言 最近公司想要做一個用戶行為數據的收集，最開始想用mysql來存儲後來發現這種方式對於不固定數據格式的保存存在局限性，也不利於查詢統計操作。所以衍生了使用mongod ...
  • Oracle視圖詳解
    Oracle視圖詳解 一. 視圖的定義 視圖(view)，也稱虛表, 不占用物理空間，這個也是相對概念，因為視圖本身的定義語句還是要存儲在數據字典里的。視圖只有邏輯定義。每次使用的時候,只是重新執行SQL。 視圖是從一個或多個實際表中獲得的，這些表的數據存放在資料庫中。那些用於產生視圖的表叫做該視圖 ...
  • LevelDB原理解析
    LevelDb有如下一些特點： 首先，LevelDb是一個持久化存儲的KV系統，和Redis這種記憶體型的KV系統不同，LevelDb不會像Redis一樣狂吃記憶體，而是將大部分數據存儲到磁碟上。 其次，LevleDb在存儲數據時，是根據記錄的key值有序存儲的，就是說相鄰的key值在存儲文件中是依次順 ...
  • Spark SQL join的三種實現方式
    引言 join是SQL中的常用操作，良好的表結構能夠將數據分散到不同的表中，使其符合某種規範(mysql三大範式)，可以最大程度的減少數據冗餘，更新容錯等，而建立表和表之間關係的最佳方式就是join操作。 對於Spark來說有3種Join的實現，每種Join對應的不同的應用場景(SparkSQL自動 ...
  • iOS開發之OC與swift開發混編教程，代理的相互調用,block的實現。OC調用Swift中的代理， OC調用Swift中的Block 閉包
    本文章將從兩個方向分別介紹 OC 與 swift 混編 1. 第一個方向從 swift工程 中引入 oc類 1. 1 如何在swift的類中使用oc類 1.2 如何在swift中實現oc的代理方法 1.3 如何在swift中實現oc的Block回調 2 二個方向從OC工程中引入swift類 2.1 ...
  • WebView斷網提示
    轉載請標明出處，維權必究：https://www.cnblogs.com/tangZH/p/9913968.html 重寫WebViewClient中的方法，然後WebView.setWebViewClient(mWebViewClient); 在onReceivedError中便可以進行網路出錯時 ...
  • adb server is out of date. killing完美解決
    原本是想跑monkey測試的，可使用adb命令時提示：adb server is out of date. killing... 出現這個問題的原因是：adb使用的埠5037被占用了。下麵我們說下如何找到是哪個程式占用了這個埠，順便看看cmd裡面的一些類似Linux的進程操作。 1.錯誤信息： ...
  • 【代碼筆記】Web-HTML-腳本
    一，效果圖。 二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html 腳本</title> </head> <body> <!--插入一段腳本--> <script> document.write("hello w ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類