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

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

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

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

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

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

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

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

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

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

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

• 簡潔方式-直接示例化，采用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");

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

數(shù)組索引

數(shù)組沒有名稱/值對。而是使用從0開始的整數(shù)值對它們進行索引。

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

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

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

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

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

訪問數(shù)組中的元素

通過引用方括號中的元素的索引號，可以訪問JavaScript數(shù)組中的元素。

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

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

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

嘗試訪問數(shù)組中不存在的元素，將返回undefined。

fruits[7];// 返回 undefined

可以通過引用陣列名稱來訪問整個陣列。

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

數(shù)組 length 屬性

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

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

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

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

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

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

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

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

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

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

fruits[6] = "Strawberry";

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

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

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

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

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

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

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

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

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

遍歷數(shù)組

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

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

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

//遍歷數(shù)組的長度
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)來遍歷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ù)組中元素的索引號，但它通常是一種更簡單、更簡潔的遍歷數(shù)組的方法。

多維數(shù)組

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

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

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

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

• 對于二維數(shù)組，您需要兩個索引來選擇元素

• 對于三維數(shù)組，您需要三個索引來選擇元素

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

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

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

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屬性獲取行和列的大?。?/p>

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ù)組是對象

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

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

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

盡量避免使用new Array()

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

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

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

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

以下兩個不同的語句創(chuàng)建一個包含5個數(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)建一個包含兩個元素(10和25)的數(shù)組
let scores = new Array(10);  // 創(chuàng)建一個包含10個未定義元素值的數(shù)組

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

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

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

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

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

如果對象是由給定的構(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ù)返回數(shù)組

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

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

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