JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


JavaScript Arrays

อาร์เรย์เป็นตัวแปรพิเศษ ซึ่งสามารถเก็บค่าได้มากกว่าหนึ่งค่า:

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

ทำไมต้องใช้อาร์เรย์?

หากคุณมีรายการสิ่งของ (เช่น รายชื่อรถ) การจัดเก็บรถยนต์ในตัวแปรเดียวอาจมีลักษณะดังนี้:

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

อย่างไรก็ตาม ถ้าคุณต้องการวนรอบรถและหารถเฉพาะล่ะ แล้วถ้าคุณมีรถไม่ถึง 3 คัน แต่มี 300 คันล่ะ?

วิธีแก้ปัญหาคืออาร์เรย์!

อาร์เรย์สามารถเก็บค่าได้หลายค่าภายใต้ชื่อเดียว และคุณสามารถเข้าถึงค่าต่างๆ ได้โดยอ้างอิงจากหมายเลขดัชนี


การสร้างอาร์เรย์

การใช้ตัวอักษรอาร์เรย์เป็นวิธีที่ง่ายที่สุดในการสร้าง JavaScript Array

ไวยากรณ์:

const array_name = [item1, item2, ...];      

เป็นเรื่องปกติที่จะประกาศอาร์เรย์ด้วยคำสำคัญconst

เรียนรู้เพิ่มเติมเกี่ยวกับconstกับอาร์เรย์ในบท: JS Array Const

ตัวอย่าง

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

การเว้นวรรคและการขึ้นบรรทัดใหม่ไม่สำคัญ การประกาศสามารถขยายได้หลายบรรทัด:

ตัวอย่าง

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

คุณยังสามารถสร้างอาร์เรย์ แล้วจัดเตรียมองค์ประกอบ:

ตัวอย่าง

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

การใช้คำสำคัญ JavaScript ใหม่

ตัวอย่างต่อไปนี้ยังสร้าง Array และกำหนดค่าให้กับมัน:

ตัวอย่าง

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

ตัวอย่างสองตัวอย่างข้างต้นทำเช่นเดียวกันทุกประการ

ไม่จำเป็นต้องnew Array()ใช้

เพื่อความเรียบง่าย ความอ่านง่าย และความเร็วในการดำเนินการ ให้ใช้วิธีการตามตัวอักษรของอาร์เรย์



การเข้าถึงองค์ประกอบอาร์เรย์

คุณเข้าถึงองค์ประกอบอาร์เรย์โดยอ้างถึงหมายเลขดัชนี :

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

หมายเหตุ:ดัชนีอาร์เรย์เริ่มต้นด้วย 0

[0] เป็นองค์ประกอบแรก [1] เป็นองค์ประกอบที่สอง


การเปลี่ยนองค์ประกอบอาร์เรย์

คำสั่งนี้เปลี่ยนค่าขององค์ประกอบแรกในcars:

cars[0] = "Opel";

ตัวอย่าง

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

เข้าถึงอาร์เรย์แบบเต็ม

ด้วย JavaScript อาร์เรย์แบบเต็มสามารถเข้าถึงได้โดยอ้างถึงชื่ออาร์เรย์:

ตัวอย่าง

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

อาร์เรย์เป็นวัตถุ

อาร์เรย์เป็นอ็อบเจ็กต์ชนิดพิเศษ โอtypeofเปอเรเตอร์ใน JavaScript ส่งคืน "วัตถุ" สำหรับอาร์เรย์

แต่อาร์เรย์ JavaScript นั้นอธิบายได้ดีที่สุดว่าเป็นอาร์เรย์

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

อาร์เรย์:

const person = ["John", "Doe", 46];

ออบเจ็กต์ใช้ชื่อเพื่อเข้าถึง "สมาชิก" ในตัวอย่างนี้ person.firstName ส่งคืน John:

วัตถุ:

const person = {firstName:"John", lastName:"Doe", age:46};

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

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

ด้วยเหตุนี้ คุณจึงสามารถมีตัวแปรประเภทต่างๆ ใน ​​Array เดียวกันได้

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

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

คุณสมบัติและเมธอดของอาร์เรย์

จุดแข็งที่แท้จริงของอาร์เรย์ JavaScript คือคุณสมบัติและเมธอดของอาร์เรย์ในตัว:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

วิธีการอาร์เรย์จะครอบคลุมในบทต่อไป


ความยาวทรัพย์สิน

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

ตัวอย่าง

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

คุณสมบัติlengthนี้มีค่ามากกว่าดัชนีอาร์เรย์สูงสุดหนึ่งรายการเสมอ


การเข้าถึงองค์ประกอบอาร์เรย์แรก

ตัวอย่าง

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

การเข้าถึงองค์ประกอบอาร์เรย์สุดท้าย

ตัวอย่าง

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

องค์ประกอบอาร์เรย์วนรอบ

วิธีหนึ่งในการวนซ้ำผ่านอาร์เรย์คือการใช้การforวนซ้ำ:

ตัวอย่าง

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

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

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

ตัวอย่าง

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

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

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

ตัวอย่าง

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

สามารถเพิ่มองค์ประกอบใหม่ลงในอาร์เรย์โดยใช้lengthคุณสมบัติ:

ตัวอย่าง

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

คำเตือน !

การเพิ่มองค์ประกอบที่มีดัชนีสูงสามารถสร้าง "ช่อง" ที่ไม่ได้กำหนดไว้ในอาร์เรย์ได้:

ตัวอย่าง

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

แอสโซซิเอทีฟอาเรย์

ภาษาโปรแกรมหลายภาษารองรับอาร์เรย์ที่มีดัชนีที่มีชื่อ

อาร์เรย์ที่มีดัชนีที่มีชื่อเรียกว่า associative arrays (หรือ hashes)

JavaScript ไม่สนับสนุนอาร์เรย์ที่มีดัชนีที่มีชื่อ

ใน JavaScript อาร์เรย์จะใช้ดัชนีที่มีหมายเลขเสมอ  

ตัวอย่าง

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

คำเตือน !!
หากคุณใช้ดัชนีที่มีชื่อ JavaScript จะกำหนดอาร์เรย์ใหม่ให้กับวัตถุ

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

 ตัวอย่าง:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

ความแตกต่างระหว่างอาร์เรย์และวัตถุ

ใน JavaScript อาร์เรย์ใช้ดัชนีที่มีตัวเลข  

ใน JavaScript ออบเจ็ กต์ ใช้ดัชนีที่ มีชื่อ

อาร์เรย์เป็นอ็อบเจ็กต์ชนิดพิเศษที่มีดัชนีเป็นตัวเลข


เมื่อใดควรใช้อาร์เรย์ เมื่อใดจึงจะใช้วัตถุ

  • JavaScript ไม่สนับสนุนอาร์เรย์ที่เชื่อมโยง
  • คุณควรใช้วัตถุเมื่อคุณต้องการให้ชื่อองค์ประกอบเป็น สตริง (ข้อความ )
  • คุณควรใช้อาร์เรย์เมื่อต้องการให้ชื่อองค์ประกอบ เป็นตัวเลข

JavaScript อาร์เรย์ใหม่ ()

JavaScript มีตัวสร้างอาร์เรย์ในnew Array()ตัว

แต่คุณสามารถใช้[]แทน ได้อย่างปลอดภัย

คำสั่งที่แตกต่างกันทั้งสองนี้สร้างอาร์เรย์ว่างใหม่ที่มีชื่อจุด:

const points = new Array();
const points = [];

คำสั่งที่แตกต่างกันทั้งสองนี้สร้างอาร์เรย์ใหม่ที่มีตัวเลข 6 ตัว:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

คำnewหลักสามารถสร้างผลลัพธ์ที่ไม่คาดคิดได้:

// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);  

ข้อผิดพลาดทั่วไป

const points = [40];

ไม่เหมือนกับ:

const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);  

วิธีการรับรู้อาร์เรย์

คำถามทั่วไปคือ ฉันจะรู้ได้อย่างไรว่าตัวแปรเป็นอาร์เรย์

The problem is that the JavaScript operator typeof returns "object":

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

The typeof operator returns object because a JavaScript array is an object.

Solution 1:

To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():

Array.isArray(fruits);

Solution 2:

The instanceof operator returns true if an object is created by a given constructor:

const fruits = ["Banana", "Orange", "Apple"];

fruits instanceof Array;

Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Exercise:

Get the value "Volvo" from the cars array.

const cars = ["Saab", "Volvo", "BMW"];
let x = ;