Javascript Language ต้องยอมรับเลยว่ามาแรงอย่างมาก เรียกว่าไม่รู้ไม่ได้แล้ว ทุกภาษาโปรแกรมมิ่งจะต้องมี Data Collection แน่นอน Javascript ก็ เช่นกัน Array ก็เป็นการเก็บข้อมูลประเภทหนึ่งใน Javascript และ Javascript ก็สร้าง methods สำหรับใช้งานกับ Array ไว้ให้หลายแบบตามการใช้งาน วันนี้เลยอยากที่จะเอาตัวอย่างโค๊ดง่าย ๆ สำหรับการเรียกใช้งาน Array Methods แต่ละ Method ว่าใช้งานอย่างไร
// สร้าง Array Data เตรียมไว้ก่อน
const data1 = [1,2,3,4,5,6,7,8,9];
const data2 = [11,12,13,14,15,16,17,18,19];
const data3 = [21,22,23,24,25,26,27,28,29];
const data4 = [31,32,33,34,35,36,37,38,39];
console.log('_data1 :: ',data1);
console.log('_data2 :: ',data2);
console.log('_data3 :: ',data3);
console.log('_data4 :: ',data4);
// console.log()
=> _data1 :: 1,2,3,4,5,6,7,8,9
=> _data2 :: 11,12,13,14,15,16,17,18,19
=> _data3 :: 21,22,23,24,25,26,27,28,29
=> _data4 :: 31,32,33,34,35,36,37,38,39
// map => สร้าง Array ชุดใหม่ โดยมีเงื่อนไขบางอย่าง
const _map = data1.map(x => x+1);
console.log('_map [+1] data1 :: ',_map);
=> _map [+1] data1 :: 2,3,4,5,6,7,8,9,10
// filter => กรองข้อมูล Array จากเงื่อนไขบางอย่าง
const _filter = data1.filter(x => x%2 == 0)
console.log('_filter [x%2 == 0] data1 :: ',_filter);
=> _filter [x%2 == 0] data1 :: 2,4,6,8
// concat => รวม Array หลาย Array เป็น Array เดียว
const _concat = data1.concat(data2);
console.log('_concat data1 & data2 :: ',_concat);
=> _concat data1 & data2 :: 1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19
// copy => Copy element ใน Array ตามตำแน่งที่กำหนด
const _copy = data1.copyWithin(3,0);
console.log('_copy [3,0] data1 :: ',_copy);
=> _copy [3,0] data1 :: 1,2,3,1,2,3,4,5,6
// every => ตรวจสอบ element ใน Array
const _every = data2.every( x => x > 9 );
console.log('_every [ > 9] data2 :: ',_every);
=> _every [ > 9] data2 :: true
// fill => replace element ใหม่ แทนที่ element เดิม
const _fill = data3.fill(1);
console.log('_fill [1] data3 :: ',_fill);
=> _fill [1] data3 :: 1,1,1,1,1,1,1,1,1
// pop => ค้นหา element ตัวสุดท้าย
const _pop = data1.pop();
console.log('_pop data1 :: ',_pop);
=> _pop data1 :: 9
// push => เพิ่ม element ใน Array โดยจะต่อท้าย
const _push = data2.push(999);
console.log('_push [999] data2 :: ',data2);
=> _push [999] data2 :: 11,12,13,14,15,16,17,18,19,999
// reduce => for เก็บค่าไว้ เหมือนการ loop sum
const _reduce = data1.reduce((x,y) => x+y)
console.log('_reduce data1 :: ',_reduce);
=> _reduce data1 :: 21
// reverse => สลับ element ใน Array จากก่อน -> ท้าย เป็น ท้าย -> ก่อน
const _reverse = data1.reverse();
console.log('_reverse data1 :: ',data1);
=> _reverse data1 :: 9,8,7,6,5,4,3,2,1
// shift => ลบ element แรกใน Array
const _shift = data2.shift();
console.log('_shift data2 :: ',data2)
console.log('_shift :: ',_shift);
=> _shift data2 :: 12,13,14,15,16,17,18,19,999
// slice เลือก element ใน Array โดย index
const _slice = data2.slice(5,2);
console.log('_slice [5,2] data :: ',data2);
=> _shift :: 11
=> _slice [5,2] data :: 11,12,13,14,15,16,17,18,19
// som => ตรวจสอบ element ใน Array
const _som = data1.some( x => x = 5);
console.log('_som [=5] data1 :: ',_som);
=> _som [=5] data1 :: true
// sort => เรียงลำดับ element น้อย -> มาก
const _sort = data1.sort();
console.log('_sort data1 :: ',_sort);
=> _sort data1 :: 1,2,3,3,4,5,6,7,8,9
// splice => เพิ่ม new element เข้า Array โดยระบุตำแหน่ง
const _splice = data4.splice(2, 0, -99,0)
console.log('_splice [2, 0, -99,0] data4 :; ',data4);
=> _splice [2, 0, -99,0] data4 :; 31,32,-99,0,33,34,35,36,37,38,39
// unsgift => เพิ่ม new element ตำแหน่งหน้าสุด
const _unshift = data1.unshift(-99,0);
console.log('_unshift [-99,0] data1 :: ',data1);
=> _unshift [-99,0] data1 :: -99,0,1,1,2,2,3,3,4,5
บทความนี้ฝากไว้เท่านี้ครับ
ขอบคุณภาพประกอบจาก https://www.safaribooksonline.com/library/view/javascript-and-jquery/9781118531648/17_chapter12.html
