ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 1

ใช้ฟังก์ชัน concat()

concat() ใช้สำหรับสร้างตัวแปร array
ใหม่จาก การรวมตัวแปร array ตั้งแต่ 2 ตัวขึ้นไป โดยที่ตัวแปร array ที่นำมา
รวมกันนั้น ยังเหมือนเดิม ไม่มีการเปลี่ยนแปลงใดๆ
 

// ตัวอย่าง กรณ๊รวมตัวแปร array 2 ตัว
var alpha = ["a", "b", "c"];  
var numeric = [1, 2, 3];  

var alphaNumeric = alpha.concat(numeric);  
// สร้าง array ["a", "b", "c", 1, 2, 3]; โดยที่ array ชื่อ alpha และ numeric ไม่มีการเปลี่ยนแปลง
// ตัวแปร array ใหม่ที่ได้คือ ชื่อ alphaNumeric มีค่าเท่ากับ ["a", "b", "c", 1, 2, 3];

// ตัวอย่าง กรณ๊รวมตัวแปร array 3 ตัว
var num1 = [1, 2, 3];  
var num2 = [4, 5, 6];  
var num3 = [7, 8, 9];  

var nums = num1.concat(num2, num3);  
// สร้าง  array [1, 2, 3, 4, 5, 6, 7, 8, 9]; โดยที่ num1, num2, num3  ไม่มีการเปลี่ยนแปลง
// ตัวแปร array ใหม่ที่ได้คือ ชื่อ nums มีค่าเท่ากับ [1, 2, 3, 4, 5, 6, 7, 8, 9];

// ตัวอย่าง กรณีรวมตัวแปร array กับค่าที่ต้องการ
var alpha = ['a', 'b', 'c'];  
  
var alphaNumeric = alpha.concat(1, [2, 3]);  
// สร้าง array ["a", "b", "c", 1, 2, 3], โดยที่ alpha ไม่มีการเปลี่ยนแปลง
// ตัวแปร array ใหม่ที่ได้คือ ชื่อ alphaNumeric มีค่าเท่ากับ ["a", "b", "c", 1, 2, 3];

ใช้ฟังก์ชัน join()

join() ใช้สำหรับ การนำค่าแต่ละค่าในตัวแปร array มารวมกันเป็นข้อความ และส่งค่ากลับเป็นข้อความ ที่มีตัวคั่นค่าตัวแปรแต่ละค่า ตามที่กำหนด ถ้าไม่ได้กำหนด จะเป็นเครื่องหมาย comma (,) ให้โดยอัตโนมัติ
 

//ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUseJoin=cars.join(); // ไม่ได้กำหนดตัวคั่นค่าตัวแปร หรือตัวแบ่ง
// ผลที่ได้คือ เป็นการนำค่าในตัวแปร array ชื่อ cars มารวมกัน หรือเรียงต่อกัน เป็นข้อความ
// ใหม่ และคั่นแต่ละค่าด้วย comma (,)
// จะได้ตัวแปร carsUseJoin เป็น ตัวแปรประเภท String 
// มีค่าเท่ากับ carsUseJoin="Toyota,Honda,Isuzu";

// ตัวอย่าง กรณีกำหนดค่าตัวแบ่ง
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUseJoin=cars.join(" and "); // กำหนดตัวคั่นค่าตัวแปร หรือตัวแบ่ง
// ผลที่ได้คือ เป็นการนำค่าในตัวแปร array ชื่อ cars มารวมกัน หรือเรียงต่อกัน เป็นข้อความ
// ใหม่ และคั่นแต่ละค่าด้วย and
// จะได้ตัวแปร carsUseJoin เป็น ตัวแปรประเภท String 
// มีค่าเท่ากับ carsUseJoin="Toyota and Honda and Isuzu";

ใช้ฟังก์ชัน pop()

pop() ใช้สำหรับ ลบค่าตัวสุดท้ายออกจากตัวแปร array แล้วคืนค่านั้นกลับมา
มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUsePop=cars.pop(); // ลบค่าตัวสุดท้าย Isuzu ออกจากตัวแปร array ชื่อ cars
// มีผลให้ตัวแปร array cars=["Toyota","Honda"]; และ length ลดเหลือ 2 
// จากนั้นคืนค่าที่ลบออก มา แล้วกำหนดไว้ที่ตัวแปร carsUsePop
// จะได้ตัวแปร carsUsePop="Isuzu";

ใช้ฟังก์ชัน push()

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

// ตัวอย่างการใช้งาน กรณีเพิ่มเพียงค่าเดียว
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUsePush=cars.push("Mitsubishi"); // เพิ่มค่า Mitsubishi เข้าไปต่อท้ายค่าตัวแปร array เดิม 
// มีผลให้ตัวแปร array cars=["Toyota","Honda","Isuzu","Mitsubishi"]; 
// จากนั้นคืนค่าจำนวนรายการทั้งหมด ของตัวแปร array cars แล้วกำหนดไว้ที่ตัวแปร carsUsePush
// จะได้ตัวแปร carsUsePush=4;

// ตัวอย่างการใช้งาน กรณีเพิ่มหลายค่า
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUsePush=cars.push("Mitsubishi","Ford"); 
// เพิ่มค่า Mitsubishi และ Ford เข้าไปต่อท้ายค่าตัวแปร array เดิม 
// มีผลให้ตัวแปร array cars=["Toyota","Honda","Isuzu","Mitsubishi","Ford"]; และ length เพิ่มขั้น
// จากนั้นคืนค่าจำนวนรายการทั้งหมด ของตัวแปร array cars แล้วกำหนดไว้ที่ตัวแปร carsUsePush
// จะได้ตัวแปร carsUsePush=5;

ใช้ฟังก์ชัน reverse()

reverse() ใช้สำหรับ กลับลำดับค่าของตัวแปร array เช่น ค่าจากเดิม คือ 1 2 3 4 เมื่อใช้ reverse() ลำดับค่าใหม่จะเท่ากับ 4 3 2 1 มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน 
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array
// ค่าเดิม 
// cars[0]="Toyota";
// cars[1]="Honda";
// cars[2]="Isuzu";
// cars[3]="Mitsubishi";

var carsUseReverse=cars.reverse(); // ทำการกลับลำดับรายการตัวแปร array
// มีผลให้ตัวแปร array cars=["Mitsubishi","Isuzu","Honda","Toyota"]; 
// ค่าใหม่
// cars[0]="Mitsubishi";
// cars[1]="Isuzu";
// cars[2]="Honda";
// cars[3]="Toyota";
// จากนั้นนำตัวแปร array ที่ทำการกลับลำดับรายการไปเก็บไว้ในตัวแปร carsUseReverse
// จะได้ตัวแปร carsUseReverse=["Mitsubishi","Isuzu","Honda","Toyota"];  ซึ่งเท่ากับตัวแปร cars

ใช้ฟังก์ชัน shift()

shift() ใช้สำหรับ ลบค่าตัวแรกออกจากตัวแปร array แล้วคืนค่านั้นกลับมา
มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUseShift=cars.shift(); // ลบค่าตัวแรก Toyota ออกจากตัวแปร array ชื่อ cars
// มีผลให้ตัวแปร array cars=["Honda","Isuzu"];  และ length ลดเหลือ 2 
// จากนั้นคืนค่าที่ลบออก มา แล้วกำหนดไว้ที่ตัวแปร carsUseShift
// จะได้ตัวแปร carsUseShift="Toyota";

ใช้ฟังก์ชัน unshift()

// ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUseUnshift=cars.unshift('Mitsubishi'); // เพิ่ม Mitsubishi เข้าไปในตัวแปร array ชื่อ cars ตัวแรก
// มีผลให้ตัวแปร array cars=["Mitsubishi","Toyota","Honda","Isuzu"];  และ length เพิ่มเป็น 4
// ค่า length จะเก็บไว้ในตัวแปร carsUseUnshift 
console.log(cars);
console.log(carsUseUnshift);

ใช้ฟังก์ชัน slice()

slice(start,end) ใช้สำหรับ ดึงค่าจากตำแหน่งที่ต้องการในตัวแปร array แล้วคืนค่านั้นกลับมา
ไม่มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
start คือ ตำแหน่งเริ่มต้นที่ต้องการดึงค่าจากตัวแปร array เริ่มต้นเท่ากับ 0 สามารถเป็นค่าติดลบได้
end คือ ตำแหน่งสุดท้ายที่ต้องการ ไม่อิงตาม key นั้นหมายถึงนับตัวแรกเท่ากับ 1 ต่างจาก start ตัวแรกเริ่มจาก 0 ถ้าไม่กำหนด end จะเอาตั้งแต่ตำแหน่ง start ไปจนถึงตัวสุดท้าย
 

// ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array

// กรณีดึงตำแหน่ง ที่ 2 กับ 3 ("Honda","Isuzu")
// แนวทางการกำหนด start และ end ถ้าต้องการตัวที่ 2 กับ 3
// กำหนด 2,3 แล้วลดค่าตัวแรกลง 1 ค่า จะได้ค่าที่ใช้กำหนดจริงเท่ากับ 1,3
var carsUseSlice=cars.slice(1,3); 
// จะได้ carsUseSlice=["Honda","Isuzu"]

// กรณีดึงตำแหน่งที่ 2 ไปจนถึงตำแหน่งสุดท้าย ไมต้องกำหนด end กำหนด
var carsUseSlice=cars.slice(1); 
// จะได้ carsUseSlice=["Honda","Isuzu","Mitsubishi"];

// กรณีดึงตำแหน่งเริ่มจาก 2 ตัวหลัง 
var carsUseSlice=cars.slice(-2); 
// จะได้ carsUseSlice=["Isuzu","Mitsubishi"];