JavaScript Array(數(shù)組) 對(duì)象

JavaScript中的數(shù)組是一種全局對(duì)象，用于在單個(gè)變量中存儲(chǔ)多個(gè)值。

數(shù)組可以包含任何數(shù)據(jù)類(lèi)型，包括字符串，數(shù)字，對(duì)象，函數(shù)，甚至其他數(shù)組。

假設(shè)您要在JavaScript代碼中存儲(chǔ)城市名稱(chēng)。將城市名稱(chēng)一一存儲(chǔ)在變量中可能看起來(lái)像這樣：

  let city1 = "New Delhi";
  let city2 = "Mumbai";
  let city3 = "Jaipur";

但是，如果您需要將一個(gè)國(guó)家的城市名稱(chēng)存儲(chǔ)在變量中，那么這會(huì)發(fā)生的不僅僅是三個(gè)，可能會(huì)是一百個(gè)。

同時(shí)使用這么多變量并跟蹤所有變量將是非常困難的任務(wù)。

數(shù)組通過(guò)提供用于在單個(gè)變量中存儲(chǔ)多個(gè)值或一組值的有序結(jié)構(gòu)來(lái)解決此問(wèn)題。

創(chuàng)建數(shù)組

有兩種方法可以在JavaScript中創(chuàng)建數(shù)組：

• 字面量-隱式創(chuàng)建，其使用方括號(hào)：[]

• 簡(jiǎn)潔方式-直接示例化，采用new關(guān)鍵字

讓我們演示如何使用初始化的數(shù)組常量創(chuàng)建fruits數(shù)組[]：

let fruits = ["Apple", "Mango", "Banana", "Orange"];

聲明可以跨越多行：

let fruits = [
  "Apple",
  "Mango",
  "Banana",
  "Orange"
];

現(xiàn)在這是使用數(shù)組構(gòu)造函數(shù)創(chuàng)建的相同數(shù)據(jù)，該數(shù)據(jù)用初始化new Array()：

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

這兩種方法都會(huì)創(chuàng)建一個(gè)數(shù)組。但是，字面量-隱式創(chuàng)建（方括號(hào)[]）方法更為常見(jiàn)和首選，因?yàn)?strong>new Array()構(gòu)造函數(shù)方法可能會(huì)出現(xiàn)不一致和意外的結(jié)果。

數(shù)組索引

數(shù)組沒(méi)有名稱(chēng)/值對(duì)。而是使用從0開(kāi)始的整數(shù)值對(duì)它們進(jìn)行索引。

這是賦值給fruits的示例數(shù)組：

  let fruits = ["Apple", "Mango", "Banana", "Orange"];

這是fruits數(shù)組中每個(gè)元素的索引方式的分解：

數(shù)組中的第一個(gè)元素是“ Apple”，索引值為0。

最后一個(gè)元素是“Orange”，索引值為3。

訪(fǎng)問(wèn)數(shù)組中的元素

通過(guò)引用方括號(hào)中的元素的索引號(hào)，可以訪(fǎng)問(wèn)JavaScript數(shù)組中的元素。

let fruits = ["Apple", "Mango", "Banana", "Orange"];

fruits[0];// 返回 "Apple"
fruits[2];// 返回 "Banana"

JavaScript數(shù)組的索引為零：數(shù)組的第一個(gè)元素的索引為0，第二個(gè)元素的索引為1，依此類(lèi)推。

嘗試訪(fǎng)問(wèn)數(shù)組中不存在的元素，將返回undefined。

fruits[7];// 返回 undefined

可以通過(guò)引用陣列名稱(chēng)來(lái)訪(fǎng)問(wèn)整個(gè)陣列。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

數(shù)組 length 屬性

我們可以使用該length屬性找出數(shù)組中有多少個(gè)元素。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length;   // 返回 4

最后一個(gè)元素的索引等于數(shù)組的length屬性值減去1。

此示例使用length屬性顯示最后一個(gè)元素的值：

let fruits = ["Apple", "Mango", "Banana", "Orange"];

let lastIndex = fruits.length - 1;
fruits[lastIndex];

向數(shù)組中添加元素

在fruits變量中，我們有四個(gè)元素，其中包括從0到3的索引。如果要向數(shù)組添加新元素，可以為下一個(gè)索引分配值。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";

    如果我們添加一個(gè)元素并意外地跳過(guò)一個(gè)索引，它將在數(shù)組中創(chuàng)建值為空('')的元素。

fruits[6] = "Strawberry";

使用push()方法可以避免類(lèi)似的問(wèn)題，該方法將一個(gè)元素添加到數(shù)組的末尾。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.push("Strawberry");

也可以使用length屬性將新元素添加到數(shù)組。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[fruits.length] = "Beer";

修改數(shù)組中的元素

通過(guò)使用賦值運(yùn)算符分配新值，我們可以覆蓋數(shù)組中的任何值。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

數(shù)組通常用于將相似數(shù)據(jù)類(lèi)型的列表組合在一起，但是從技術(shù)上講，它們可以包含任何值或值的混合。

let myArray = [5, 22, "Arrow", "Bone", true, new Date()];

遍歷數(shù)組

我們可以利用for和length屬性來(lái)循環(huán)遍歷整個(gè)數(shù)組。

在此示例中，我們創(chuàng)建一個(gè)水果數(shù)組，并將每個(gè)索引號(hào)以及每個(gè)值打印到文檔中：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let txt = "";

//遍歷數(shù)組的長(zhǎng)度
for (let i = 0; i < fruits.length; i++) {
txt += i + " = " + fruits[i] + "<br>";
}

我們還可以使用以下Array.forEach()方法：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");

fruits.forEach(function(element) {
result.innerHTML += element + "<br>";
});

我們還可以使用for...of循環(huán)來(lái)遍歷js數(shù)組，這是JavaScript的新功能：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");

for (let x of fruits) {
result.innerHTML += x;
}

for...of循環(huán)不檢索數(shù)組中元素的索引號(hào)，但它通常是一種更簡(jiǎn)單、更簡(jiǎn)潔的遍歷數(shù)組的方法。

多維數(shù)組

多維數(shù)組是包含一個(gè)或多個(gè)數(shù)組的數(shù)組。

  let points = [
   [35, 28, 29, 31],
   [33, 24, 25, 29]
  ];

JavaScript可以理解深度為2、3、4、5或更多級(jí)別的多維數(shù)組。但是，對(duì)于大多數(shù)人而言，難以管理超過(guò)三個(gè)級(jí)別的陣列。

數(shù)組的維數(shù)指示選擇元素所需的索引數(shù)：

• 對(duì)于二維數(shù)組，您需要兩個(gè)索引來(lái)選擇元素

• 對(duì)于三維數(shù)組，您需要三個(gè)索引來(lái)選擇元素

二維數(shù)組可以看作是一個(gè)表，其中第一個(gè)[ ]是行，第二個(gè)[ ]是列。

points[0][1];   // 返回 28
points[1][0];   // 返回 33

在此示例中，我們創(chuàng)建一個(gè)二維數(shù)組，并將每個(gè)索引號(hào)以及每個(gè)值打印到文檔中：

let points = [ [35, 28, 29, 31], [33, 24, 25, 29] ];

let row;
let col;

for (row = 0; row < 2; row++) {
   for (col = 0; col < 4; col++) {
  document.write(row, col, points[row][col]);
   }
}

當(dāng)然,您也可以使用length屬性獲取行和列的大小：

let points = [
   [10, 12, 14, 16, 18],
   [20, 22, 24, 26],
   [30, 32, 34],
   [32, 34]
];

points.length;// 返回 4 (Total rows)
points[0].length;// 返回 5
points[1].length;// 返回 4
points[2].length;// 返回 3
points[3].length;// 返回 2

大多數(shù)情況下，2維數(shù)組就足夠了，盡管有些地方可以使用3維數(shù)組。

JavaScript數(shù)組是對(duì)象

在JavaScript中，數(shù)組是一種特殊的對(duì)象。

typeofJavaScript中的運(yùn)算符為數(shù)組返回“Object”。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits;   // 返回 "object"

盡量避免使用new Array()

無(wú)需使用數(shù)組構(gòu)造函數(shù)new Array()。

相反，應(yīng)該盡量使用隱式創(chuàng)建的方式創(chuàng)建數(shù)組，也就是，直接使用方括號(hào)[]方法，這種方法更常見(jiàn)，也更受歡迎。

以下兩個(gè)不同的語(yǔ)句創(chuàng)建一個(gè)名為scores的新的空數(shù)組：

  let scores = new Array();  // 不建議這種方法
  let scores = [];     // 推薦方式

以下兩個(gè)不同的語(yǔ)句創(chuàng)建一個(gè)包含5個(gè)數(shù)字的新數(shù)組：

let scores = new Array(2, 5, 10, 28, 10); // 不建議這種方法
let scores = [2, 5, 10, 28, 10];  // 推薦方式

new Array()構(gòu)造方法可能有不一致之處，也可以產(chǎn)生一些意想不到的結(jié)果：

let scores = new Array(10, 25);  // 創(chuàng)建一個(gè)包含兩個(gè)元素(10和25)的數(shù)組
let scores = new Array(10);  // 創(chuàng)建一個(gè)包含10個(gè)未定義元素值的數(shù)組

如何判斷變量是否為數(shù)組 - Array.isArray()

如您所知，JavaScript typeof運(yùn)算符為數(shù)組返回“Object”。

一個(gè)常見(jiàn)的問(wèn)題是：如何知道變量是否為數(shù)組？

為了解決此問(wèn)題，ECMAScript 5定義了一種新方法Array.isArray()：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

如果對(duì)象是由給定的構(gòu)造函數(shù)創(chuàng)建的，那么還可以使用instanceof操作符返回true：

let fruits = ["Apple", "Mango", "Banana", "Orange"];

if (fruits instanceof Array) {
   // statements to execute
}

將數(shù)組傳遞給函數(shù)

在下面的示例中，我們將數(shù)組傳遞給函數(shù)：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);

function myFunc(arg) {
  for (let elem of arg) {
  document.write(elem, "<br>");
  }
}

從函數(shù)返回?cái)?shù)組

在下面的示例中，我們將從函數(shù)返回一個(gè)數(shù)組：

function myFunc() {
  let fruits = ["Apple", "Mango", "Banana", "Orange"];
  return fruits;
}

let myArray = myFunc();
document.write(myArray);