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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類