การแยกวิเคราะห์อาร์เรย์ JavaScript ลด () ตัวอย่างการใช้งานวิธีการ

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

คำนำ

วันนี้ขอมาแนะนำวิธีนี้แบบละเอียดนะครับ หวังว่าจะเป็นประโยชน์กับคุณ

นี่คือการใช้งานพื้นฐานของการลด:

 วาร์ arr = [1, 2, 3];
ฟังก์ชั่นลด (parmar1, parmar2){
-
arr.ลด(ลด)

ลดเป็นวิธีการบนวัตถุต้นแบบอาร์เรย์ที่ช่วยเราดำเนินการอาร์เรย์ มันใช้ฟังก์ชันอื่นเป็นอาร์กิวเมนต์ ซึ่งสามารถเรียกว่าตัวลดได้

ตัวลดใช้พารามิเตอร์สองตัว พารามิเตอร์ตัวแรก param1 คือผลลัพธ์ของการรันตัวลดครั้งสุดท้าย หากนี่เป็นครั้งแรกที่รันตัวลด ค่าเริ่มต้นของ param1 จะเป็นค่าขององค์ประกอบแรกของอาร์เรย์

วิธีการลดจะวนซ้ำแต่ละองค์ประกอบในอาร์เรย์ เช่นเดียวกับใน for วนซ้ำ และส่งผ่านค่าปัจจุบันในลูปเป็นพารามิเตอร์ 2

หลังจากสำรวจอาร์เรย์แล้ว ลด จะส่งกลับผลลัพธ์ที่คำนวณโดยตัวลดสุดท้าย

ลองดูตัวอย่างโดยละเอียด

 var arr = ['a', 'b', 'c', 'd', 'e'];
ฟังก์ชั่นเพิ่ม(x, y) {
กลับ x + y;
-
arr.ลด(เพิ่ม)

ต่อไป เรามาสำรวจวิธีการดำเนินการโค้ดข้างต้นกัน

ในโค้ดนี้ จะมีการเพิ่มตัวลด

ประการแรก เนื่องจากเรากำลังดำเนินการเพิ่มเป็นครั้งแรก องค์ประกอบแรก 'a' ในอาร์เรย์จะถือเป็นพารามิเตอร์แรกของการเพิ่ม จากนั้นลูปจะเริ่มจากองค์ประกอบที่สอง 'b' ของอาร์เรย์ คราวนี้ 'b' เป็นอาร์กิวเมนต์ที่สองที่จะเพิ่ม

หลังจากการคำนวณครั้งแรก เราจะได้ผลลัพธ์ 'ab' ผลลัพธ์นี้จะถูกแคชและใช้เป็น param1 ในการคำนวณเพิ่มเติมครั้งต่อไป ในเวลาเดียวกัน พารามิเตอร์ที่สาม 'c' ในอาร์เรย์จะถูกใช้เป็น param2 ของการเพิ่ม

ในทำนองเดียวกัน ให้ลดการดำเนินการต่อผ่านองค์ประกอบในอาร์เรย์ โดยเรียกใช้ 'abc' และ 'd' เป็นอาร์กิวเมนต์ที่จะเพิ่ม

ในที่สุด หลังจากที่สำรวจองค์ประกอบสุดท้ายในอาร์เรย์แล้ว ผลลัพธ์การคำนวณจะถูกส่งกลับ

ตอนนี้เราได้ผลลัพธ์แล้ว: 'abcde'

ดังนั้นเราจะเห็นได้ว่าการลดยังเป็นวิธีการสำรวจอาร์เรย์ด้วย! โดยจะใช้ค่าของแต่ละองค์ประกอบในอาร์เรย์ตามลำดับและดำเนินการฟังก์ชันตัวลดขนาด

แต่เราจะเห็นว่าวงด้านบนไม่มีความสวยงามที่กลมกลืนกัน เนื่องจากเราใช้องค์ประกอบแรกของอาร์เรย์ ซึ่งก็คือ 'a' เป็น param1 เริ่มต้น จากนั้นจึงวนซ้ำองค์ประกอบที่สองของอาร์เรย์เพื่อรับ param2

ที่จริงแล้ว เราสามารถระบุพารามิเตอร์ตัวที่สองในหน่วยลดเป็นค่าเริ่มต้นของ param1 ของฟังก์ชันตัวลด ดังนั้นจะได้ param2 ในลูปโดยเริ่มจากองค์ประกอบแรกของอาร์เรย์

รหัสมีดังนี้:

 var arr = ['a', 'b', 'c', 'd', 'e'];
ฟังก์ชั่นเพิ่ม(x, y) {
กลับ x + y;
-
arr.reduce (เพิ่ม 's')

คราวนี้ อันดับแรกเราเรียกตัวลดด้วย 's' เป็น param1 จากนั้นวนซ้ำผ่านอาร์เรย์โดยเริ่มจากองค์ประกอบแรก

ดังนั้นเราจึงสามารถเขียนโค้ดแรกของเราใหม่โดยใช้ไวยากรณ์นี้

 var arr = ['a', 'b', 'c', 'd', 'e'];
ฟังก์ชั่นเพิ่ม(x, y) {
กลับ x + y;
-
arr.reduce (เพิ่ม '')

ต่อไป เราจะเข้าสู่บทการเขียนโปรแกรมจริงเพื่อสัมผัสกับพลังอันทรงพลังของการลด

1. การสะสมและการคูณสะสม

คุณจะทำอย่างไรหากเราต้องการหาผลรวมขององค์ประกอบทั้งหมดในอาร์เรย์?

โดยทั่วไปแล้ว คุณอาจเขียนข้อความประมาณนี้:

 การสะสมฟังก์ชัน (arr) {
ให้ผลรวม = 0;
สำหรับ (ให้ i = 0; i < arr.length; i++) {
ผลรวม = ผลรวม + arr[i];
-
จำนวนเงินที่ส่งคืน;
-

แน่นอนว่าคุณอาจมีวิธีเขียนแบบอื่น แต่ตราบใดที่คุณใช้ for loop โค้ดก็จะซ้ำซ้อน

มาดูกันว่าฟังก์ชันการสะสมข้างต้นทำอะไรได้บ้าง:

• ตั้งค่าผลรวมเริ่มต้นเป็นศูนย์

• รับองค์ประกอบแรกในอาร์เรย์แล้วรวมเข้าด้วยกัน

• แคชผลลัพธ์ของขั้นตอนก่อนหน้าเป็นผลรวม

• นำองค์ประกอบอื่นๆ ในอาเรย์ออกมาตามลำดับและดำเนินการข้างต้น

• ส่งคืนผลลัพธ์สุดท้าย

เราจะเห็นได้ว่าเมื่อเราอธิบายขั้นตอนข้างต้นด้วยคำพูด จะเห็นได้ชัดว่าสอดคล้องกับการใช้คำว่าลด ดังนั้นเราจึงสามารถเขียนโค้ดข้างต้นใหม่โดยใช้การลด:

 การสะสมฟังก์ชัน (arr) {
ฟังก์ชั่นลด (x, y) {
กลับ x + y
-
กลับ arr.reduce (ลด, 0);
-

หากคุณคุ้นเคยกับการใช้ฟังก์ชันลูกศร โค้ดด้านบนจะดูสะอาดตายิ่งขึ้น:

 การสะสมฟังก์ชัน (arr) {
กลับ arr.reduce((x, y) => x + y, 0);
-

โค้ดบรรทัดเดียวก็เสร็จแล้ว!

แน่นอนว่าการคูณและการสะสมสะสมจะเหมือนกันทุกประการ:

 ฟังก์ชั่นการคูณ (arr) {
กลับ arr.reduce((x, y) => x * y, 1);
-

หลายครั้งเราต้องเพิ่มน้ำหนักเมื่อทำการสรุป ซึ่งสามารถสะท้อนถึงความสง่างามของการลดได้ดีกว่า

 คะแนนคอนสตรัค = [
{ คะแนน: 90, หัวเรื่อง: "HTML", น้ำหนัก: 0.2 },
{ คะแนน: 95, หัวเรื่อง: "CSS", น้ำหนัก: 0.3 },
{ คะแนน: 85 หัวเรื่อง: "JavaScript" น้ำหนัก: 0.5 }
-
const result = Scores.reduce((x, y) => x + y.score * y.weight, 0); // 89

2. รับค่าสูงสุดและต่ำสุดของอาร์เรย์

หากคุณต้องการรับค่าสูงสุดและต่ำสุดของอาร์เรย์คุณสามารถเขียน:

 ฟังก์ชั่นสูงสุด (arr) {
ให้สูงสุด = arr[0];
สำหรับ (ให้ ele ของ arr) {
ถ้า (ele > สูงสุด) {
สูงสุด = เอเล;
-
-
กลับสูงสุด;
-

นี่ก็เหมือนกับเมื่อก่อน ถ้าเราใช้การลด เราก็สามารถทำได้โดยใช้โค้ดบรรทัดเดียว

 ให้ arr = [3.24, 2.78, 999];
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

3. คำนวณความถี่ของการเกิดองค์ประกอบในอาเรย์

เรามักจะต้องนับจำนวนครั้งของแต่ละองค์ประกอบในอาร์เรย์ วิธีการลดช่วยให้เราบรรลุเป้าหมายนี้

 ฟังก์ชั่นนับความถี่ (arr) {
กลับ arr.reduce (ฟังก์ชั่น (ผลลัพธ์, ele) {
// ตัดสินว่าองค์ประกอบนี้เคยถูกนับมาก่อนหรือไม่
ถ้า (result.get(ele) != ไม่ได้กำหนด) {
-
* หากนับองค์ประกอบนี้มาก่อน
* เพิ่มความถี่ในการเกิดขึ้น 1
-
result.set(เอเล, result.get(เอเล) + 1)
} อื่น {
-
* หากไม่เคยนับองค์ประกอบนี้มาก่อน
* ตั้งค่าความถี่ของการเกิดเป็น 1
-
result.set(เอเล, 1);
-
ส่งคืนผลลัพธ์;
} แผนที่ใหม่ ());
-

โปรดทราบว่าเราใช้วัตถุแผนที่แทนวัตถุเพื่อจัดเก็บความถี่ทางสถิติ เนื่องจากองค์ประกอบในอาร์เรย์อาจเป็นประเภทวัตถุ และคีย์ของวัตถุสามารถเป็นได้เฉพาะประเภทสตริงหรือสัญลักษณ์เท่านั้น

นี่คือสองตัวอย่าง:

ในทำนองเดียวกัน หากคุณต้องการนับความถี่ของอักขระแต่ละตัวในสตริง คุณสามารถแปลงสตริงเป็นอาร์เรย์อักขระก่อน แล้วจึงปฏิบัติตามวิธีการข้างต้น

 ให้ str = 'สวัสดีชาวโลก';
str.split('').reduce((ผลลัพธ์, currentChar) => {
ผลลัพธ์ [currentChar] ? ผลลัพธ์ [currentChar] ++ : ผลลัพธ์ [currentChar] = 1;
ส่งคืนผลลัพธ์;
- 

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

4. การทำให้อาร์เรย์หลาย ๆ แบนราบ

 ฟังก์ชั่นแบน (arr = []) {
กลับ arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
- 

แต่ละองค์ประกอบในอาร์เรย์มีการเข้าถึงตามลำดับผ่านการลด หากเราพบว่าองค์ประกอบนั้นยังคงเป็นอาร์เรย์ เราจะเรียกเมธอดแบบวนซ้ำ