อาร์เรย์ JavaScript ถูกนำมาใช้ในการจัดเก็บค่าหลายค่าในตัวแปรเดียว
แสดงอาร์เรย์
ในการกวดวิชานี้เราจะใช้สคริปต์เพื่อแสดงอาร์เรย์ภายใน <p> องค์ประกอบที่มี id="demo" :
ตัวอย่าง
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
บรรทัดแรก (ในสคริปต์) สร้างอาร์เรย์ชื่อรถยนต์
บรรทัดที่สอง "พบ" องค์ประกอบที่มี id="demo" และ "displays" อาร์เรย์ที่ "innerHTML" มัน .;
ลองตัวเอง
สร้างอาร์เรย์และกำหนดค่ามัน
ช่องว่างและการขึ้นบรรทัดใหม่ไม่สำคัญ ประกาศสามารถขยายหลายบรรทัด:
ไม่เคยใส่จุลภาคหลังจากองค์ประกอบสุดท้าย (เช่น "BMW" )
ผลไม่สอดคล้องเบราว์เซอร์
อาร์เรย์คืออะไร?
อาร์เรย์เป็นตัวแปรพิเศษซึ่งสามารถเก็บค่ามากกว่าหนึ่งครั้ง
หากคุณมีรายชื่อของรายการ (รายชื่อรถตัวอย่างเช่น) การจัดเก็บรถยนต์ในตัวแปรเดียวอาจมีลักษณะเช่นนี้
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
แต่สิ่งที่ถ้าคุณต้องการที่จะห่วงผ่านรถยนต์และหาหนึ่งที่เฉพาะเจาะจง? และสิ่งที่ถ้าคุณไม่ได้ 3 คัน แต่ 300?
การแก้ปัญหาคืออาร์เรย์!
อาร์เรย์ที่สามารถเก็บค่าจำนวนมากภายใต้ชื่อเดียวและคุณสามารถเข้าถึงค่าโดยอ้างถึงตัวเลขดัชนี
การสร้างอาร์เรย์
โดยใช้อาร์เรย์ที่แท้จริงเป็นวิธีที่ง่ายที่สุดในการสร้างอาร์เรย์ JavaScript
ไวยากรณ์:
var array-name = [ item1 , item2 , ...];
ตัวอย่าง:
var cars = ["Saab", "Volvo", "BMW"];โดยใช้คำสำคัญที่ใช้ JavaScript ใหม่
ตัวอย่างต่อไปนี้ยังสร้างอาร์เรย์และกำหนดค่าให้กับมัน:
สองตัวอย่างข้างต้นไม่เหมือนกัน ไม่มีความจำเป็นที่จะใช้เป็น new Array()
สำหรับความเรียบง่ายอ่านง่ายและความเร็วในการดำเนินการใช้คนแรก (แถววิธีการตามตัวอักษร)
เข้าองค์ประกอบของอาร์เรย์
คุณอ้างถึงองค์ประกอบอาร์เรย์โดยอ้างถึงหมายเลขดัชนี
คำสั่งนี้จะเข้าสู่มูลค่าขององค์ประกอบแรกในรถยนต์:
var
name = cars[0];
คำสั่งนี้จะปรับเปลี่ยนองค์ประกอบแรกในรถยนต์:
cars[0] = "Opel";
[0] เป็นองค์ประกอบแรกในอาร์เรย์. [1] เป็นครั้งที่สอง ดัชนีอาร์เรย์เริ่มต้นด้วย 0
คุณสามารถมีวัตถุที่แตกต่างในอาร์เรย์
ตัวแปร JavaScript ที่สามารถวัตถุ อาร์เรย์ชนิดพิเศษของวัตถุ
ด้วยเหตุนี้คุณสามารถมีตัวแปรที่แตกต่างกันในอาร์เรย์เดียวกัน
คุณสามารถมีวัตถุในอาร์เรย์ คุณสามารถมีฟังก์ชั่นในอาร์เรย์ คุณสามารถมีอาร์เรย์ในอาร์เรย์:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
อาร์เรย์เป็นวัตถุ
อาร์เรย์เป็นชนิดพิเศษของวัตถุ typeof ผู้ประกอบการใน JavaScript ส่งกลับ "object" สำหรับอาร์เรย์
แต่อาร์เรย์ JavaScript จะมีคำอธิบายที่ดีที่สุดเป็นอาร์เรย์
อาร์เรย์ใช้ numbers ในการเข้าถึงของ "elements" ในตัวอย่างนี้ person[0] ผลตอบแทนที่ John :
วัตถุที่ใช้ชื่อในการเข้าถึง "สมาชิก" ของมัน ในตัวอย่างนี้ person.firstName ผลตอบแทนที่ John :
คุณสมบัติอาร์เรย์และวิธีการ
ความแข็งแกร่งที่แท้จริงของอาร์เรย์จะ JavaScript ในตัวคุณสมบัติอาร์เรย์และวิธีการ:
ตัวอย่าง
var x = cars.length;
// The length property returns the number of elements in cars
var y = cars.sort();
// The sort() method sort cars in alphabetical order
วิธีการอาร์เรย์จะครอบคลุมในบทต่อไป
ความยาวทรัพย์สิน
length ทรัพย์สินของอาร์เรย์ส่งกลับความยาวของอาร์เรย์ (จำนวนขององค์ประกอบอาร์เรย์)
ตัวอย่าง
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
ลองตัวเอง» คุณสมบัติความยาวเสมอหนึ่งมากกว่าดัชนีอาร์เรย์สูงสุด
เพิ่มองค์ประกอบมากมาย
วิธีที่ง่ายที่สุดในการเพิ่มองค์ประกอบใหม่ไปยังอาร์เรย์จะใช้วิธีการผลักดัน:
ตัวอย่าง
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits ลองตัวเอง» องค์ประกอบใหม่นอกจากนี้ยังสามารถเพิ่มไปยังอาร์เรย์ใช้ที่ length คุณสมบัติ:
ตัวอย่าง
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits ลองตัวเอง» คำเตือน!
เพิ่มองค์ประกอบกับดัชนีสูงสามารถสร้างไม่ได้กำหนด "holes" ในอาร์เรย์:
ตัวอย่าง
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits ลองตัวเอง» วนรอบองค์ประกอบมากมาย
วิธีที่ดีที่สุดที่จะห่วงผ่านอาร์เรย์ใช้ "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>";
}
ลองตัวเอง» เชื่อมโยงอาร์เรย์
การเขียนโปรแกรมภาษาหลายอาร์เรย์สนับสนุนกับดัชนีชื่อ
อาร์เรย์กับดัชนีชื่อจะเรียกว่าเชื่อมโยงอาร์เรย์ (หรือแฮช)
JavaScript ไม่สนับสนุนอาร์เรย์กับดัชนีชื่อ
ใน JavaScript อาร์เรย์มักจะใช้ดัชนีเลข
ตัวอย่าง
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John" ลองตัวเอง» คำเตือน !!
ถ้าคุณใช้ดัชนีชื่อ, JavaScript จะ redefine อาร์เรย์ไปยังวัตถุมาตรฐาน
หลังจากนั้นทุกวิธีการที่หลากหลายและคุณสมบัติที่จะให้ผลลัพธ์ที่ไม่ถูกต้อง
ตัวอย่าง:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined ลองตัวเอง» ความแตกต่างระหว่างอาร์เรย์และวัตถุ
ใน JavaScript อาร์เรย์ใช้ดัชนีเลข
ใน JavaScript ใช้วัตถุชื่อดัชนี
อาร์เรย์เป็นชนิดพิเศษของวัตถุกับดัชนีเลข
เมื่อการใช้อาร์เรย์ เมื่อมีการใช้วัตถุ
- JavaScript ไม่สนับสนุนการเชื่อมโยงอาร์เรย์
- คุณควรใช้วัตถุเมื่อคุณต้องการชื่อองค์ประกอบที่จะเป็นสตริง (ข้อความ)
- คุณควรใช้อาร์เรย์เมื่อคุณต้องการชื่อองค์ประกอบที่จะเป็นตัวเลข
หลีกเลี่ยง new Array()
ไม่มีความจำเป็นต้องใช้ในตัวอาร์เรย์สร้าง JavaScript เป็น new Array()
ใช้ [] แทน
ทั้งสองงบที่แตกต่างกันทั้งสร้างอาร์เรย์ว่างใหม่ที่ชื่อว่าจุด:
var points = new Array();
// Bad
var points = [];
// Good
ทั้งสองงบที่แตกต่างกันทั้งสร้างอาร์เรย์ใหม่ที่มีตัวเลข 6:
var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
ลองตัวเอง» new คำหลักที่มีความซับซ้อนเพียงรหัส นอกจากนี้ยังสามารถก่อให้เกิดผลที่ไม่คาดคิดบางอย่าง
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)เกิดอะไรขึ้นถ้าฉันจะลบหนึ่งในองค์ประกอบหรือไม่
var points = new Array(40); // Creates an array with 40 undefined elements !!!!! ลองตัวเอง» วิธีการรับรู้อาร์เรย์
คำถามที่พบบ่อยคือ: ฉันจะรู้ได้อย่างไรว่าตัวแปรเป็นอาร์เรย์?
ปัญหาคือว่าผู้ประกอบการ JavaScript typeof ส่งกลับ "วัตถุ":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object ลองตัวเอง» ผลตอบแทนที่ผู้ประกอบการ typeof คัดค้านเพราะอาร์เรย์ JavaScript เป็นวัตถุ
โซลูชันที่ 1:
เพื่อแก้ปัญหานี้ ECMAScript 5 กำหนดวิธีการใหม่ Array.isArray() :
Array.isArray(fruits); // returns true ลองตัวเอง» ปัญหาเกี่ยวกับการแก้ปัญหานี้ก็คือว่า ECMAScript 5 ไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่า
โซลูชันที่ 2:
เพื่อแก้ปัญหานี้คุณสามารถสร้างตัวเองของคุณ isArray() ฟังก์ชั่น:
function isArray(x) {
return
x.constructor.toString().indexOf("Array") > -1;
} ลองตัวเอง» ฟังก์ชั่นข้างต้นเสมอกลับจริงถ้าอาร์กิวเมนต์เป็นอาร์เรย์
หรืออย่างแม่นยำมากขึ้น: มันกลับจริงถ้าต้นแบบวัตถุที่มีคำว่า "อะเรย์"
วิธีการแก้ปัญหาที่ 3:
instanceof ประกอบการผลตอบแทนจริงถ้าวัตถุถูกสร้างขึ้นโดยคอนสตรัคได้รับ:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »