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
  • 移動開發（一）：使用.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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類