[4] เรียนพื้นฐาน JavaScript ตอน Arrays

September 13, 2017

array เป็นโครงสร้างข้อมูล ใช้เก็บค่าต่างๆ ได้หลายค่า เช่น ต้องการประกาศตัวแปร เพื่อเก็บชื่อของเพื่อนๆนักเรียนในห้อง ถ้าประกาศตัวแปรแยกจะได้หน้าตาแบบนี้

var student1 = "Khwaan";
var student2 = "Dan";
var student3 = "Kate";
var student4 = "Mark";
var student5 = "Rob";
var student6 = "Bella";
var student7 = "Ken";
var student8 = "Nele";
var student9 = "Aliz";
var student10 = "Micheal";

//ลองจินตนาการว่า มีนักเรียน 100 คน เราต้องประกาศตัวแปรจนรกมากๆแน่ๆ

แต่ถ้าเราเปลี่ยนมาใช้ array เราจะได้หน้าตาแบบนี้แทน สั้นๆง่ายๆ โดยใช้ , คั่นข้อมูลแต่ละ element

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

เราสามารถสร้าง array มาเก็บข้อมูลได้หลายแบบ

//ผสมชนิดข้อมูล
var mixed = ["Hello", true, false, 100, undefined, null, 500.5];

//array ซ้อน array
var nested = [[1,2,3,4],["Hey","Hi","Hello","Hola"],[true,false,true]];

การเข้าถึงข้อมูลใน Array

ข้อมูลที่อยู่ใน “” แต่ละอัน เรียกว่า Element เช่น var elements = [“element 1″,”element 2″,”element 3”]; โดยเราจะใช้ index ในการบอกตำแหน่งหรืออันดับของข้อมูลใน array เป็นตัวเลข เริ่มต้นด้วย 0

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];
console.log(students[1]); //Dan ไม่ใช่ Khwaan เพราะ index เริ่มต้นด้วย 0
console.log(students[5]); //Bella
console.log(students[0]); //Khwaan

เปลี่ยนค่าใน Array

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];
students[1] = "Cone";
students[9] = "Damn";

console.log(students); //สั่งปริ้นค่า students

//ผลคือปริ้น ["Khwaan", "Cone", "Kate", "Mark", "Rob", "Bella", "Ken", "Nele", "Aliz", "Damn"] ออกมา

Length

.length ใช้สำหรับเช็กว่าใน arrey มีกี่ element

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];


console.log(students.length); 
//คืนค่า 10

Push / Shift

.push ใช้สำหรับเพิ่มค่าใหม่เข้าไปในท้าย(ข้างหลังสุด) array เดิมของเรา เช่น ตัวแปร students เดิมเก็บนักเรียนไว้ 10 คน แต่มีนักเรียนเข้าใหม่มา ชื่อ Fon ก็ทำการเพิ่มเข้าไปแบบนี้

.shift ใช้สำหรับเพิ่มค่าใหม่เข้าไปในฝั่งหัว(ข้างหน้าสุด) array เดิมของเรา เช่น ตัวแปร students เดิมเก็บนักเรียนไว้ 10 คน แต่มีนักเรียนเข้าใหม่มา ชื่อ Fon ก็ทำการเพิ่มเข้าไปแบบนี้

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.push("Fon");

console.log(students); 
//คืนค่า ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal","Fon"]
// "Fon" เข้าไปอยู่ในท้ายสุดของ students เรียบร้อยแล้ว


var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.shift("Fon"); 

console.log(students); 
//คืนค่า ["Fon","Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"] 
// "Fon" เข้าไปอยู่ในอันดับแรกของ students เรียบร้อยแล้ว

Pop / Unshift

.pop ใช้ลบข้อมูลใน array จากท้ายสุด

.Unshift ใช้ลบข้อมูลใน array จากหน้าสุด

//ตัวอย่างการใช้ .pop()
var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.pop();

console.log(students); 
//คืนค่า ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz"]
//"Micheal" ถูกลบออกจาก students แล้ว

/*---------------------*/

//ตัวอย่างการใช้ .unshift()
var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.unshift(); console.log(students);

//คืนค่า ["Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"] 
//"Khwaan" ถูกลบออกจาก students แล้ว</br >

 Splice

.splice ใช้เพิ่มหรือลบ element แบบเจาะจงตำแหน่ง

//โครงสร้าง
array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

 

ตัวอย่างที่ 1

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.splice(1, 0, "Dog"); //(เริ่มที่ index 1, ลบข้อมูล 0 element, เพิ่ม "Dog" ไปที่ index 1)
console.log(students); 

//คืนค่า ["Khwaan","Dog", "Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

ตัวอย่างที่ 2

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.splice(3, 5); //(เริ่มที่ index 3, ลบข้อมูล 5 element)
console.log(students); 

//คืนค่า ["Khwaan","Dan","Kate","Aliz","Micheal"];

ตัวอย่างที่ 3

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.splice(3, 5, "Max"); //(เริ่มที่ index 3, ลบข้อมูล 5 element, เพิ่ม "Max" เข้าไปที่ index 3)
console.log(students); 

//คืนค่า ["Khwaan","Dan","Kate","Max","Aliz","Micheal"];

ตัวอย่างที่ 4

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.splice(-7, 5); //(เริ่มที่ index นับจากท้ายสุดมา 7 index, ลบข้อมูล 5 element)
console.log(students); 

//คืนค่า ["Khwaan", "Dan", "Kate", "Aliz", "Micheal"];

ตัวอย่างที่ 5

var students = ["Khwaan","Dan","Kate","Mark","Rob","Bella","Ken","Nele","Aliz","Micheal"];

students.splice(1); //(ลบทั้งหมดเริ่มจาก index 1)
console.log(students); 

//คืนค่า ["Khwaan"];

 

 

เย้ จบแล้วเยอะมากๆ ลองไปดู Methods ต่างๆของ Array ได้ที่ลิงก์ https://developer.mozilla.org เลย มีข้อมูลเยอะมากๆ