javascript forEach คืออะไรเรามำทำความรู้จักกับคำสั่ง forEach ใน javascript กัน


 14 ก.ค. 2561
javascript forEach  คืออะไรเรามำทำความรู้จักกับคำสั่ง  forEach ใน javascript กัน

developer หลายคนเคยใช้แต่ For Loop ยังไม่รู้จักว่า javascript forEach คืออะไร วันนี้เรามาแนะนำ forEach แบบเจาะลึกกัน

หากพูดถึง For Loop แล้ว developer ทุกคนคงรู้จักกันแต่ แต่สำหรับ forEach หลายคนคงยังไม่รู้จักและยังไม่เคยใช้งาน จะเห็นได้จากสถิติใน google มีคน search คำว่า  javascript forEach , javascript forEach  คือ, javascript forEach  คืออะไรเป็นต้น กันเยอะพอสมควร วันนี้แอดมินเลยจะขอแนะนำการใช้  forEach  ใน javascript กัน

รูปแบบการเรียกใช้



arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

 

forEach มี parameter เป็น function ที่รับ parameter 3 ตัว

1 = ข้อมูลในลำดับนั้นๆ


2 = ลำดับ

3 = ข้อมูล array ทั้งหมด ดังตัวอย่าง

 

เปรียบเทียบ for loop ธรรมดา กับ forEach

เขียนแบบ for loop ธรรมดา

<script>
const items = ['item1', 'item2', 'item3'];
const copy = [];

for (let i=0; i<items.length; i++) {
  copy.push(items[i])
}
</script>

 เขียนแบบ  forEach

<script>
const items = ['item1', 'item2', 'item3'];
const copy = [];

items.forEach(function(item){
  copy.push(item)
});
</script>

 

ตัวอย่างการใช้ forEach 

<script>
var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  /* 
   console.log ใช้ ใช้สำหรับปริ๊นข้อความทั่วๆไปให้ขึ้นไปอยู่บน web console  กด f12 เพื่อดูค่า console.log
  */
  console.log(element);
});

// expected output: "a"
// expected output: "b"
// expected output: "c"
</script>
<script>
function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// Notice that index 2 is skipped since there is no item at
// that position in the array.
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9
</script>
<button onclick="numbers.forEach(myFunction)">Try it</button>

<p>Sum of numbers in array: <span id="demo"></span></p>

<script>
var sum = 0;
var numbers = [65, 44, 12, 4];

function myFunction(item) {
    sum += item;
    demo.innerHTML = sum;
}
</script>

 

ได้รู้จักกับ forEach  ใน javascript ไปกันแล้วก็ลองเอาไปประยุกต์ใช้งานดูน่ะครับ

สุดท้ายนี้ขอในทุกคนฝึกฝนการเขียนโปรแกรมเยอะ ๆ ครับ ฝึกมากเก่งมาก ฝึกน้อยเก่งน้อยครับ


ขอบคุณรูปไอคอนสวยๆ จาก >> Vector Graphics by Vecteezy.com


เทพควิช-lnwquiz