ECMAScript กำหนดวิธีการวนซ้ำ 5 วิธีสำหรับอาร์เรย์ แต่ละวิธีจะได้รับพารามิเตอร์สองตัว: ฟังก์ชันที่จะรันโดยแต่ละรายการเป็นอาร์กิวเมนต์ และอ็อบเจ็กต์ขอบเขตเพิ่มเติมเป็นบริบทที่ฟังก์ชันถูกรัน (ส่งผลต่อค่าของสิ่งนี้ในฟังก์ชัน) ฟังก์ชันที่ส่งผ่านไปยังแต่ละวิธีจะได้รับพารามิเตอร์สามตัว ได้แก่ องค์ประกอบอาร์เรย์ ดัชนีองค์ประกอบ และอาร์เรย์เอง ขึ้นอยู่กับวิธีการเฉพาะ ผลลัพธ์ของฟังก์ชันนี้อาจหรือไม่ส่งผลต่อค่าที่ส่งคืนของวิธีการนั้นก็ได้ วิธีการวนซ้ำ 5 วิธีของอาเรย์มีดังนี้
1. วิธีการแมป: เรียกใช้ฟังก์ชันที่ส่งผ่านในแต่ละรายการของอาร์เรย์และส่งคืนอาร์เรย์ที่ประกอบด้วยผลลัพธ์ของการเรียกใช้ฟังก์ชันแต่ละครั้ง
นอกจากนี้ยังสามารถเข้าใจได้ว่า: หลังจากดำเนินการประมวลผลพิเศษกับแต่ละองค์ประกอบในอาร์เรย์แล้ว ให้ส่งคืนอาร์เรย์ใหม่ .
ตัวอย่างเช่น:
ก่อนที่จะลดความซับซ้อนของอาร์เรย์ราคา:
ให้ราคา=[50,80,90]
ราคา=prices.map((รายการ,ดัชนี)=>{
คืนสินค้า+"หยวน"
-
หลังตัวย่อของ
console.log(prices):
la price=[50,80,120] //เติม "หยวน" หลังราคาต่อหน่วย price=price.map(item=>item+"หยวน") console.log(price)//เอาต์พุตคือ ['50 yuan', '80 yuan', '90 yuan']
สถานการณ์การใช้งาน ตัวอย่างเช่น: แอปเพล็ต WeChat Douban Film Review
ใช้วิธีการ map เพื่อแทนที่ xxx ด้วย www
แทนที่ ( ) วิธีการ ใช้เพื่อแทนที่อักขระบางตัวด้วยอักขระอื่นในสตริง หรือแทนที่สตริงย่อยที่ตรงกับนิพจน์ทั่วไป
ให้ movies=[{id:1,name:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"Shawshank Redemption",imgUrl :" http://xxx.douban.com/2.jpg"},{id:3,name:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"}]
ภาพยนตร์=ภาพยนตร์.แผนที่(รายการ=>{
item.imgUrl=item.imgUrl.replace("xxx", "www")
คืนสินค้า
-
console.log(movies) 2. วิธีการกรอง: เรียกใช้ฟังก์ชันที่ส่งผ่านในแต่ละรายการของอาร์เรย์ รายการที่ฟังก์ชันคืนค่าจริงจะสร้างอาร์เรย์และส่งคืน
นอกจากนี้ยังสามารถเข้าใจได้ว่า: กรององค์ประกอบในอาร์เรย์ที่ตรงตามข้อกำหนดและส่งคืนอาร์เรย์ใหม่
ให้คะแนน=[80,59,10,55,90,88]
ให้ arr=scores.filter(item=>{
ถ้า(รายการ>60){
กลับเป็นจริง
-
-
console.log(arr)//Output ดังภาพด้านล่าง Output ดังภาพด้านล่างและกรองอาร์เรย์ที่น้อยกว่า 60 ออก
หลังตัวย่อ:
ให้คะแนน=[80,59,10,55,90,88] ให้ arr=scores.filter(item=>item>=60) console.log(arr)//(3) [80, 90, 88]
ในสถานการณ์สมมติแอปพลิเคชัน คุณสามารถวางอาร์เรย์ชื่อเมืองแล้วค้นหาคำหลักได้ เฉพาะเมื่อข้อมูลมีขนาดเล็กเท่านั้น หนังสือเกี่ยวกับตัวอย่างในภายหลัง สถานการณ์การใช้งานของระบบการจัดการจะรวมการค้นหาคำหลักเพื่อใช้อ้างอิง
Some แปลเป็นภาษาอังกฤษว่า some และ every แปลเป็น all ดังนั้นบางวิธีจะคืนค่าเป็นจริงตราบใดที่วิธีใดวิธีหนึ่งเป็นจริง ในทางตรงกันข้าม every() วิธีการทั้งหมดจะต้องคืนค่าจริงก่อนจึงจะสามารถส่งคืนค่าจริงได้ แม้ว่าจะมีค่าเท็จเพียงค่าเดียว ค่าเท็จก็จะถูกส่งกลับ
ใน
ระหว่างกระบวนการตัดสินอาร์เรย์ จะมีการตัดสินว่าแต่ละองค์ประกอบมีคุณสมบัติตรงตามข้อกำหนดพื้นฐานหรือไม่
จริง ตราบใดที่หนึ่งในนั้นตรงกัน มันก็จะคืนค่าเป็นจริง
ทุกวิธี: เท็จอย่างหนึ่งคือเท็จ ตราบใดที่หนึ่งในนั้นไม่ตรงตามข้อกำหนด มันจะคืนค่าเท็จ
//ให้คะแนนของนักเรียนทุกคนในชั้นเรียนเพื่อดูว่าทุกคนผ่านหรือไม่ ให้คะแนน=[80,49,12 ,50,69 ]
ให้ result=scores.every(item=>item>=60)
console.log(result)//Return false สถานการณ์การใช้งานไม่ผ่านทั้งหมด : ก่อนที่โปรแกรมตรวจสอบส่วนหน้าจะส่งคำขอ AJAX โดยปกติจะต้องผ่านการตรวจสอบทั้งหมดก่อนที่จะส่งได้ จะมีการติดตามผลแยกต่างหาก บทความเกี่ยวกับตัวอย่างโค้ด เครื่องมือตรวจสอบข้อมูลส่วนหน้า
5. วิธีการลด: ECMAScript มีวิธีผสานสองวิธีสำหรับอาร์เรย์: ลด() และ ลดขวา() ทั้งสองวิธีวนซ้ำรายการทั้งหมดของอาร์เรย์และสร้างค่าส่งคืนสุดท้ายตามสิ่งนี้ ลด () วิธีการลัดเลาะจากรายการแรกไปยังรายการสุดท้ายในอาร์เรย์ และลด Right() ลัดเลาะจากรายการสุดท้ายไปยังรายการแรก นอกจากนี้ยังสามารถเข้าใจได้ง่ายว่า: การรวมองค์ประกอบในอาร์เรย์และส่งกลับเนื้อหาใหม่
ทั้งสองวิธียอมรับพารามิเตอร์สองตัว: ฟังก์ชันผสานที่จะรันในแต่ละรายการ และค่าเริ่มต้นที่เป็นตัวเลือกเพื่อเริ่มการผสาน ฟังก์ชันที่ส่งผ่านไปยัง ลด() และ ลดขวา() จะได้รับพารามิเตอร์สี่ตัว ได้แก่ ค่าที่ผสานก่อนหน้า รายการปัจจุบัน ดัชนีของรายการปัจจุบัน และอาร์เรย์เอง ค่าใดๆ ที่ส่งคืนโดยฟังก์ชันนี้จะถูกใช้เป็นอาร์กิวเมนต์แรกในการเรียกฟังก์ชันเดียวกันครั้งถัดไป หากพารามิเตอร์ตัวที่สองที่เป็นทางเลือก (เป็นค่าเริ่มต้นในการผสาน) ไม่ได้ถูกส่งผ่านไปยังทั้งสองวิธีนี้ การวนซ้ำครั้งแรกจะเริ่มต้นจากรายการที่สองของอาร์เรย์ ดังนั้นพารามิเตอร์แรกที่ส่งผ่านไปยังฟังก์ชันผสานคืออาร์เรย์ พารามิเตอร์ที่สองคือรายการที่สองของอาร์เรย์
ขั้นแรกให้เข้าใจแนวคิดผ่านรหัสต่อไปนี้:
ความหมายของพารามิเตอร์ทั้งสี่ในรหัสต่อไปนี้:
ก่อนหน้า: ผลลัพธ์ที่ส่งคืนโดย
รายการการดำเนินการก่อนหน้า: องค์ประกอบของ
ดัชนีการดำเนินการนี้: ค่าดัชนีขององค์ประกอบของ
อาร์เรย์การดำเนินการนี้: อาร์เรย์ของการดำเนินการปัจจุบัน
ให้ arr =[20,40,50,21]
ให้ค่า=arr.reduce((ก่อนหน้า,รายการ,ดัชนี,อาร์เรย์)=>{
console.log("ก่อนหน้า"+ก่อนหน้า)
console.log("รายการ"+รายการ)
console.log("ดัชนี"+ดัชนี)
console.log("อาร์เรย์"+อาร์เรย์)
console.log("____________________")
}) ผลลัพธ์คือ:
ทำไมมันวนซ้ำแค่สามครั้ง? ก่อนหน้าสามารถตั้งค่าเริ่มต้นได้ หากไม่ได้ตั้งค่าเริ่มต้น องค์ประกอบแรกจะเป็นค่าก่อนหน้า
เหตุใด prev จึงไม่ได้กำหนดไว้ในลูปที่สองและสาม ในการวนซ้ำที่สอง คุณต้องได้รับค่าที่ส่งคืนของลูปแรกเนื่องจากไม่ได้ตั้งค่าการส่งคืนในครั้งแรก ดังนั้นคุณจึงไม่ได้กำหนดไว้ และต่อๆ ไป
หากคุณเข้าใจสิ่งที่กล่าวมาข้างต้น เราก็จะเริ่มใช้การรวมอาร์เรย์:
ปล่อยให้ arr=[20 ,40,50,21]
ให้ค่า=arr.reduce((ก่อนหน้า,รายการ,ดัชนี,อาร์เรย์)=>{
console.log("ก่อนหน้า"+ก่อนหน้า)
กลับรายการก่อนหน้า+รายการ
// ให้ผลตอบแทนและวนซ้ำสี่ครั้ง ครั้งแรกที่เอาต์พุตก่อนหน้าคือ 20 ครั้งที่สอง 40+20 คือ 60 ครั้งที่สามคือ 110 และครั้งสุดท้ายที่เอาต์พุต 131
-
console.log(values) //131 เมื่อใดจะต้องตั้งค่าเริ่มต้นของ prev?
เพิ่ม <li> </li> ให้กับแต่ละองค์ประกอบอาร์เรย์
ให้ arr=["Eason Chan","Miriam Yeung","Juji Ku","Hacken Lee"]
//ตั้งค่าเริ่มต้นสำหรับก่อนหน้า: ฟังก์ชัน 1 องค์ประกอบทั้งหมดมีส่วนร่วมในลูป 2 กำหนดเนื้อหาที่ส่งคืน ให้ result=arr.reduce((prev,item)=>{
//console.log(ก่อนหน้า)
กลับก่อนหน้า+"<li>"+รายการ+"</li>"
},"")//เพิ่มสตริงว่าง console.log(result)//<li>Eason Chan</li><li>Miriam Yeung</li><li>Juji Ku</li><li>Keqin Li</li> li> มาดูอีกกรณีหนึ่ง:
ใช้การลดเพื่อทำการขจัดข้อมูลซ้ำซ้อนของอาร์เรย์ สร้างอาร์เรย์ว่าง ข้ามอาร์เรย์ดั้งเดิมตามลำดับ แทรกสิ่งที่ไม่อยู่ในอาร์เรย์ว่าง และสิ่งใดที่ไม่ได้แทรกจะไม่ถูกแทรกอีกต่อไป
ให้ arr=["จางซาน", "หลี่ซือ", "หลี่ซือ", "หวังเอ๋อ", "หลี่ซือ", "มาซี", "จางซาน"]
ให้ result=arr.reduce((prev,item)=>{
//Includes กำหนดว่ามีองค์ประกอบที่ระบุหรือไม่และส่งกลับ t หรือไม่เช่นนั้นจะส่งกลับ f
ถ้า(!prev.includes(รายการ)){
prev.push(item) //.push() เพิ่มรายการใหม่ให้กับอาร์เรย์}
กลับก่อนหน้า
},[])//ตั้งค่าเริ่มต้นอาร์เรย์ว่าง console.log(result)//(4) ['Zhang San', 'Li Si', 'Wang Er', 'Mazi'] อีกกรณีหนึ่ง: (ลดวิธีที่คุณ ทำได้หลายอย่าง)
นับจำนวนครั้งของตัวอักษร ดูโค้ดข้างล่างนี้
ให้ arr=["a", "b", "a", "c", "b", "a", "c"]
//ส่งคืนอ็อบเจ็กต์เพื่อนับจำนวนครั้งของอักขระแต่ละตัว {a:2,w:3}
ให้ result=arr.reduce((prev,item)=>{
// //ตรวจสอบว่าวัตถุมีคุณสมบัติที่สอดคล้องกันหรือไม่ if(item in prev){
//ค้นหาค่าแอตทริบิวต์ที่เกี่ยวข้อง++
prev[item]++ //หากคุณต้องการตั้งค่าหรือรับแอตทริบิวต์ของวัตถุในอนาคต คุณลักษณะนี้จะถูกแทนด้วยตัวแปรในรูปแบบของวงเล็บ []++ หากเป็นโดยตรง ชื่อแอตทริบิวต์จะอยู่ใน รูปแบบของ.}else{
ก่อนหน้า[รายการ]=1
-
กลับก่อนหน้า
-
console.log(ผลลัพธ์)//{a: 3, b: 2, c: 2}