คำสั่งวนซ้ำ for in และ for of

ในบทนี้ คุณจะได้เรียนรู้การใช้งานคำสั่งวนซ้ำ for in และ for of ในภาษา JavaScript ซึ่งเป็นคำสั่งวนซ้ำที่ใช้สำหรับวนรอบออบเจ็คที่สามารถวนรอบได้ (Iterable object) ก่อนเริ่มบทนี้ เราแนะนำให้คุณเรียนรู้เกี่ยวกับ คำสั่ง for loop ก่อนเพื่อทำความเข้าใจการทำงานของคำสั่งวนซ้ำ

• การใช้งานคำสั่ง for of
• การใช้งานคำสั่ง for in
• เปรียบเทียบการทำงานของคำสั่ง for

คำสั่ง for of

คำสั่ง for of เป็นคำสั่งที่ใช้สำหรับวนรอบออบเจ็คที่สามารถวนรอบได้ เช่น อาเรย์ หรือออบเจ็คที่กำหนดการทำงานให้กับ Symbol.iterator ในบทนี้ เราจะพูดถึงการใช้งานคำสั่ง for of กับออบเจ็คพื้้นฐาน เช่น อาเรย์ หรือ String เป็นต้น

นี่เป็นตัวอย่างการใช้งานคำสั่ง for of เพื่อวนอ่านค่าอาเรย์ในภาษา JavaScript

let numbers = [10, 20, 30, 40, 50];
let colors = ["Red", "Orange", "Yellow", "Green"];

let sum = 0;
for (let num of numbers) {
    sum += num;
}
console.log("Sum: " + sum);

for (let item of colors) {
    console.log(item);
}

นี่เป็นผลลัพธ์การงานของโปรแกรม

Sum: 150
Red
Orange
Yellow
Green

ในตัวอย่างเป็นการใช้คำสัง for of เพื่อวนรอบอาเรย์ของตัวเลขและ String เพื่อหาผลรวมของตัวเลขในอาเรย์ และแสดงชื่อสีในอาเรย์ตามลำดับ

for (let num of numbers) {
    sum += num;
}

คำสั่ง for of จะวนรอบค่าในอาเรย์จากตัวแรกจนถึงตัวสุดท้าย และส่งค่าที่ได้จากการวนแต่ละรอบกลับมายังตัวแปร num และขอบเขตของตัวแปร num จะสามารถใช้งานได้ภายในบล็อคของคำสั่ง for of เท่านั้น และในตัวอย่างเป็นการหาผลรวมของตัวเลขในอาเรย์และเก็บไว้ในตัวแปร sum

และอย่างที่คุณรู้ในบทของอาเรย์ว่าเราสามารถวนรอบอาเรย์ด้วยคำสั่ง for loop ได้ แต่การใช้วิธีนี้เราจะต้องสร้าง Index สำหรับการเข้าถึงค่าในอาเรย์แบบนี้

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

ดังนั้นการใช้คำสั่ง for of สามารถช่วยลดขั้นตอนการสร้าง Index ได้ และช่วยให้เราสามารถวนค่าในอาเรย์ได้อย่างรวดเร็วในกรณีที่เราต้องการเข้าถึงเพียงค่าในอาเรย์

ออบเจ็คอีกประเภทหนึ่งที่สามารถวนรอบด้วยคำสั่ง for of ได้ก็คือ String เราสามารถใช้คำสั่ง for of เพื่อวนแต่ละตัวอักษรใน String ได้ นี่เป็นตัวอย่าง

let site = "marcuscode";

console.log("Characters in " + site);
for (let ch of site) {
    console.log("%s -> %d", ch, ch.charCodeAt(0));
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Characters in marcuscode
m -> 109
a -> 97
r -> 114
c -> 99
u -> 117
s -> 115
c -> 99
o -> 111
d -> 100
e -> 101

ในตัวอย่างเป็นการใช้คำสั่ง for of สำหรับวนตัวอักษรใน String ในการวนแต่ละรอบเราได้ประกาศตัวแปร ch เพื่อมารับค่าของตัวอักษร จากนั้นแสดงตัวอักษรและรหัสในเลขฐานสิบของมันออกทางหน้าจอ

คำสั่ง for in

คำสั่ง for in นั้นใช้สำหรับวนรอบ Property ของออบเจ็คที่สามารถวนรอบได้ นี่เป็นตัวอย่างการใช้งานคำสัง for of เพื่อวนเอาค่า Property ของออบเจ็คในภาษา JavaScript

let user = {
    id: 1,
    name: "Metin",
    isAdmin: true
};

for (let prop in user) {
    console.log(prop, user[prop]);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

id 1
name Metin
isAdmin true

ในตัวอย่างเป็นการใช้คำสั่ง for in เพื่อวนอ่านค่า Property ในออบเจ็ค user ในการวนแต่ละรอบค่า Property จะถูกส่งกลับมาเป็น String ที่เก็บไว้ในตัวแปร prop

console.log(prop, user[prop]);

เราได้แสดงค่าของ Property ออกทางหน้าจอ และยังใช้มันในการเข้าถึงค่าของออบเจ็คอีกด้วย ซึ่งนี่อาจเป็นประโยชน์ในกรณีที่เราต้องการตรวจสอบหรือเรียกดู Property ทั้งหมดในออบเจ็ค

คำสั่ง for in นั้นวนรอบ Property ของออบเจ็คที่สามารถวนรอบได้เท่านั้น ซึ่งผลลัพธ์ที่ได้จะเหมือนกับการใช้เมธอด Object.keys เพื่อรับเอา Property ในออบเจ็ค แต่เมธอดนี้ส่งค่ากลับเป็นอาเรย์ของ Property แทน

let user = {
    id: 1,
    name: "Metin",
    isAdmin: true
};

console.log(Object.keys(user));
// Output: [ 'id', 'name', 'isAdmin' ]

เมธอด Object.keys ส่งค่ากลับเป็น String อาเรย์ของ Property เหมือนกับที่คำสั่ง for in สามารถวนรอบได้

นอกจากนี้ เรายังสามารถใช้คำสั่ง for in สำหรับวนรอบ Index ของอาเรย์และ String ได้ ซึ่งการใช้วิธีนี้ช่วยอำนวยสะดวกและรวดเร็วเมื่อเราต้องการเข้าถึงทั้ง Index ของค่าของอาเรย์พร้อมกัน นี่เป็นตัวอย่าง

let numbers = [10, 20, 30, 40, 50];

for (let index in numbers) {
    console.log(index, numbers[index]);
}

let str = "Hello";
for (let index in str) {
    console.log(index, str[index]);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

0 10
1 20
2 30
3 40
4 50
0 H
1 e
2 l
3 l
4 o

เรามีอาเรย์ของตัวแปร numbers และตัวแปร str และใช้คำสั่ง for in เพื่อวน Index ของตัวแปรทั้งสอง จากนั้นเราได้นำ Index มาใช้ในการเข้าถึงค่าในอาเรย์และ String ในกรณีนี้ เราสามารถใช้งาน Index และค่าในอาเรย์ได้พร้อมกัน

for (let index in numbers) {
...

ค่า Index ที่ส่งกลับมายังตัวแปร index โดยคำสั่ง for in นั้นเป็น String เสมอ; ในภาษา JavaScript เราสามารถใช้ String literal สำหรับเข้าถึงค่าในอาเรย์ผ่าน Index ได้ เช่น numbers[0] สามารถใช้เป็น numbers["0"] ซึ่งทั้งสองรูปแบบนั้นให้ผลลัพธ์ที่เหมือนกัน

ในการทำงานของคำสั่ง for in นั้นอย่างที่ได้บอกไปในตอนแรกว่ามันวนเพียง Property ที่สามารถวนรอบได้เท่านั้น ซึ่งในภาษา JavaScript นั้นเราสามารถกำหนดคุณสมบัติให้กับ Property ของออบเจ็คว่าจะให้วนรอบได้หรือไม่ โดยการใช้เมธอด Object.defineProperty นี่เป็นตัวอย่าง

let user = {
    id: 1
};

user.name = "Metin";

Object.defineProperty(user, "lang", {
    value: "JavaScript",
    enumerable: true
});

Object.defineProperty(user, "age", {
    value: 32,
    enumerable: false
});

for (let prop in user) {
    console.log(prop);
}

console.log(Object.keys(user));

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

id
name
lang
[ 'id', 'name', 'lang' ]

ในตัวอย่างนี้ แสดงวิธีการกำหนด Property ให้กับออบเจ็ค user ในรูปแบบต่างๆ ในตอนแรกเราได้ประกาศออบเจ็คด้วย Object literal พร้อมกับกำหนด Property id ให้กับออบเจ็ค ซึ่ง Property ที่ถูกกำหนดในรูปแบบนี้จะสามารถวนรอบได้

user.name = "Metin";

จากนั้นเรากำหนด Property name หลังจากที่ออบเจ็คถูกสร้างแล้ว การทำเช่นนี้ก็ทำให้ Property สามารถวนรอบได้เช่นกัน

และสำหรับสอง Property ที่เหลือเป็นการใช้งานเมธอด Object.defineProperty เพื่อกำหนด Property ให้กับออบเจ็ค การใช้วิธีนี้จะทำให้เราสามารถกหนดได้ว่าต้องการให้ Property สามารถวนรอบได้หรือไม่

Object.defineProperty(user, "lang", {
    value: "JavaScript",
    enumerable: true
});

Object.defineProperty(user, "age", {
    value: 32,
    enumerable: false
});

พารามิเตอร์แรกเป็นออบเจ็คเป้าหมายที่ต้องการกำหนด Property ไปยัง พารามิเตอร์ที่สองเป็นชื่อของ Property ที่มีค่าเป็น String และสุดท้ายเป็นออบเจ็คที่ประกอบไปด้วย value ซึ่งเป็นค่าของ Property และ enumerable เป็นค่า Boolean เพื่อกำหนดว่าจะให้ Property สามารถวนรอบได้หรือไม่

ในกรณีนี้ เราตั้งค่า enumerable ให้กับ age เป็น false นั่นจะทำให้มันไม่สามารถวนรอบได้ด้วยคำสั่ง for in และไม่ถูกส่งกลับมาจากเมธอด Object.keys เหมือนกับที่คุณเห็นในผลลัพธ์ของโปรแกรม

เปรียบเทียบการทำงานของคำสั่ง for

สำหรับตัวอย่างสุดท้ายจะเป็นการเปรียบเทียบการใช้งานคำสั่ง for ทั้งสามรูปแบบที่คุณได้เรียนรู้ไปแล้วว่ามันแตกต่างกันอย่างไร และเราควรใช้แต่ละรูปแบบในตอนไหน นี่เป็นตัวอย่าง

let numbers = [10, 20, 30, 40, 50];

console.log("for of");
for (let item of numbers) {
    console.log(item);
}

console.log("for in");
for (let index in numbers) {
    console.log(index, numbers[index]);
}

console.log("for");
for (let i = 0; i < numbers.length; i++) {
    console.log(i, numbers[i]);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

for of
10
20
30
40
50
for in
0 10
1 20
2 30
3 40
4 50
for
0 10
1 20
2 30
3 40
4 50

ในตัวอย่าง เป็นการเปรียบเทียบการใช้งานคำสั่ง for ทั้งสามประเภทในการวนค่าในตัวแปรอาเรย์ numbers และแสดงผลค่าเหล่านั้นออกทางหน้าจอ

เมื่อคุณต้องการวนเพียงค่าในอาเรย์ เราแนะนำให้ใช้คำสั่ง for of เนื่องจากมันเป็นวิธีที่สะดวกและรวดเร็วที่สุด แต่ถ้าหากคุณต้องการใช้งาน Index ของอาเรย์ด้วย คุณสามารถใช้คำสั่ง for in จากนั้นนำ Index ที่ได้ไปเข้าถึงค่าในอาเรย์อีกที

สำหรับคำสั่ง for loop นั้นเป็นคำสั่งพื้นฐานสำหรับการวนซ้ำ เราสามารถใช้มันเพื่อทำงานเหมือนกับคำสั่ง for of และ for in ได้ การใช้คำสั่ง for loop จะทำให้เราควบคุมการวนรอบได้ตามใจชอบ แต่มันก็เขียนยาวขึ้นเช่นกัน

// Go by two steps
for (let i = 0; i < numbers.length; i += 2) {
    console.log(i, numbers[i]);
}

// Iterate from the end
for (let i = numbers.length - 1; i >= 0; i--) {
    console.log(i, numbers[i]);
}

ในตัวอย่างเราได้ใช้คำสั่ง for loop เพื่อวนโดยข้ามทีละสอง Index และวนโดยเริ่มจากตำแหน่งสุดท้ายในอาเรย์มายังตำแหน่งแรก นี่เป็นวิธีที่เราสามารถใช้มันสำหรับควบคุมการวนนอกเหนือจากคำสั่ง for of และ for in

ในบทของ คำสั่งวนซ้ำ for loop เราได้พูดถึงการใช้งานคำสั่ง break และ continue เพื่อควบคุมการทำงานของลูป และคุณสามารถใช้มันกับคำสั่ง for in และ for of ได้เช่นกัน

ในบทนี้ คุณได้เรียนรู้การใช้งานคำสั่งวนซ้ำ for in และ for of ในภาษา JavaScript ซึ่งเป็นคำสั่งที่ใช้สำหรับวนรอบอาเรย์หรือออบเจ็คที่สามารถวนรอบได้ และมันเป็นอีกทางเลือกหนึ่งนอกจากคำสั่ง for loop ปกติ