JavaScript Array 5 Functions You should know

นี่คือ 10 ฟังก์ชั่นอาเรย์ที่ใช้บ่อยมากๆ ที่นักพัฒนาสายจาวาสคิปควรรู้ไว้

1. forEach()

เป็นฟังค์ชั่นที่ frontend ใช้บ่อยที่สุดเพราะ มันมีหน้าที่สำหรับการแสดงผล ค่าทั้งหมดที่มีอยู่ใน array นั่นเอง มีเท่าไหร่ วนออกมาให้หมด

Example

Log each array item to the console

const everyMorning= ['wake up', ' shower', ' brush teeth'];
everyMorning.forEach( item=> console.log(item) );
// Will log the following:
// 'wake up'
// 'shower'
// 'brush teeth'

2. indexOf()

เป็นฟังค์ชั่นที่สำหรับหาค่าจาก text ตั้งต้นว่าพบใน array หรือเปล่า โดยที่ค้นหาคำเจอจะ return index ที่พบเจอออกมา แต่เมื่อไม่เจอ จะ return -1

Example

Log Check for any occurence of “orange” in an array.

var arr = ['Maine Coon','British Shorthair','Persian'];

console.log("found:", arr.indexOf("British Shorthair") != -1);
// Will log the following:
// true เพราะว่ามี British Shorthair อยู่ใน arr นั่นเอง

3. filter()

เป็นฟังค์ชั่นที่สำหรับกรองหาค่าซ้ำ กรณีที่เรารู้ชื่อ key อยู่แล้ว

Example

Log filter for who born in May.

var arr = [
    {"month":"May", "name": "Sek"},
    {"month":"Jan", "name": "Oat"},
    {"month":"May", "name": "Loso"},
    {"month":"Nov", "name": "Toon"},
];
var newArr = arr.filter(function(item){
    return item.month === "May";
});
console.log("Filter results:",newArr);
// Will log the following:
   Filter results: {     "month": "May",     "name": "Sek" },
                   {     "month": "May",     "name": "Loso" }

4. map()

เป็นฟังค์ชั่น สร้าง array ใหม่ พร้อมผลลัพธ์ของการเรียกใช้ฟังก์ชั่นที่ให้องค์ประกอบใหม่ ที่มาจาก ข้อมูลของ array เดิม

ใช่ในกรณีวนค่าเพื่อแยกค่า และส่งกลับ array ใหม่ ที่มี value ที่มีคุณสมบัติต่างจากเดิม

Example

Log set full_name as a new array

var oldArr = [
{first_name:"CHERPRANG",last_name:"AREEKUL"},        {first_name:"JENNIS",last_name:"OPRASERT"},  {first_name:"PUNSIKORN",last_name:"TIYAKORN"}
];

function getNewArr(){
        
    return oldArr.map(function(item,index){
        item.full_name = [item.first_name,item.last_name].join(" ");
        return item;
    });
    
}

console.log(getNewArr());
// Will log the following:
// ผลลัพธ์ จะได้ array ใหม่ ที่มี ต่างจากไปจากเดิม :
 {"first_name": "CHERPRANG", "last_name": "AREEKUL",      "full_name": "CHERPRANG AREEKUL" }
,{"first_name": "JENNIS", "last_name": "OPRASERT",     
"full_name": "JENNIS OPRASERT" }
,{"first_name": "PUNSIKORN",  "last_name": "TIYAKORN",     "full_name": "PUNSIKORN TIYAKORN" }

5. reduce()

เป็นฟังค์ชั่น ที่ group ค่าที่ซ้ำกัน และ return จำนวน count สิ่งที่พบเจอ ออกไป

Example

Log group reduce

var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
    return arr.reduce(function(prev,next){
        prev[next] = (prev[next] + 1) || 1;
        return prev;
    },{});
}
console.log(getWordCnt());
// Will log the following:
// ผลลัพธ์ จะได้ array ที่แสดงผลรวม group ค่า ของสิ่งที่มีค่าเหมือนกัน
 {     "apple": 2,     "orange": 3,     "pear": 1 }

บทความนี้ เสนอ 5 ฟังค์ชั่นที่ใช้บ่อยซึ่งได้อธิบายข้างต้นนั้น ในสายงานของ Front End และแน่นอน มันไม่ได้มีแค่ 5 ฟังค์ชั่นเท่านั้น มีอีกมากมาย และตัว JSเอง ก็มีหลาย version ES5 ES6 ฝากไว้ให้นักพัฒนาได้เรียนรู้กันต่อไปเรื่อยๆ อย่าหยุดพัฒนา เพราะ code มันไม่ได้มีแค่ version เดียว Browser ไม่ได้มีแต่ Chrome แต่ยังมี IE ด้วย ขอบคุณครับ…..