數組的介紹及使用

時間 2020-08-22

標籤數組介紹使用简体版

原文原文鏈接

JavaScript 中的數組經常使用於在單個變量中存儲多個值。數組就是一組數據的集合，在內存中表現爲一段連續的內存地址(保存在堆內存)。建立數組的目的就是爲了保存更多的數據。html

數組概念和語法

概念：數組是一個特殊變量，一次能夠容納多個值。數組

特色：有順序，有長度。瀏覽器

做用：使用單獨的變量名來存儲一系列的值。學習

語法以下所示：spa

var array_name = [item, item2, item3, ...];

其中 array_name 就是數組名，其實就是變量名，而數組中的元素所有是包圍在中括號 [] 內，元素中間使用逗號分隔。數組中的元素能夠是任意類型，類型能夠是不一樣的。code

建立數組

在 JavaScript 語言中，要建立一個數組，最經常使用的方式，咱們可使用字面量來建立。htm

示例：

建立一個簡單的數組，數組名爲：blog

var array1 = ["HTML", "VUE", "JAVASCRIPT", "CSS"];

代碼中的空格和換行符並非重要的，聲明多個值時咱們還能夠跨越多行：索引

var array2 = [
    "HTML",
    "VUE",
    "JAVASCRIPT",
    "CSS"
];

除此以外，咱們還可使用關鍵字 new 來建立數組：ip

var array3 = new Array();
arrs[0] = 1;
arrs[1] = 2;
arrs[2] = 3;
console.log(array3);
// 輸出：[ 1, 2, 3 ]

這種方式還有另外一種簡潔寫法，就是直接在 Array 後面的小括號中添加值：

var array4 = new Array("xkd", "summer", "jack");
console.log(array4);

// 輸出：[ 'xkd', 'summer', 'jack' ]

訪問數組

咱們能夠經過數組名以及數組下標訪問數組中的元素。由於數組是有序的，所以它就會相對應有自身的序號，而這個序號就是每一個元素對應的下標（也叫作索引），數組的下標是從零開始，到數組長度減一結束。好比說數組中第一個元素的索引爲0、第二個爲一、依次類推。

示例：

訪問數組 name 中索引爲 0 的元素的值，並輸出這個值：

var username = ["Iven", "Eric", "Tony", "Hter", "John"];

console.log("數組下標爲0的字符輸出結果爲：" + username[0]);   

// 輸出：Iven

訪問數組中的最後一個元素，並輸出這個值：

var name = ["Iven", "Eric", "Tony", "Hter", "John"];
var last = name[name.length - 1];
console.log(last);

// 輸出：John

數組長度

數組與字符串同樣也有長度，咱們能夠經過 length 屬性獲取數組的長度，數組的長度是指數組中存放的元素個數。而且數組的長度始終大於數組的最高數索引。

示例：

分別定義一個字符串和數組，而後輸出這個字符串和數組的長度：

var arr1 = '新版俠課島即將推出';
console.log("長度爲：" + arr1.length);       
// 長度爲：9    

var arr2 = ["Iven", "Eric", "Tony", "Hter", "John"];
console.log("長度爲：" + arr2.length);     
// 長度爲：5

數組取值和賦值

除了能夠獲取數組的長度，咱們還能夠經過下標索引獲取元素的值，格式爲 數組名[下標]。

示例：

例如咱們定義一個數組 arr，而後獲取索引爲 0、3 的位置所對應的值：

var arr = ["王語嫣", "段譽", "蕭峯", "虛竹"];
console.log(arr[0]);    // 王語嫣 
console.log(arr[3]);    // 虛竹

由於下標的範圍是 0 到數組長度減一（arr.length-1），因此若是下標不存在，則會返回 undefined。

示例：

例如上述的數組 arr 下標最大值爲 3，那麼咱們獲取下標爲 4 的元素的值，則輸出undefined：

console.log(arr[4]);    // undefined

咱們還能夠經過 數組名[下標] = 值 的格式給數組賦值，而若是指定下標已經有對應的值，則會把原來的值覆蓋。

示例：

例如數組 arr2 中，下標爲 5 的元素爲「殷離」，此時咱們使用 arr2[5] = "金毛獅王"，則會覆蓋「殷離」的值：

var arr2 = ["周芷若", "趙敏", "張無忌", "宋青書", "滅絕師太", "殷離"];
arr2[5] = "金毛獅王";  // 把 "殷離" 替代了"金毛獅王"

而若是元組中沒有指定下標元素，則會給數組新增一個元素值：

arr2[6] = "楊不悔";  // 給數組新增長了一個 "楊不悔" 的值
console.log(arr2);

在瀏覽器中，執行代碼，輸出改變後的數組arr2：

遍歷數組元素

以前其實咱們學習循環的時候就講過數組的遍歷，遍歷數組最經常使用的就是 for 循環。

示例：

首先定義一個數組，而後經過 for 循環將數組以無序列表的形式遍歷輸出：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_俠課島(9xkd.com)</title>
</head>
<body>
<div id = "xkd">
</div>
<script>
  var lst = ["Iven", "Eric", "Tony", "Hter", "John"];
  name = "<ul>";
  for(i=0; i<lst.length; i++){
    name += "<li>" + lst[i] + "</li>";
  }
  name += "</ul>";
  document.getElementById("xkd").innerHTML = name;
</script>
</body>   
</html>

在瀏覽器中打開：