แบบจำลอง JavaScript

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

ตัวอย่าง

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

ทดลองด้วยตัวเอง

什么是数组？

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

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

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

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

解决方法就是数组！

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

创建数组

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

语法：

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

ตัวอย่าง

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

ทดลองด้วยตัวเอง

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

ตัวอย่าง

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

ทดลองด้วยตัวเอง

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

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

使用 JavaScript 关键词 new

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

ตัวอย่าง

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

ทดลองด้วยตัวเอง

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

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

访问数组元素

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

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

var name = cars[0];

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

cars[0] = "Opel";

ตัวอย่าง

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

ทดลองด้วยตัวเอง

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

改变数组元素

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

cars[0] = "Opel";

ตัวอย่าง

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

ทดลองด้วยตัวเอง

เข้าถึงแบบรายการทั้งหมด

ผ่าน JavaScript คุณสามารถเข้าถึงแบบรายการทั้งหมดด้วยการอ้างอิงชื่อแบบรายการ:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

แบบรายการเป็นวัตถุ

แบบรายการเป็นชนิดของวัตถุพิเศษ ใน JavaScript คุณสามารถใช้ typeof ตัวอักษรวิเคราะห์จะคืนค่า "object"

แต่ JavaScript Array ยังคงดีที่จะเอามันเป็นแบบรายการเพื่ออธิบาย

แบบรายการใช้ตัวเลขเพื่อเข้าถึง "องค์ประกอบ" ของมัน ในตัวอย่างนี้person[0] คืนค่า Bill：

แบบรายการ：

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

ทดลองด้วยตัวเอง

วัตถุใช้ชื่อเพื่อเข้าถึง "สมาชิก" ของมัน ในตัวอย่างนี้person.firstName คืนค่า Bill：

วัตถุ：

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

ทดลองด้วยตัวเอง

องค์ประกอบแบบรายการสามารถเป็นวัตถุ

ตัวแปร JavaScript สามารถเป็นวัตถุ แบบรายการเป็นชนิดของวัตถุพิเศษ

ดังนั้น คุณสามารถจัดเก็บตัวแปรชนิดต่างๆ ในแบบรายการเดียวกัน

คุณสามารถบันทึกวัตถุในแบบรายการ คุณสามารถบันทึกฟังก์ชันในแบบรายการ คุณแม้กระทั่งบันทึกแบบรายการในแบบรายการ:

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

ตัวแปรและวิธีการแบบรายการ

ความแข็งแกร่งที่แท้จริงของ JavaScript Array ซ่อนอยู่ในตัวแปรและวิธีการของแบบรายการ:

ตัวอย่าง

var x = cars.length;   // ตัวแปรสาย length คืนค่าจำนวนองค์ประกอบ
var y = cars.sort();   // วิธี sort() จะเรียงลำดับแบบรายการ

เราจะเรียนรู้เรื่องวิธีการแบบรายการในบทต่อไป

ตัวแปรสาย length

length ตัวแปรสายคืนค่าความยาวของแบบรายการ (จำนวนองค์ประกอบของแบบรายการ).

ตัวอย่าง

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // ความยาวของ fruits คือ 4

ทดลองด้วยตัวเอง

length ตัวแปรสายตรงข้ามกับค่าที่สูงสุดของดัชนีแบบรายการ (index).

เข้าถึงอนุสาขาแรกของแบบรายการ

ตัวอย่าง

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

ทดลองด้วยตัวเอง

เข้าถึงอนุสาขาสุดท้ายของแบบรายการ

ตัวอย่าง

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

ทดลองด้วยตัวเอง

วนลูปผ่านอนุสาขา

วิธีที่ปลอดภัยที่สุดในการวนลูปแบบรายการคือการใช้ "for" วนลูป:

ตัวอย่าง

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>";
}

ทดลองด้วยตัวเอง

คุณยังสามารถใช้ Array.foreach() ฟังก์ชัน:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

เพิ่มองค์ประกอบใหม่ลงใน array

วิธีที่ดีที่สุดสำหรับเพิ่มองค์ประกอบใหม่ลงใน array คือ push() วิธี:

ตัวอย่าง

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // เพิ่มองค์ประกอบใหม่ลงใน fruits (Lemon)

ทดลองด้วยตัวเอง

ยังสามารถใช้ length เพิ่มองค์ประกอบใหม่เข้า array ด้วย

ตัวอย่าง

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // เพิ่มองค์ประกอบใหม่ลงใน fruits (Lemon)

ทดลองด้วยตัวเอง

คำเตือน！

การเพิ่มองค์ประกอบที่มี index สูงสุดสามารถสร้าง "ช่องว่าง" ไม่มีค่าใน array：

ตัวอย่าง

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // เพิ่มองค์ประกอบใหม่ลงใน fruits (Lemon)

ทดลองด้วยตัวเอง

array ติดตาม

หลายองค์ประกอบการเขียนโปรแกรมสนับสนุน array ด้วย index ชื่อ。

array ที่มี index ชื่อเรียกว่า array ติดตาม (หรือ hash array)。

JavaScript ไม่สนับสนุนarray ด้วย index ชื่อ。

ใน JavaScript แบบฟอร์ม array สามารถใช้ได้เฉพาะดัชนีเลข.

ตัวอย่าง

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length กลับมาด้วย 3
var y = person[0];              // person[0] กลับมาด้วย "Bill"

ทดลองด้วยตัวเอง

คำเตือน！

หากคุณใช้ index ชื่อ JavaScript จะเรียกใช้ array ในรูปแบบของ object มาตรฐาน。

หลังจากนั้น ทุกวิธีและคุณสมบัติของแบบฟอร์ม array จะให้ผลลัพธ์ที่ไม่ถูกต้อง。

ตัวอย่าง：

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length จะกลับค่า 0
var y = person[0];              // person[0] จะกลับค่า undefined

ทดลองด้วยตัวเอง

ความแตกต่างระหว่าง Array และ Object

ใน JavaScriptArrayใช้ดัชนีเลข.

ใน JavaScriptตัวแปรใช้ดัชนีชื่อ.

Array คือประเภทของ Object ที่มีดัชนีเลข

เมื่อใดที่จะใช้ Array และเมื่อใดที่จะใช้ Object?

  • JavaScript ไม่สนับสนุน Array ที่มีชื่อสมาชิก
  • หากต้องการให้ชื่อสมาชิกเป็นตัวแปรของตัวอักษร (ข้อความ)แล้วควรใช้ตัวแปร.
  • หากต้องการให้ชื่อสมาชิกเป็นตัวเลขแล้วควรใช้Array.

หลีกเลี่ยงการใช้ new Array()

ไม่มีความจำเป็นที่จะใช้สร้างตัวแปร Array ที่มีต้นแบบส่วนบุคคลของ JavaScript new Array().

ใช้ [] ใช้แทนนี้!

สองประโยคต่างกันที่สร้าง Array ชื่อ points ที่ว่างเปล่า:

var points = new Array();         // ร้าย
var points = [];                  // ดี

สองประโยคต่างกันที่สร้าง Array ที่มีหกตัวเลขใหม่:

var points = new Array(40, 100, 1, 5, 25, 10); // ร้าย
var points = [40, 100, 1, 5, 25, 10];          // ดี

ทดลองด้วยตัวเอง

new ใช้คำถามรายละเอียดจะทำให้โค้ดที่คุณเขียนที่สามารถใช้งานได้ยากขึ้น มันยังสร้างผลลัพธ์ที่ไม่น่าคาดหมายบางอย่าง:

var points = new Array(40, 100);  // สร้าง Array ที่มีสมาชิกสองตัว (40 และ 100)

หากลบหนึ่งในสมาชิกดังกล่าวจะเป็นอย่างไร?

var points = new Array(40);       // สร้าง Array ที่มีสมาชิก 40 ตัว ทั้งหมดยังไม่มีค่า!

ทดลองด้วยตัวเอง

การระบุ Array

ปัญหาที่พบบ่อยคือ: ฉันจะได้รู้ว่าตัวแปรนี้เป็น Array หรือไม่?

ปัญหาที่อยู่ในประกาศยังคง JavaScript typeof จะกลับค่า "object：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // จะกลับค่า object

ทดลองด้วยตัวเอง

ประเภทประกาศยังคง "object" เพราะ JavaScript Array นับว่าเป็นตัวแปรประเภท object。

แนวทางแก้ปัญหา 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

ทดลองด้วยตัวเอง