Javaวิธีการสคริปต์อาร์เรย์: สร้างด้วยตัวอย่าง

อาร์เรย์คืออะไรใน Javaสคริปต์?

อาร์เรย์เป็นวัตถุที่สามารถจัดเก็บ ของสะสม. Arrays become really useful when you need to store large amounts of data of the same type. Suppose you want to store details of 500 employees. If you are using variables, you will have to create 500 variables, whereas you can do the same with a single array. You can access the items in an array by referring to its หมายเลขดัชนีและดัชนีขององค์ประกอบแรกของอาร์เรย์คือศูนย์

แตกต่างจากอาร์เรย์ในภาษาที่มีการกำหนดประเภทข้อมูลอย่างเคร่งครัด ...แตกต่างจากอาร์เรย์ในภาษาที่มีการกำหนดประเภทข้อมูลอย่างเคร่งครัด ในภาษาที่มีการกำหนดประเภท JavaScript array is dynamic. Its length grows automatically when a new element is assigned, and a single array may hold strings, numbers, booleans, objects, and even other arrays at the same time. This flexibility makes arrays the default container for list data in browser scripts and server-side code alike.

วิธีการสร้างอาร์เรย์ใน Javaต้นฉบับ

คุณสามารถสร้างอาร์เรย์ใน Javaต้นฉบับ ตามที่ระบุด้านล่าง

var students = ["John", "Ann", "Kevin"];

ที่นี่ คุณกำลังเริ่มต้นอาร์เรย์ของคุณตามเวลาและเวลาที่ถูกสร้างขึ้นด้วยค่า “John”, “Ann” และ “Kevin” ดัชนีของ “จอห์น”, “แอน” และ “เควิน” คือ 0, 1 และ 2 ตามลำดับ หากคุณต้องการเพิ่มองค์ประกอบเพิ่มเติมให้กับอาร์เรย์ของนักเรียน คุณสามารถทำได้ดังนี้:

students[3] = "Emma";
students[4] = "Rose";

คุณสามารถสร้างอาร์เรย์โดยใช้ตัวสร้างอาร์เรย์ได้ดังนี้:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

How to Access and Modify Array Elements

องค์ประกอบแต่ละตัวจะอยู่ในตำแหน่งที่มีหมายเลขกำกับ สัญลักษณ์วงเล็บเหลี่ยมใช้สำหรับอ่านค่า กำหนดค่าใหม่ หรือเพิ่มรายการใหม่เมื่อดัชนีเท่ากับความยาวปัจจุบัน

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

Javaวิธีการอาร์เรย์สคริปต์

วัตถุ Array มีคุณสมบัติและวิธีการมากมายที่ช่วยให้นักพัฒนาจัดการอาร์เรย์ได้อย่างง่ายดายและมีประสิทธิภาพ คุณสามารถรับค่าของคุณสมบัติได้โดยการระบุ arrayname.property และเอาต์พุตของเมธอดโดยระบุ arrayname.method()

1. คุณสมบัติความยาว –> หากคุณต้องการทราบจำนวนองค์ประกอบในอาร์เรย์ คุณสามารถใช้คุณสมบัติความยาวได้
2. คุณสมบัติต้นแบบ –> หากคุณต้องการเพิ่มคุณสมบัติและวิธีการใหม่ คุณสามารถใช้คุณสมบัติต้นแบบได้
3. วิธีย้อนกลับ -> คุณสามารถกลับลำดับของรายการในอาร์เรย์โดยใช้วิธีย้อนกลับ
4. วิธีการเรียงลำดับ –> You can sort the items in an array using the sort method.
5. วิธีป๊อป -> คุณสามารถลบรายการสุดท้ายของอาร์เรย์โดยใช้วิธีป๊อป
6. วิธีการกะ -> คุณสามารถลบรายการแรกของอาร์เรย์โดยใช้วิธี shift ได้
7. วิธีการผลักดัน -> คุณสามารถเพิ่มค่าเป็นรายการสุดท้ายของอาร์เรย์ได้

ตารางอ้างอิงด้านล่างนี้ได้จัดกลุ่มวิธีการที่ใช้บ่อยที่สุดไว้ เพื่อให้คุณสามารถดูได้อย่างรวดเร็วว่าวิธีการใดบ้างที่เปลี่ยนแปลงอาร์เรย์เดิม และวิธีการใดบ้างที่ส่งคืนค่าใหม่

การเพิ่มและการลบองค์ประกอบ

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

การค้นหา การคัดลอก และการรวมไฟล์

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

วิธีการวนซ้ำ: forEach, map, filter และ reduce

ทันสมัย Javaสคริปต์นี้สนับสนุนการใช้เมธอดที่ขับเคลื่อนด้วยฟังก์ชันเรียกกลับ (callback-driven methods) มากกว่าการวนลูปดัชนีด้วยตนเอง เนื่องจากจุดประสงค์ของการดำเนินการนั้นระบุไว้โดยตรงในชื่อเมธอดแล้ว

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

Javaตัวอย่างอาร์เรย์สคริปต์พร้อมซอร์สโค้ด Code

สคริปต์ด้านล่างนี้สร้างอาร์เรย์ของนักเรียน เพิ่มวิธีการแสดงผลแบบกำหนดเองผ่านคุณสมบัติ prototype จากนั้นสาธิตการแสดงความยาว การเรียงลำดับ การกลับลำดับ การลบออก และการเพิ่มเข้าไปตามลำดับ ลองทำด้วยตัวเองดู:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

ผลลัพธ์ที่คาดหวัง:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

สังเกตว่าคำสั่ง sort จะจัดเรียง “Aaron” ไว้ก่อน “Ann” เพราะตัวอักษรพิมพ์ใหญ่และพิมพ์เล็กจะถูกเปรียบเทียบโดยใช้รหัสตัวอักษร และสังเกตอีกว่าคำสั่ง pop ได้ลบ “Aaron” ออกจากอาร์เรย์ที่กลับด้านแล้ว ซึ่งยืนยันว่าทั้งคำสั่ง sort และ reverse ได้เปลี่ยนแปลงอาร์เรย์เดิมในตำแหน่งเดิม

How to Loop Through a JavaScript Array

ห้องน้ำสี่ห้องping มีรูปแบบการใช้งานให้เลือกใช้ และแต่ละแบบก็เหมาะกับสถานการณ์ที่แตกต่างกัน ลูป for แบบคลาสสิกช่วยให้ควบคุมดัชนีได้อย่างเต็มที่ for…of อ่านค่าโดยตรง forEach แสดงเจตนาได้อย่างชัดเจน และ for…in ควรสงวนไว้สำหรับคุณสมบัติของอ็อบเจ็กต์

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

บทความที่อธิบายไวยากรณ์ของลูปอย่างละเอียดมากขึ้น รวมถึง while และ do…while สามารถดูได้ในบทความถัดไป วิธีการใช้ลูปใน Javaต้นฉบับ.

อาร์เรย์หลายมิติใน Javaต้นฉบับ

Javaสคริปต์ไม่มีประเภทเมทริกซ์เฉพาะ ตารางกริดเป็นเพียงอาร์เรย์ที่มีองค์ประกอบเป็นอาร์เรย์อีกที และใช้การแสดงดัชนีสองแบบเพื่อเข้าถึงเซลล์เดียว

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Output:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

อาร์เรย์ปรากฏอยู่ในสคริปต์แทบทุกรูปแบบ ตั้งแต่การตรวจสอบความถูกต้องของฟอร์มไปจนถึงการแสดงผลข้อมูล ดำเนินการต่อด้วย ในทางปฏิบัติ Javaตัวอย่างโค้ดสคริปต์, ทบทวน Javaสตริงสคริปต์ สำหรับการจัดการข้อความ และอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ ภายในและภายนอก Javaต้นฉบับ to decide where these scripts belong in a page. Developers who want static type checking over array contents can move on to the TypeScript เกี่ยวกับการสอน.

คำถามที่พบบ่อย