Mga Array ng JavaScript

JavaScript 数组用于在单一变量中存储多个值。

Mga halimbawa

var cars = ["Saab", "Volvo", "BMW"];

亲自试一试

什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？

解决方法就是数组！

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

创建数组

使用数组文本是创建 JavaScript 数组最简单的方法。

语法：

var array-name = [item1, item2, ...];

Mga halimbawa

var cars = ["Saab", "Volvo", "BMW"];

亲自试一试

空格和折行并不重要。声明可横跨多行：

Mga halimbawa

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

亲自试一试

请不要在最后一个元素之后写逗号（比如 "BMW",）。

可能存在跨浏览器兼容性问题。

使用 JavaScript 关键词 new

下面的例子也会创建数组，并为其赋值：

Mga halimbawa

var cars = new Array("Saab", "Volvo", "BMW");

亲自试一试

以上两个例子效果完全一样。无需使用 new Array()。

出于简洁、可读性和执行速度的考虑，请使用第一种方法（数组文本方法）。

访问数组元素

我们通过引用索引号（下标号）来引用某个数组元素。

此语句访问 cars 中的首个元素的值：

var name = cars[0];

此语句修改 cars 中的首个元素：

cars[0] = "Opel";

Mga halimbawa

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

亲自试一试

[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。

更改数组元素

此语句修改了 cars 中第一个元素的值：

cars[0] = "Opel";

Mga halimbawa

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

亲自试一试

Paggalaan ng buong array

Sa pamamagitan ng JavaScript, maaari mong makita ang buong array sa pamamagitan ng pangalan ng array:

Mga halimbawa

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

亲自试一试

Ang array ay isang bagay

Ang array ay isang espesyal na uri ng bagay. Sa JavaScript, gamitin ang array sa array. typeof Ang operator ay ibabalik "object".

Ngunit, ang pinakamabuti sa paglalarawan ng JavaScript array ay sa pamamagitan ng array.

Paggamit ng arraybilangUpang makita ang "elemento" nito. Sa kasong ito,person[0] Ibalik Bill:

Array:

var person = ["Bill", "Gates", 62];

亲自试一试

Ang paggamit ng bagayPangalanUpang makita ang "miyembro" nito. Sa kasong ito,person.firstName Ibalik Bill:

Bagay:

var person = {firstName:"Bill", lastName:"Gates", age:19};

亲自试一试

Ang elemento ng array ay maaaring maging isang bagay

Ang variable ng JavaScript ay maaaring maging isang bagay.

Dahil dito, maaari mong ilagay ang iba't ibang uri ng variable sa parehong array.

Maaari mong ilagay ang mga bagay sa array. Maaari mong ilagay ang mga function sa array. At kahit na maaari mong ilagay ang array sa array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Katangian at mga paraan ng array

Ang tunay na kapangyarihan ng JavaScript array ay nakatago sa mga katangian at mga paraan ng array:

Mga halimbawa

var x = cars.length;   // ang katangian ng haba ay ibabalik ang bilang ng mga elemento
var y = cars.sort();   // ang sort() na paraan ay nagtatala ng array

Aaralain namin ang mga paraan ng array sa susunod na kabanata.

Katangian ng haba

length Ang katangian ay ibabalik ang haba ng array (bilang ng mga elemento ng array).

Mga halimbawa

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // ang haba ng fruits ay 4

亲自试一试

length Ang katangian ay lalong malaki kaysa sa pinakamataas na indeks ng array (index).

Paggalaan ng unang elemento ng array

Mga halimbawa

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

亲自试一试

Paggalaan ng huling elemento ng array

Mga halimbawa

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

亲自试一试

paglalakad ng elemento ng array

Ang pinakamalaking para sa paglalakad ng array ay gumamit ng "for"Iyong paglikha ng:"

Mga halimbawa

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

亲自试一试

Maaari ring gamitin Array.foreach() Function:

Mga halimbawa

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

亲自试一试

pagdagdag ng elemento ng array

Ang pinakamahusay na paraan para sa pagdagdag ng bagong elemento sa array ay push() Mga paraan:

Mga halimbawa

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Idinagdag ng bagong elemento (Lemon) sa fruits

亲自试一试

Maaari ring gamitin length Para sa pagdagdag ng bagong elemento sa array, magagamit ang

Mga halimbawa

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Idinagdag ng bagong elemento (Lemon) sa fruits

亲自试一试

Babala!

Ang pagdagdag ng pinakamataas na indeks ng elemento ay maaring gumawa ng undefined na "butas" sa array:

Mga halimbawa

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Idinagdag ng bagong elemento (Lemon) sa fruits

亲自试一试

Asosyasyon array

Maraming elementong pang-programming ang sumusuporta sa array na may pangalang indeks.

Ang array na may pangalang indeks ay tinatawag na asosyasyon array (o hash).

JavaScript Hindi suportadoang array na may pangalang indeks.

Sa JavaScript, ang array ay puwedeng gamitin lamangnumerong index。

Mga halimbawa

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length ay nagbibigay ng 3
var y = person[0];              // person[0] ay nagbibigay ng "Bill"

亲自试一试

Babala!

Kung gamit mo ang pangalang indeks, magiging standard na bagay ang array na ito sa pamamagitan ng JavaScript.

Pagkatapos, ang lahat ng mga paraan at mga katangian ng array ay magbibigay ng hindi tama na mga resulta.

Mga halimbawa:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length ay magiging 0
var y = person[0];              // person[0] ay magiging undefined

亲自试一试

Ang pagkakaiba ng array at bagay

Sa JavaScriptArrayGamitinnumerong index。

Sa JavaScriptbagayGamitinPangalang index。

Ang array ay isang espesyal na uri ng bagay, na may mga numerong index.

Kung kailangan gamitin ang array, o kung kailangan gamitin ang bagay?

  • Ang JavaScript ay hindi sumusuporta sa asosyatibong array
  • Kung gusto mong magkaroon ng pangalan na elementoteksto (teksto)kaya dapat gamitinbagay。
  • Kung gusto mong magkaroon ng pangalan na elementobilangkaya dapat gamitinArray。

Iwasan ang new Array()

Hindi kailangan gamitin ang in-built array constructor ng JavaScript new Array()。

Gumamit ng [] Sa halip!

Ang dalawang magkakaibang statement na ito ay naglikha ng bagong walang laman na array na may pangalang points:

var points = new Array();         // Mas masamang uri
var points = [];                  // Magandang uri

Ang dalawang magkakaibang statement na ito ay naglikha ng bagong array na may anim na bilang:

var points = new Array(40, 100, 1, 5, 25, 10); // Mas masamang uri
var points = [40, 100, 1, 5, 25, 10];          // Magandang uri

亲自试一试

new Ang keyword ay magiging mas kompleks ang code. Ito ay magiging sanhi din ng mga hindi inaasahang resulta:

var points = new Array(40, 100);  // paglikha ng array na may dalawang elemento (40 at 100)

Ano ang magiging resulta kung alisin ko ang isa sa mga elemento?

var points = new Array(40);       // paglikha ng array na may 40 hindi na nakakalilang mga elemento!!!

亲自试一试

Paano mapansin ang array

Ang karaniwang problema ay: Paano ko malalaman kung ang isang variable ay array?

Ang problema ay ang operator ng JavaScript typeof Nanggagaling sa "object"：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // Nanggagaling sa object

亲自试一试

Ang operator na typeof ay nanggagaling sa "object", dahil ang array ng JavaScript ay isang bagay.

解决方案 1：

为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：

Array.isArray(fruits);     // 返回 true

亲自试一试

此方案的问题在于 ECMAScript 5 不支持老的浏览器。

解决方案 2：

创建您自己的 isArray() 函数以解决此问题：

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

亲自试一试

假如参数为数组，则上面的函数始终返回 true。

或者更准确的解释是：假如对象原型包含单词 "Array" 则返回 true。

解决方案 3：

假如对象由给定的构造器创建，则 instanceof 运算符返回 true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // 返回 true

亲自试一试