Js基礎-複雜數據類型之數組

来源:https://www.cnblogs.com/haloujava/archive/2023/09/12/17696462.html
-Advertisement-
Play Games

存儲相關 Vuex 和本地存儲（如localStorage）以及 cookie 存儲（如 document.cookie）之間有一些關係，但它們是不同的概念，用於不同的目的。 Vuex： Vuex 是 Vue.js 的官方狀態管理庫，用於在 Vue.js 應用程式中管理應用程式的全局狀態。 Vuex ...


定義

數組，就是一組相關的值存儲在一塊連續的空間內

一般的高級編程語言都有數組這種數據結構

語法

數組有三種定義方式，如下

  • 使用中括弧直接定義數組

    var array = [12,13,14,15,16,17]

  • 使用 new Array() 方法 傳入數組元素

    var array = new Array('A', 'B','C','D','E')

  • 使用 new Array() 方法，傳入長度， 這種不能賦值，只能指定長度

    
// 這種方式只能定義數組的長度是4（容納4個元素）， 但並沒有給4個元素賦初值， 這4個元素的初始值都是 undefined
var array = new Array(4);

JS 的數組中的數據可以不是同一種數據類型

<script>
    var array = ["A", 12, true];
    console.log(array);
</script>

數組的長度用 length屬性表示

<script>
    var array = ["A", 12, true];
    console.log(array.length);
</script>

取值

數組的取值需要有以下幾點註意

  • 數組定義了下標， 傳入下標就可以得到某個值, 值得註意的是， 數組的下標從0開始計數

Untitled.png

<script>
      var array = ["A", 12, true];
      console.log(array[0]);
</script>
  • 如果我們傳入了一個超過數組長度的下標， 則會返回 undefined
<script>
      var array = ["A", 12, true];
      console.log(array[3]);
    </script>

改值

如果我們要修改數組當中的某個元素， 我們只需要 用如下語法

<script>      
	var array = ["A", 12, true];      
  console.log(array);      
  array[0] = "B";// 修改數組中的值      
  console.log(array);
</script>

如果傳入的數組下標對應的位置本身沒有值， 則相當於新增元素

<script>      
	var array = ["A", 12, true];      
	console.log(array);// 如果更改了不存在的項，則相當於在此數組下標下新增項目      
  array[5] = "B";      
  console.log(array);
</script>

數組作為一種複雜的數據結構，還定義了很多方法幫助我們存取值

方法 功能
push 在尾部插入新項, 可以一次插入多個值
pop 彈出尾部數據（在數組中傷處）
unshift 在頭部插入新元素
shift 在頭部刪除

下麵是這些元素的示例

push 方法

<script>
      var array = ["ABC", "EFG", "HIJ"];

      array.push("EE");
      array.push("CC", "DD");
      console.log(array);
    </script>

pop 彈出尾方法

<script>
      var array = ["ABC", "EFG", "HIJ"];
      console.log(array.pop());
      console.log("after pop array：" + array);
    </script>

unshift 數組頭部插入

<script>
      var array = ["ABC", "EFG", "HIJ"];
      array.unshift("kaka");
      console.log("array:" + array);
    </script>

<script>
  var array = ["ABC", "EFG", "HIJ"];
  console.log(array.shift());
  console.log("array:" + array);
</script>

數組常用方法

在取值的小節中，我們已經介紹過4個常用方法；事實上數組的常用方法遠不止這些，下麵我們來補充一些

splice 方法

常用於替換、插入、刪除現有數組元素

  • 用於替換數組中的指定項

    <script>
      var array = ["A", "B", "C", "D", "E", "F", "G", "H"];
      // 第一個參數 2 表示從數組下標 2 開始替換（包含數組下標2）
      // 第二個參數 4 表示連續替換4項， 如果長度大於 字元串剩餘長度， 則取剩餘的全部
      // 從第三個參數開始就是要替換成的內容
      // 返回值 resultArray 表示 已經被替換掉的元素組成的數組，在本示例中就是  ['C', 'D', 'E', 'F']
			var resultArray = array.splice(2, 4, "hello", "world", "akd");      
			console.log(array);
    </script>

  • 此方法還可以在指定位置插入元素

    <script>
	  var array = ["A", "B", "C", "D", "E", "F", "G", "H"];
    // 第二個參數為 0 ，表示連續替換 0項， 也就是 從 數組下標2開始連續插入 三個元素
	  var resultArray = array.splice(2, 0, "hello", "world", "akd");
	  console.log(array);
	  console.log(resultArray);
</script>

  • 刪除元素

    <script>
      var array = ["A", "B", "C", "D", "E", "F", "G", "H"];
      // 沒有指定的要替換的元素，也就是意味著要刪除
      var resultArray = array.splice(2, 3);
      console.log(array);
      console.log(resultArray);
  </script>

slice 方法

常用於 從原有數組截取到一個子數組

  • slice(index1, index2) 方法 截取的子數組 從 下標 為 index1 開始， 到下標 index2 （不包含index2） 結束， 並且不會更改原有數組

    <script>
    var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    // 輸出 ['B', 'C', 'D'] 
    var arraySlice = array.slice(1, 4);
    console.log("arraySlice:", arraySlice);
		// 原數組不會改變 ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    console.log("array:", array);
</script>

  • slice 如果不提供第二個參數（index2）, 則表示從指定索引位置開始到數組結束的所有元素都會截取成為子數組

    <script>
    var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var arraySplit = array.slice(1);
    // 輸出 ['B', 'C', 'D', 'E', 'F', 'G']
    console.log("arraySplit:", arraySplit);
    // 輸出 ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    console.log("array:", array);
</script>

  • slice 方法的參數允許為負數， 表示數組的倒數第幾項（從右向左 -1 開始 -N結束）

    <script>
        var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
        var arraySplit = array.slice(-3, -1);
        // 輸出 ['E', 'F']
        console.log("arraySplit:", arraySplit);
        console.log("array:", array);
    </script>

concat() 方法

合併多個數組，輸出為一個， 並且 concat 數組不會改變原數組

<script>
    var array1 = ['A', 'B', 'C'];
    var array2 = ['D', 'E', 'F'];
    var array3 = ['G', 'H', 'I'];

    var resultArray = array1.concat(array2, array3);
    console.log("resultArray:",resultArray);
    console.log("原有array1:",array1);
  </script>

reverse() 方法

將一個數組的順序取反

<script>
    var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var arraySplit = array.reverse();
    // 處處 ['G', 'F', 'E', 'D', 'C', 'B', 'A']
    console.log("arraySplit:", arraySplit);
    console.log("array:", array);
</script>

indexOf() 方法

給定一個數組元素，搜索下標，如果元素不存在，則返回-1

<script>
    var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var index = array.indexOf('C');
    // 輸出索引 2
    console.log("index:", index);
</script>

includes()方法

給定一個數組元素，判斷數組中是否包含此值，返回布爾類型值

<script>
    var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var exists = array.includes('C');
    // 輸出 true
    console.log("exists:", exists);
</script>

排序

數組排序，就是將一個無序的數組變成一個有序數組， 例如 [2， 1， 3] 排序過後 變成 [1, 2, 3]

數組自帶排序的方法， 這個方法就是 sort函數。

sort 排序就是將所有數組元素轉換成字元串，並按照他們的UTF-16碼元值升序排序

sort 函數是在原有基礎上做的排序， 所以會影響到原數組的順序

基本的使用

<script>
    var array = [9,2,3,1,8,7,6,5,4];
    array.sort();
    console.log("array:", array);
</script>

sort 也可以傳入以 函數作為參數（函數作為重要的知識，我們會在後面講到）

傳入函數的作用是影響排序規則， 排序無非由兩種 升序（[1,2,3] ） 和 降序 （[3, 2, 1]）

<script>
    var array = [9,2,3,1,8,7,6,5,4];

    
    // 下麵的函數更加執行結果 如果 大於 0 則 升序排列， 如果 小於 0 ， 則降序排列
    // function(a, b){
    //    return b-a;
    //}
    var sortArray = array.sort(function(a, b){
        return b-a;
    });
    console.log("array:", array);
</script>

如果數組包含空槽（即某些地方沒有填值被undefined占據）， 排序後所有的空槽都會被移動到數組尾部

<script>
    var array = [9,2,3,1,8,7,6,5,undefined,4,undefined];
    array.sort();
    // 輸出 [1, 2, 3, 4, 5, 6, 7, 8, 9, undefined, undefined]
    console.log(array);
</script>

如果既希望排序後的結果是一個新數組，並不影響原來的數組，可以使用 toSorted方法， toSorted方法其他的特性和 sort 方法一樣

<script>
    var array = [9,2,3,1,8,7,6,5,4];
    var sortedArray = array.toSorted();
    console.log('sortedArray:', sortedArray);
    console.log('array:', array);
</script>

關於數組排序，還有很多相關的演算法，比如冒泡排序， 快速排序， 這些排序演算法因為效率比較低，在工作中很難應用，所以這部分內容我們本節就不涉及了，如果有緣，以後可能會水一篇

遍歷

數組遍歷 就是將數組 從頭到尾迴圈一遍

數組遍歷有很多現實意義，舉個例子，遍歷一個數值型數組，找到當中的最大值。

<script>
    // 生成一個隨機數組
    var array = [];
    // 生成一個隨機數組
    for(var i = 0 ; i < 10 ; i++) {
        array.push(Math.floor(Math.random(10) * 10));
    }
    console.log(array);

    // 遍歷找到最大值
    var maxValue = null;
    for(var i= 0; i < array.length ; i++) {
        if(maxValue == null || array[i] > maxValue) {
            maxValue = array[i];
        } 
    }
    console.log('最大值為:', maxValue)
  </script>

數組類型檢測

如果用 typeof 去檢測數組，則返回的結果是object

實際工作中，可以用 Array.isArray() 方法來檢測一個變數是否是數組

<script>
      var array = [12, 3, 3, 3];
      var flag1 = Array.isArray(array);
      var flag2 = typeof array;
			// true object
      console.log(flag1, flag2);

      var array = [];
			// true
      console.log(Array.isArray(array));
    </script>

數組和字元串轉換

一個字元串可以調用 split 方法轉換成數組

一個數組可以使用 join 方法轉換成字元串

字元串轉數組

字元串的 split 函數傳入 分隔符， 就可以分割一個字元串為數組

<script>
    var str = 'ABCDEFG';
    console.log(str.split(''));

    var str1 = 'A-B-C-D-E-F-G';
    console.log(str1.split('-'));
</script

數組轉字元串

數組的 join 函數傳入 連接符， 就可以將一個數組轉換成字元串

<script>

      var array = ['A', 'B', 'C', 'D', "E"];
      console.log(array.join('-'));
      console.log(array.join(''));
      // 預設以逗號分隔
      console.log(array.join());

</script>

二維數組

以普通數據類型作為數組元素的叫一維數組，那麼以數組作為元素的就叫做 二維數組

<script>
      // 以下是一個二維數組的定義
      var array = [
          ['A','B', 'C'],
          ['D','E', 'F']
      ];
      console.log(array)
</script>

查看上面代碼的輸出結果

Untitled 1.png

取值

如上面那個例子，我們想取出列印出元素’F‘應該怎麼做？

第一步，我們需要找到 F 元素所在內層數組在外層的數組的下標值， 通過觀察為 1

第二步，我們需要找到 F 元素在內層數組 的下標值， 通過觀察為 2

所以列印出 E 元素的代碼如下

<script>
      // 以下是一個二維數組的定義
      var array = [
          ['A','B', 'C'],
          ['D','E', 'F']
      ];
      console.log(array)
</script>

遍歷

由數組定義的例子可以看到，二維數組就是數組嵌套數組的形式

那麼，如果我們想把二維數組最內層的元素逐個遍歷出來， 就需要遍歷兩次，外層數組遍歷一次，內層的數組也要逐個遍歷。

<script>
    var array = [
        ['A','B', 'C'],
        ['D','E', 'F']
    ];

    for(var i = 0 ; i < array.length ; i++) {
        for(var j = 0 ; j < array[i].length ; j++) {
            console.log(array[i][j])
        }
    }

</script>

既然有二維數組，肯定有三維數組、四維數組 等等，我們統稱為多維數組。

事實上，多維數組在工作中不太能用的到，既然學會了二維數組，那就等於學會了多維數組。

總結

此篇水文，我們介紹瞭如下內容， 這裡再啰嗦下

  1. 數組的定義和取值
  2. 數組的常用方法
  3. 數組的遍歷
  4. 數組的排序
  5. 二維數組
請關於一下啦^_^

微信公眾號


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

-Advertisement-
Play Games
更多相關文章
  • Apache DolphinScheduler 如何實現自動化打包+單機/集群部署？
    Apache DolphinScheduler 是一款開源的分散式任務調度系統，旨在幫助用戶實現複雜任務的自動化調度和管理。DolphinScheduler 支持多種任務類型，可以在單機或集群環境下運行。下麵將介紹如何實現 DolphinScheduler 的自動化打包和單機/集群部署。 自動化打包 ...
  • MySQL表設計實踐
    1、表名：應體現具體業務含義，全部小寫，多個單詞下劃線分割。 2、欄位：欄位名應體現具體業務含義，全部小寫、多個單詞下劃線分割，選擇合適的數據類型，並且加註釋 每個表應具有以下公共欄位： 欄位名 欄位類型 欄位說明 id int(11)/bigint(20) 自增主鍵id create_user_i ...
  • GaussDB技術解讀系列丨運維自動駕駛探索
    在第14屆中國資料庫技術大會（DTCC2023）上，華為雲資料庫運維研發總監李東詳細解讀了GaussDB運維繫統自動駕駛探索和實踐。 ...
  • MySQL子查詢相關使用
    SQL文件鏈接在最下麵 MySQL子查詢相關使用 子查詢的實質：一個 select 語句的查詢結果能夠作為另一個語句的輸入值。子查詢不僅可用於 where 子句中，還能夠用於 from 子句中，此時子查詢的結果將作為一個臨時表（temporary table）來使用。 一、 單行子查詢 1、 查詢“ ...
  • iOS MDM（監管鎖）入門
    引言 Apple MDM (Mobile Device Management) 字面理解就是一種管理移動設備的方式，覆蓋 iOS 5 及更高版本的 iPhone/iPod touch/iPad、Mac OS X 10.7 及更高版本的 Mac、TVOS 9 及更高版本的 Apple TV，標題中的 ...
  • 在Vue2和Vue3中JSX的使用集錦
    Vue2安裝JSX支持 有時候，我們使用渲染函數（render function）來抽象組件，而渲染函數使用Vue的h函數來編寫Dom元素相對template語法差別較大，體驗不佳，這個時候就派 JSX 上場了。然而在Vue3中預設是帶了JSX支持的，而在 Vue2 中使用 JSX，需要安裝並使用 ...
  • 全棧工程師必須要掌握的前端CSS技能
    作為一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師，在一些小型項目或者初創公... ...
  • 記錄--妙用computed攔截v-model，面試管都誇我細
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 如何避免寫出屎山，優雅的封裝組件，在面試官面前大大加分，從這篇文章開始！ 保持單向數據流 大家都知道vue是單項數據流的，子組件不能直接修改父組件傳過來的props，但是在我們封裝組件使用v-model時，不小心就會打破單行數據流的規則， ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類