[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]
อาร์เรย์ของเป็นออบเจ็กต์พิเศษ และความแตกต่างจากออบเจ็กต์ทั่วไปไม่ได้เป็นเพียงการเข้าถึงและการจัดเก็บองค์ประกอบตามลำดับเท่านั้น ข้อแตกต่างที่สำคัญอีกประการหนึ่งคืออาร์เรย์สามารถวนซ้ำได้ นั่นคือ คุณสามารถใช้คำสั่ง for ... of เพื่อเข้าถึง (วนซ้ำ) องค์ประกอบทั้งหมดได้
เราก็แค่ทำการทดลองเล็กๆ กัน:
ให้ arr = [1,2,3,4,5]for(let val of arr){
console.log(val)} ผลลัพธ์การเรียกใช้โค้ด:
โค้ดด้านบนใช้คุณสมบัติการวนซ้ำของอาร์เรย์ เมื่อเราเข้าถึงองค์ประกอบอาร์เรย์ เราไม่จำเป็นต้องใช้ตัวห้อยขององค์ประกอบ
จะเกิดอะไรขึ้นถ้าเราใช้คำสั่ง for ... of กับวัตถุปกติ?
ให้ obj = {
ชื่อ'เสี่ยวหมิง'
age:12,}for(let para of obj){ //โค้ดจะรายงานข้อผิดพลาด console.log(para)} ผลการดำเนินการจะเป็นดังนี้:
สิ่งนี้พิสูจน์ว่ามีช่องว่างที่ทำซ้ำได้ระหว่างวัตถุธรรมดาและอาร์เรย์ เราเรียกวัตถุที่มีฟังก์ชันวนซ้ำ วัตถุที่ทำซ้ำได้
หากเราต้องการให้วัตถุสามารถวนซ้ำได้ เราต้องเพิ่มวิธีการที่เรียกว่า Symbol.iterator ให้กับวัตถุ ( Symbol ในตัวที่ทำให้วัตถุสามารถวนซ้ำได้โดยเฉพาะ)
ฟังก์ชันของเมธอดประกอบด้วย:
for ... of loop เพื่อวนซ้ำอ็อบเจ็กต์ ระบบจะเรียกใช้เมธอด Symbol.iterator และเมธอดนี้จะต้องส่งคืน ตัววนซ้ำ (อ็อบเจ็กต์ที่มีเมธอด next() )for ... of จะเรียกใช้เมธอด next() ของตัววนซ้ำอย่างต่อเนื่องเพื่อรับองค์ประกอบถัดไปnext() จะต้องเป็นไปตามรูปแบบ: {done:Boolean,value:any} เมื่อ done:true การวนซ้ำจะสิ้นสุด มิฉะนั้น value จะเป็นค่าถัดไปตัววนซ้ำ: ตัววนซ้ำ
เป็นแนวคิดที่ยืมมาจากภาษาเช่น
C++หลักการของตัววนซ้ำจะชี้ไปที่องค์ประกอบในการรวบรวมข้อมูล คุณสามารถรับองค์ประกอบที่ชี้ไปหรือจะย้ายก็ได้ เพื่อรับองค์ประกอบอื่นๆ ตัววนซ้ำจะคล้ายกับการขยายตัวห้อยในอาร์เรย์ โครงสร้างข้อมูลต่างๆ เช่น รายการที่เชื่อมโยง (List) ชุด (Set) และแผนที่ (Map) มีตัววนซ้ำที่สอดคล้องกันตัววนซ้ำใน
JSได้รับการออกแบบมาเป็นพิเศษ สำหรับ การดำเนินการนี้ ตัววนซ้ำที่ได้รับในแต่ละครั้งจะชี้ไปที่องค์ประกอบแรกในตอนแรกเสมอ และตัววนซ้ำจะมีพฤติกรรมnext()เท่านั้น จนกว่าจะได้รับองค์ประกอบสุดท้ายของชุดข้อมูล เราไม่สามารถย้ายตำแหน่งของตัววนซ้ำได้อย่างยืดหยุ่น ดังนั้น งานของตัววนซ้ำคือสำรวจองค์ประกอบต่างๆ ในชุดข้อมูลตามลำดับที่แน่นอน
ใช้วัตถุที่ทำซ้ำได้:
ให้ obj = {
จาก:1,
ถึง:5,}obj[Symbol.iterator] = function(){
//ส่งคืนตัววนซ้ำ return {
ปัจจุบัน:this.from,
ล่าสุด:this.to,
ต่อไป(){
ถ้า(this.current<this.last){
ส่งคืน {เสร็จสิ้น: เท็จค่า: this.current ++}
}อื่น{
ส่งคืน {เสร็จสิ้น: จริง} // สิ้นสุดการวนซ้ำ}
-
}}สำหรับ(ให้พาราของ obj){
console.log(para)} เอฟเฟกต์การเรียกใช้โค้ด:
โปรดทราบว่าแม้ว่าวัตถุข้างต้นสามารถวนซ้ำได้ แต่วัสดุที่ใช้สำหรับการวนซ้ำไม่ใช่วัตถุ แต่เป็นตัววนซ้ำ (รวมถึงวัตถุด้วย) ที่ส่งคืนโดย Symbol.iterator
โค้ดด้านบนสร้างฟังก์ชันในตัว Symbol.iterator() ซึ่งส่งคืนวัตถุตัววนซ้ำ นอกจากนี้เรายังสามารถใช้วิธีอื่นในการใช้งานตัววนซ้ำ: ทำให้วัตถุเป็นตัววนซ้ำ:
ให้ obj = {
จาก:1,
ถึง:5,
[สัญลักษณ์.ตัววนซ้ำ](){
this.current = this.from;
ส่งคืนสิ่งนี้ // ส่งคืนวัตถุเอง},
ถัดไป(){//เพิ่มวิธีการถัดไปให้กับวัตถุ if(this.current<this.to){
ส่งคืน {เสร็จสิ้น: เท็จค่า: this.current ++}
}อื่น{
ส่งคืน {เสร็จสิ้น: จริง}
-
}}สำหรับ(ให้พาราของ obj){
console.log(para)} เอฟเฟกต์การเรียกใช้โค้ดจะเหมือนกับรูปภาพด้านบน
แม้ว่าโค้ดจะกระชับมากขึ้นโดยการทำเช่นนี้ เนื่องจากไม่มีการสร้างออบเจ็กต์ที่สามารถทำซ้ำได้ใหม่ เราจึงไม่สามารถดำเนินการ
for ... ofลูปสองครั้งเพื่อวนซ้ำออบเจ็กต์เดียวกันในเวลาเดียวกันได้ แต่การวนซ้ำแบบขนานสองครั้งบนออบเจ็กต์เดียวกันนั้นมีค่ามาก หายาก.
เราสามารถสรุปแนวคิดของอ็อบเจ็กต์ที่ทำซ้ำได้:
สิ่งที่เรียกว่าอ็อบเจ็กต์แบบวนซ้ำได้คืออ็อบเจ็กต์ธรรมดาที่มีวิธีหนึ่งที่เรียกว่า Symbol.iterator มากกว่าอ็อบเจ็กต์ทั่วไป วิธีนี้จะส่งคืนตัววนซ้ำ
อีกทางหนึ่ง อ็อบเจ็กต์ที่มี Symbol.iterator และวิธี next ก็เป็นอ็อบเจ็กต์ที่ทำซ้ำได้เช่นกัน
อาร์เรย์และสตริงสามารถวนซ้ำได้ เราสามารถใช้คำสั่ง for...of เพื่อวนซ้ำองค์ประกอบอักขระในอาร์เรย์ได้:
ให้ str = '123'for(let c of str){
console.log(c)} นอกจากนี้ยังใช้ได้กับคู่ตัวแทน (อักขระขยาย UTF-16 ):
ให้ str = '...'for(let c of str){
console.log(c)} ผลการดำเนินการมีดังนี้:
ไม่เพียงแต่ for...of คำสั่งที่สามารถใช้ตัววนซ้ำได้ เรายังสามารถเรียกตัววนซ้ำได้อย่างชัดเจน:
la str = '12345'let itr = str[Symbol.iterator]() While(true){
ให้ผลลัพธ์ = itr.next()
ถ้า(result.done)แตก;
console.log(result.value)} เอฟเฟกต์การเรียกใช้โค้ด:
โค้ดด้านบนดำเนินการสำรวจอักขระของสตริง คุณไม่คิดว่าวัตถุที่ทำซ้ำได้จะไม่ลึกลับอีกต่อไป!
วัตถุที่และวัตถุที่ทำซ้ำได้นั้นคล้ายกันมากในแง่ของฟังก์ชันการสำรวจเส้นทาง ทั้งสองสามารถเข้าถึงองค์ประกอบภายในได้อย่างสะดวก แต่ยังคงมีความแตกต่างที่ชัดเจนระหว่างทั้งสอง:
iterable : วัตถุที่ใช้ Symbol.iterator ;array-like : มีดัชนีตัวเลขและมีแอตทริบิวต์ lengthสตริงเป็นวัตถุที่สามารถทำซ้ำได้แม้ว่าจะเป็นวัตถุที่มีลักษณะคล้ายอาร์เรย์ก็ตาม
วัตถุที่ทำซ้ำได้และคล้ายอาร์เรย์มักจะไม่ใช่อาร์เรย์ หากเราต้องการแปลงวัตถุที่ทำซ้ำได้หรือคล้ายอาร์เรย์ให้เป็นอาร์เรย์ เราจำเป็นต้องใช้เมธอด Array.from
ใช้ Array.from เพื่อแปลงสตริงเป็นอาร์เรย์:
la str = '123' la arr = Array.from(str)console.log(arr)
เอฟเฟกต์การเรียกใช้โค้ดมีดังนี้:
แปลงวัตถุที่มีลักษณะคล้ายอาร์เรย์ที่กำหนดเองให้เป็นอาร์เรย์:
ให้ obj = {
0:'0',
1:'1',
2:'2',
length:3}let arr = Array.from(obj)console.log(arr) ผลการเรียกใช้โค้ด:
ไวยากรณ์ที่สมบูรณ์ของ Array.from :
Array.from(obj[, mapFunc, thisArg])
เมธอด mapFunc จะถูกเรียกใช้บนแต่ละอิลิเมนต์ที่ทำซ้ำได้หรือคล้ายอาร์เรย์ก่อนที่จะสร้างอาร์เรย์ หาก mapFunc เป็นวิธีสมาชิก คุณสามารถใช้ thisArg ได้ เพื่อให้ตัวชี้ this
ตัวอย่างเช่น:
ให้ str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)
ผลการเรียกใช้โค้ด:
ที่นี่ ฟังก์ชันการแมปใช้ในการแปลงอาร์เรย์อักขระที่ควรสร้างเป็นอาร์เรย์ตัวเลข
อ็อบเจ็กต์for...of ไวยากรณ์ อ็อบเจ็กต์nextSymbol.iteratorSymbol.iterator พื้นฐานของอ็อบเจ็กต์ทั่วไปnext จะต้องเป็นไปตามรูปแบบ {done:Boolean,value:nextVal} เมื่อ done:true การวนซ้ำจะArray.from วัตถุที่ทำซ้ำได้เป็นอาร์เรย์ ;
[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับหลักการใช้งานของอาร์เรย์คลาส JavaScript และวัตถุที่ทำซ้ำได้ เครือข่ายซอร์สโค้ด!