JavaScript之對象Array

来源:https://www.cnblogs.com/ruhaoren/archive/2019/08/17/11368205.html
-Advertisement-
Play Games

數組Array是JavaScript中最常用的類型之一，同一數組中可以保存任意類型的數據，並且它的長度是動態的，會隨著數組中數據的加減自動變化。每個數組都有一個表示其長度（數組元素的個數）的length屬性。並且數組元素的索引（下標）是從0開始的，所以數組最後一個元素的索引永遠等於length – ...


　　數組Array是JavaScript中最常用的類型之一，同一數組中可以保存任意類型的數據，並且它的長度是動態的，會隨著數組中數據的加減自動變化。每個數組都有一個表示其長度（數組元素的個數）的length屬性。並且數組元素的索引（下標）是從0開始的，所以數組最後一個元素的索引永遠等於length – 1；

 

一     創建數組

         1，使用new關鍵字創建

1 var arr = new Array();

       可以向Array構造函數傳遞參數以實現創建包含特定數據的數組，多個參數使用逗號隔開。

　　需要註意的是：當參數只有一個數字時，構造函數創建的不是包含該數字的字元串，而是一個長度為該數字的空數組，即arr.length = 數字。

         2，使用字面量形式創建

1 var arr = [1,2,3];

       數組元素被包含在一對“[]”中括弧內，數組的每個元素之間用逗號隔開，最後一個元素後面不需要逗號。

　　另外，上面已經講過，數組的長度是動態的，它體現在可以手動的修改其length的值，以達到刪除或增加數組長度的目的。

1 var arr = [1,2,3];
2 console.log(arr.length);//3
3 arr.length = 2;
4 console.log(arr.length);//2
5 console.log(arr);//[1,2]
6 arr.length = 3;
7 console.log(arr.length);//3
8 console.log(arr);//[1,2,empty ]

　　3，數組元素的訪問

         我們使用中括弧[]加數字的形式訪問數組元素。      

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

         通過這種方式我們也可以動態的修改某一位置的值，或向某一位置插入一個新值。   

1 var arr = [1,2,3];
2 arr[0] = 4;
3 console.log(arr);//[4,2,3]
4 arr[4] = 0;
5 console.log(arr);//[4,2,3,empty,0];

        可以看到，原本arr的長度是3，但我們向下標4的位置插入了一個新值，於是數組的長度變成了5，由於下標為3的位子原來並沒有值，並且我們也沒有新插入，所以JavaScript自動向該位置添加了一個空值占位符。

二     數組的遍歷

         1，普通for迴圈　　　　

1 var arr = [1,2,3];
2 for(var i = 0,len = arr.length;i < len;i++){
3     console.log(arr[i]);
4     //some code;
5 }

       效率最高的遍曆數組方式。 

　　 2，forEach　　　

1 var arr= [1,2,3];
2 arr.forEach(function (item, index, array) {
3     console.log(index + ":" + item + ":" + array);
4 });
5 /*
6 0:1:[1,2,3]
7 1:2:[1,2,3]
8 2:3:[1,2,3]
9 */

　　函數接受3個參數，第一個是當前處理元素的值，第二個是當前處理元素的下標，第三個是當前遍歷的數組，第二三個參數是可選的。

         3，map　　　

1 var arr = [1,2,3];
2 var newArr = arr.map(function (item, index, array) {
3     return item * item;
4 }
5 console.log(newArr);//[1,4,9]

        函數的參數和forEach方法一致。它會把函數作用到每個遍歷到的數組元素上，並返回一個新值，最終得到一個新數組並返回。

　　 4，for…in　　

1 var arr = [1,2,3];
2 for(var index in arr){
3     console.log(index + ":" + arr[index]);
4 }
5 /*
6 0:1
7 1:2
8 2:3
9 */

       for...in更適合遍歷對象，而不是數組，而且使用它遍曆數組的效率並不高。

　　5，for…of

1 var arr = [1,2,3];
2 for(var item of arr){
3     console.log(item);
4 }
5 //1
6 //2
7 //3

　　for...of是ES6的新方法，用它遍曆數組比for...in稍快一點。

三 　　數組常用方法

　　1，  toString(),valueOf()和join()

　　數組調用toString()和valueOf()一般返回由逗號隔開的所有數組元素組成字元串。　

1 var arr = [“hello”,”world”];
2 console.log(arr.toString());//”hello,world”
3 console.log(arr.valueOf());//”hello,world”

　　join()方法和他們不同，它可以接受一個字元串作為參數，用這個字元串作為分隔符。

1 var arr = [”hello”,”world”];
2 console.log(arr.join());//”hello,join”
3 console.log(arr.join(“”));//”helloworld”
4 console.log(arr.join(“&&”));//”hello&&world”

　　2，  push()和pop()，unshift()和shift()

　　push()接受任意個參數，依次添加到數組的末尾，返回修改後數組的長度。

　　pop()從數組末尾刪除一項，返回被刪除的元素。

　　unshift()從數組開頭插入任意個元素，返回插入後數組的長度。

　　shift()從數組開頭刪除一個元素，返回被刪除的元素。

1 var colors = ["red","blue","pink","white"];
2 colors.push("black");//5
3 console.log(colors);//["red","blue","pink","white","black"]
4 colors.pop();//"black"
5 console.log(colors);//["red","blue","pink","white"]
6 colors.unshift("green");//5
7 console.log(colors);//["green","red","blue","pink","white"]
8 colors.shift();//"green"
9 console.log(colors);//["red","blue","pink","white"]

　　3，  reverse()和sort()

　　reverse()會翻轉數組元素的順序。

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

　　sort()預設根據數組元素的字元編碼排序。可以接受一個函數作為參數，該函數接受兩個參數，如果第一個參數應該在第二個之後，那麼返回一個正數，如果第一個和第二個位置不變，則返回0，如果第一個應該在第二個之前，那麼返回一個負數。

 1 var colors = ["red","blue","pink","white"];
 2 colors.sort(function(val1,val2){
 3     if(val1 < val2){
 4         return -1;
 5     }else if(val1 == val2){
 6         return 0;
 7     }else{
 8         return 1;
 9     }
10 });
11 console.log(colors);["blue","pink","red","white"]

　　如果想實現倒序排列，可以設置當val1小於val2時返回1，最後返回-1；如果比較的是數字，可簡寫為：

1 var arr = [3,51,55,23,-1,-50,0.2];
2 arr.sort(function(val1,val2){
3     return val1 - val2;
4 });
5 console.log(arr);//[-50, -1, 0.2, 3, 23, 51, 55]

　　如果想實現倒序排列，則return val2 - val1 即可；

　　sort()方法在接受到函數作為參數後，會把數組的每一個值依次當做函數的參數傳給它，第一次是arr[0]和arr[1],比較完後會把排在後面的那個值作為函數的第一個參數，arr[2]作為第二個參數再傳給函數，依次類推，直到最後一個數組元素。

　　4，  concat()

　　接受一個或多個數組作為參數，把這些參數數組與原數組連接，形成一個新數組並返回。如果不是數組，也會被簡單的連接到一起形成新數組。

1 var arr = [1,2,3];
2 var otherArr = ["hello","world"];
3 console.log(arr.concat(otherArr));//[1,2,3,"hello","world"]

　　5，  slice()

　　接受兩個數字作為參數，返回數組下標在他們之間的元素（不包含下標為第二參數的元素）組成的新數組，該方法不會改變原數組。

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

　　6，  splice()

　　該方法功能強大，有以下三種使用方法：

　　　　A：刪除

           接受兩個數字參數，第一個表示需要被刪除的第一項的下標，第二個表示續保被刪除的元素個數。

　　　　B：插入

           接受3個或多個參數，第一個是插入元素的起始位置，第二個是0，表示不刪除原數組的任何元素，第三個是要被插入的元素，如果有多個元素需要被插入，可以繼續在後面添加其他參數。

　　　　C：替換

           接受3個或多個參數，第一個是要被替換的元素的起始位置，第二個是需要被替換的元素個數，其他的的參數是替換的內容。如果想保持原數組長度不變，則替換內容的個數必須和第二個參數相等。

var arr = [1,2,3,4,5];
arr.splice(0,3);//從第一個元素開始刪除3個元素
console.log(arr);//[4,5]
arr.splice(0,0,1,2,3);//從第一個元素開始刪除0個，並添加1,2,3這3個元素
console.log(arr);[1,2,3,4,5]
arr.splice(2,2,5,5);//從第三個元素開始刪除2個，併在該位置添加兩個5，從結果看就像是用5替換了原數組中的3和4
console.log(arr);//[1,2,5,5,5]

 

　　數組還有很多有用的方法，這裡只列舉了比較常用的一些方法，瞭解詳細請移步MDN的標準內置對象Array；


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

-Advertisement-
Play Games
更多相關文章
  • 博客園美化首頁隨筆展示美化
    博客園美化首頁隨筆展示美化 一.css 二.js 三.缺點 四.要是喜歡我的滑鼠樣式下麵這段css代碼 五,效果展示 滑鼠沒有移動上面 滑鼠移動上面 ...
  • 原生js獲得八種方式,事件操作
    08.17自我總結 關於js 一.原生js獲得八種方式 通過ID獲取（getElementById） 通過name屬性（getElementsByName） 通過標簽名（getElementsByTagName） 通過類名（getElementsByClassName） 通過選擇器獲取一個元素（qu ...
  • 正則replace 回調函數里接收的參數是什麼？
    前言 我們都知道 replace 在做替換處理方面會很常用，通常也是第一個會想到的方法。replace 第一個參數可以傳入 string 或 RegExp，第二個參數可以傳入 string 或 一個回調函數。在能夠傳入回調函數之後，事情就開始變得不簡單了(如果有用過map，filter等函數，你就知 ...
  • JavaScript--關於閉包（closure）
    js代碼在執行前會做的幾件事情： 1.代碼檢測 2.預編譯：在執行代碼之前會對代碼中的函數以及變數提前聲明 並且做一些其他的處理 1.函數在執行前的一瞬間，會生成一個OA（object action）對象 2.函數的形參作為OA對象的屬性名，實參作為AO對象的屬性值 3.分析var聲明，變數名作為A ...
  • 大家好！，今天介紹一個簡單實現全選全不選的方法，希望能對你有幫助哦！
    2019-08-17 ...
  • vue - Error: Can't resolve '@/assets/img/github.svg （vue-cli3.0,無法解析.svg圖片，已解決）
    vue - Error: Can't resolve '@/assets/img/github.svg （vue-cli3.0,無法解析.svg圖片，已解決） ...
  • RGB顏色查詢對照表
    HTML顏色代碼是由16進位的三對數字分別表示紅、綠、藍(#RRGGBB)三種基本色。以紅顏色為例，紅色的代碼是 #FF0000, 代碼組成為’255′ 紅, ‘0’ 綠, 和 ‘0’ 藍。這些顏色可以用於裝飾Web頁面的背景，文字和表格等。 ...
  • JSP 中EL表達式用法詳解
    JSP 中EL表達式用法詳解 EL 全名為Expression Language EL 語法很簡單，它最大的特點就是使用上很方便。接下來介紹EL主要的語法結構： ${sessionScope.user.sex} 所有EL都是以${為起始、以}為結尾的。上述EL範例的意思是：從Session的範圍中， ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類