Hướng dẫn về phương pháp rút gọn trong Javascript – giảm hoạt động như thế nào trong javascript

bởi Josh Pitzalis Phương pháp JavaScript’s Reduce hoạt động như thế nào, khi nào sử dụng nó và một số điều thú vị mà nó có thể thực hiện Tín dụng hình ảnh cho Karthik Srinivas [https://thenounproject.com/term/minimize/592575/]. Cảm ơn bạn Karthik [https://twitter.com/aathis18].JavaScript’s Reduce method là một trong những nền tảng của lập trình hàm. Hãy cùng khám phá cách hoạt động của nó khi bạn

Bạn đang xem: cách giảm hoạt động trong javascript

của Josh Pitzalis

Phương thức Reduce của JavaScript hoạt động như thế nào, khi nào sử dụng nó và một số những điều thú vị mà nó có thể làm

Tín dụng hình ảnh cho Karthik Srinivas . Cảm ơn bạn Karthik .

Phương pháp rút gọn của JavaScript là một trong những nền tảng của lập trình hàm. Hãy cùng khám phá cách hoạt động của nó, khi nào bạn nên sử dụng nó và một số điều thú vị mà nó có thể làm.

Giảm cơ bản

< p> Sử dụng khi : Bạn có một mảng số tiền và bạn muốn cộng tất cả chúng lại.

  const euro = [29,76 41,85, 46,5];

const sum = euro.reduce ((tổng, số tiền) = & gt; tổng số + số tiền);

sum // 118.11  

Cách sử dụng:

  • Trong ví dụ này, Reduce chấp nhận hai tham số, tổng và số tiền hiện tại.
  • Phương thức Reduce sẽ xoay vòng qua từng số trong mảng giống như trong vòng lặp for.
  • Khi vòng lặp bắt đầu, tổng giá trị là số ở ngoài cùng bên trái (29,76) và dòng điện số tiền bên cạnh nó (41,85).
  • Trong ví dụ cụ thể này, chúng tôi muốn thêm số tiền hiện tại vào tổng số tiền.
  • Phép tính được lặp lại cho mỗi số tiền trong mảng, nhưng mỗi khi giá trị hiện tại thay đổi thành số tiếp theo trong mảng, di chuyển sang phải.
  • Khi không còn số nào nữa trong mảng, phương thức sẽ trả về tổng giá trị.
  • Phiên bản ES5 của Phương pháp Rút gọn trong JavaScript

    Nếu bạn chưa bao giờ sử dụng cú pháp ES6 trước đây, đừng để ví dụ trên làm bạn sợ hãi. Nó giống hệt như cách viết:

      var euro = [29,76, 41,85, 46,5];
    
    var sum = euro.reduce (hàm (tổng, số tiền) {
      trả lại tổng cộng + số tiền
    });
    
    sum // 118.11  

    Chúng tôi sử dụng const thay vì var và chúng tôi thay thế từ function bằng một “Mũi tên béo” ( = & gt; ) sau các tham số và chúng tôi bỏ từ ‘return’.

    Tôi sẽ sử dụng cú pháp ES6 cho phần còn lại của các ví dụ, vì nó ngắn gọn hơn và ít sai sót hơn.

    Tìm điểm trung bình bằng phương pháp rút gọn trong JavaScript < / h4>

    Thay vì ghi lại tổng, bạn có thể chia tổng cho độ dài của mảng trước khi trả về giá trị cuối cùng.

    Cách thực hiện điều này là tận dụng các đối số khác trong phương pháp rút gọn. Đối số đầu tiên là chỉ mục. Giống như vòng lặp for, chỉ số đề cập đến số lần trình giảm thiểu đã lặp lại trên mảng. Đối số cuối cùng là chính mảng.

      const euro = [29,76, 41,85, 46,5];
    
    const average = euro.reduce ((tổng, số tiền, chỉ số, mảng) = & gt; {
      tổng + = số tiền;
      if (index === array.length-1) {
        trả về tổng số / array.length;
      }khác {
        tổng trở lại;
      }
    });
    
    trung bình // 39,37  

    Bản đồ và Lọc dưới dạng Giảm

    Nếu bạn có thể sử dụng hàm giảm để loại bỏ trung bình thì bạn có thể sử dụng nó theo bất kỳ cách nào bạn muốn.

    Ví dụ: bạn có thể nhân đôi tổng hoặc một nửa mỗi số trước khi cộng chúng lại với nhau hoặc sử dụng câu lệnh if bên trong bộ rút gọn để chỉ thêm các số lớn hơn 10. Quan điểm của tôi là phương pháp rút gọn trong JavaScript cung cấp cho bạn một CodePen nhỏ, nơi bạn có thể viết bất kỳ logic nào bạn muốn. Nó sẽ lặp lại logic cho từng số tiền trong mảng và sau đó trả về một giá trị duy nhất.

    Vấn đề là không phải lúc nào bạn cũng phải trả về một giá trị duy nhất. Bạn có thể giảm một mảng thành một mảng mới.

    Ví dụ: hãy giảm một mảng số tiền thành một mảng khác trong đó mỗi số tiền được tăng gấp đôi. Để thực hiện việc này, chúng ta cần đặt giá trị ban đầu cho bộ tích lũy thành một mảng trống.

    Giá trị ban đầu là giá trị của tổng tham số khi quá trình giảm bắt đầu. Bạn đặt giá trị ban đầu bằng cách thêm dấu phẩy, theo sau là giá trị ban đầu của bạn bên trong dấu ngoặc đơn nhưng sau dấu ngoặc nhọn ( được in đậm trong ví dụ bên dưới ).

     const average = euro.reduce ((tổng, số tiền, chỉ số, mảng) = & gt; {
      tổng + = số tiền
      trả về tổng số / array.length
    }, 0);  

    Trong các ví dụ trước, giá trị ban đầu bằng 0 nên tôi đã bỏ qua nó. Bằng cách bỏ qua giá trị ban đầu, tổng số sẽ được mặc định thành số tiền đầu tiên trong mảng.

    Bằng cách đặt giá trị ban đầu thành một mảng trống, sau đó chúng ta có thể đẩy từng số tiền vào tổng số. Nếu chúng ta muốn giảm một mảng giá trị thành một mảng khác trong đó mọi giá trị đều được nhân đôi, chúng ta cần đẩy số tiền * 2. Sau đó, chúng ta trả về tổng số khi không còn số tiền cần đẩy nữa.

      const euro = [29,76, 41,85, 46,5];
    
    const nhân đôi = euro.reduce ((tổng, số tiền) = & gt; {
      total.push (số tiền * 2);
      tổng trở lại;
    }, []);
    
    nhân đôi // [59.52, 83.7, 93]  

    Chúng tôi đã tạo một mảng mới trong đó mọi số tiền đều được nhân đôi. Chúng tôi cũng có thể lọc ra các số mà chúng tôi không muốn tăng gấp đôi bằng cách thêm câu lệnh if vào bên trong trình rút gọn.

      const euro = [29,76, 41,85, 46,5];
    
    const trên30 = euro.reduce ((tổng, số tiền) = & gt; {
      nếu (số tiền & gt; 30) {
        total.push (số tiền);
      }
      tổng trở lại;
    }, []);
    
    above30 // [41.85, 46.5]  

    Những thao tác này là bản đồ và phương pháp lọc được viết lại dưới dạng phương thức rút gọn.

    Đối với những ví dụ này, sẽ có ý nghĩa hơn nếu sử dụng bản đồ hoặc bộ lọc vì chúng dễ sử dụng hơn. Lợi ích của việc sử dụng Reduce phát huy tác dụng khi bạn muốn lập bản đồ và lọc cùng nhau và bạn có rất nhiều dữ liệu để xem xét.

    Nếu bạn xâu chuỗi và lọc cùng nhau, bạn đang thực hiện công việc hai lần. Bạn lọc từng giá trị đơn lẻ và sau đó bạn ánh xạ các giá trị còn lại. Với tính năng giảm, bạn có thể lọc và sau đó lập bản đồ trong một lần chuyển.

    Sử dụng bản đồ và bộ lọc nhưng khi bạn bắt đầu xâu chuỗi nhiều phương pháp lại với nhau, giờ đây bạn biết rằng thay vào đó, giảm dữ liệu sẽ nhanh hơn.

    Tạo Kiểm đếm bằng phương pháp Rút gọn trong JavaScript

    Sử dụng nó khi : Bạn có một bộ sưu tập các mục và bạn muốn biết số lượng mỗi mục trong bộ sưu tập.

      const fruitBasket = ['banana', ' anh đào ',' cam ',' táo ',' anh đào ',' cam ',' táo ',' chuối ',' anh đào ',' cam ',' vả '];
    
    const count = fruitBasket.reduce ((tally, fruit) = & gt; {
      tally [fruit] = (tally [fruit] || 0) + 1;
      trả lại kiểm đếm;
    }, {})
    
    count // {banana: 2, cherry: 3, orange: 3, apple: 2, fig: 1}  

    Để kiểm đếm các mục trong một mảng, giá trị ban đầu của chúng ta phải là một đối tượng trống, không phải là một mảng trống như trong ví dụ trước.

    Vì chúng ta sẽ trả về một đối tượng, nên bây giờ chúng ta có thể lưu trữ các cặp khóa-giá trị trong tổng số.

      fruitBasket.reduce ((tally, fruit) = & gt; {
      tally [quả] = 1;
      trả lại kiểm đếm;
    }, {})  

    Trong lần nhập đầu tiên, chúng tôi muốn tên của khóa đầu tiên là giá trị hiện tại của chúng tôi và chúng tôi muốn cung cấp cho nó giá trị là 1.

    < p> Điều này cho chúng ta một đối tượng có tất cả các quả là các khóa, mỗi quả có giá trị là 1. Chúng ta muốn số lượng của mỗi quả tăng lên nếu chúng lặp lại.

    Để thực hiện điều này, trong vòng lặp thứ hai, chúng ta kiểm tra xem tổng số của chúng ta có chứa khóa với kết quả hiện tại của bộ giảm tốc hay không. Nếu không thì chúng tôi tạo ra nó. Nếu đúng thì chúng tôi tăng số tiền lên một.

      fruitBasket.reduce ((tally, fruit) = & gt; {
      if (! tally [fruit]) {
        tally [quả] = 1;
      } khác {
        tally [fruit] = tally [fruit] + 1;
      }
      trả lại kiểm đếm;
    }, {});  

    Tôi đã viết lại cùng một logic theo cách ngắn gọn hơn ở phần trên cùng.

    Làm phẳng một mảng bằng phương pháp Rút gọn trong JavaScript

    Chúng ta có thể sử dụng giảm để làm phẳng các số lượng lồng nhau thành một mảng.

    Chúng tôi đặt giá trị ban đầu thành một mảng trống và sau đó nối giá trị hiện tại với tổng.

      const data = [[1, 2, 3 ], [4, 5, 6], [7, 8, 9]];
    
    const flat = data.reduce ((tổng, số tiền) = & gt; {
      return total.concat (số tiền);
    }, []);
    
    phẳng // [1, 2, 3, 4, 5, 6, 7, 8, 9]  

    Thông thường, thông tin được lồng vào nhau theo những cách phức tạp hơn. Ví dụ: giả sử chúng ta chỉ muốn tất cả các màu trong biến dữ liệu bên dưới.

      const data = [
      {a: 'happy', b: 'robin', c: ['blue', 'green']},
      {a: 'mệt mỏi', b: 'con báo', c: ['xanh lá cây', 'đen', 'cam', 'xanh lam']},
      {a: 'sad', b: 'goldfish', c: ['green', 'red']}
    ];  

    Chúng ta sẽ xem xét từng đối tượng và lấy ra các màu sắc. Chúng tôi thực hiện điều này bằng cách chỉ số tiền.c cho mỗi đối tượng trong mảng. Sau đó, chúng tôi sử dụng vòng lặp forEach để đẩy mọi giá trị trong mảng lồng nhau thành tổng.

      const Colors = data.reduce ((total, amount) = & gt; {
      quant.c.forEach (color = & gt; {
          total.push (màu);
      })
      tổng trở lại;
    }, [])
    
    màu // ['blue', 'green', 'green', 'black', 'orange', 'blue', 'green', 'red']  

    Nếu chúng ta chỉ cần một số duy nhất thì chúng ta có thể kiểm tra tổng số đã tồn tại trước khi đẩy nó.

      const uniqueColors = data.reduce ((tổng, số tiền) = & gt; {
      quant.c.forEach (color = & gt; {
        if (total.indexOf (color) === -1) {
         total.push (màu);
        }
      });
      tổng trở lại;
    }, []);
    
    uniqueColors // ['blue', 'red', 'green', 'black', 'orange']  

    Đường ống với Reduce

    Một khía cạnh thú vị của phương pháp rút gọn trong JavaScript là bạn có thể giảm bớt các hàm cũng như số và chuỗi.

    Giả sử chúng ta có một bộ sưu tập các hàm toán học đơn giản. các hàm này cho phép chúng ta tăng, giảm, nhân đôi và giảm một nửa số tiền.

      hàm tăng (input) {return input + 1;}
    
    hàm giảm (đầu vào) {return input - 1; }
    
    function double (input) {return input * 2; }
    
    function halve (input) {return input / 2; }  

    Vì bất kỳ lý do gì, chúng ta cần tăng, sau đó nhân đôi, sau đó giảm một số tiền.

    Bạn có thể viết một hàm nhận đầu vào và trả về (đầu vào + 1) * 2 -1. Vấn đề là chúng ta biết rằng chúng ta sẽ cần phải tăng số tiền lên ba lần, sau đó nhân đôi, sau đó giảm xuống, và sau đó giảm một nửa vào một thời điểm nào đó trong tương lai. Chúng tôi không muốn phải viết lại hàm của mình mọi lúc, vì vậy chúng tôi sẽ sử dụng Reduce để tạo một đường dẫn.

    Đường ống là một thuật ngữ được sử dụng cho danh sách các hàm biến đổi một số giá trị ban đầu thành giá trị cuối cùng giá trị. Đường ống của chúng tôi sẽ bao gồm ba chức năng của chúng tôi theo thứ tự mà chúng tôi muốn sử dụng chúng.

      let pipe = [tăng, gấp đôi, giảm];  

    Thay vì giảm một mảng giá trị, chúng tôi giảm trong hệ thống các hàm của chúng tôi. Điều này hoạt động vì chúng tôi đặt giá trị ban đầu là số tiền chúng tôi muốn chuyển đổi.

      const result = pipe.reduce (function (total, func) {
      trả về func (tổng số);
    }, 1);
    
    result // 3  

    Vì đường ống là một mảng nên có thể dễ dàng sửa đổi. Nếu chúng ta muốn giảm thứ gì đó ba lần, sau đó nhân đôi nó, giảm nó và giảm một nửa thì chúng ta chỉ cần thay đổi đường dẫn.

      var pipe = [
    
      tăng,
      
      tăng,
      
      tăng,
      
      kép,
      
      giảm dần,
      
      giảm một nửa
      
    ];  

    Chức năng giảm vẫn giữ nguyên như cũ.

    Những sai lầm ngớ ngẩn cần tránh

    Nếu bạn không chuyển giá trị ban đầu vào, thì hàm Reduce sẽ giả sử mục đầu tiên trong mảng là giá trị ban đầu của bạn. Điều này hoạt động tốt trong một vài ví dụ đầu tiên vì chúng tôi đang thêm một danh sách các con số.

    Nếu bạn đang cố gắng kiểm đếm trái cây và bạn bỏ qua giá trị ban đầu thì mọi thứ sẽ trở nên kỳ lạ. Không nhập giá trị ban đầu là một sai lầm dễ mắc phải và một trong những điều đầu tiên bạn nên kiểm tra khi gỡ lỗi.

    Một lỗi phổ biến khác là quên trả lại tổng. Bạn phải trả về một cái gì đó để hàm giảm hoạt động. Luôn kiểm tra kỹ và đảm bảo rằng bạn thực sự đang trả lại giá trị mà bạn muốn.

    Công cụ, Mẹo & amp; Tài liệu tham khảo

    • Mọi thứ trong bài đăng này đều đến từ một chuỗi video tuyệt vời trên egghead có tên Giới thiệu Reduce . Tôi cung cấp toàn bộ tín dụng cho Mykola Bilokonsky và tôi biết ơn anh ấy vì tất cả những gì tôi biết về việc sử dụng Phương pháp rút gọn trong JavaScript. Tôi đã cố gắng viết lại phần lớn những gì anh ấy giải thích bằng lời của mình như một bài tập để hiểu rõ hơn về từng khái niệm. Ngoài ra, tôi dễ dàng tham khảo một bài báo hơn là một video, khi tôi cần nhớ cách thực hiện điều gì đó.
    • MDN Rút gọn tài liệu gắn nhãn cái mà tôi gọi là tổng số bộ tích lũy . Điều quan trọng là phải biết điều này vì hầu hết mọi người sẽ coi nó như một bộ tích lũy nếu bạn đọc về nó trực tuyến. Một số người gọi nó là trước như giá trị trước đó. Tất cả đều đề cập đến cùng một điều. Tôi thấy dễ dàng hơn khi nghĩ về tổng số khi tôi học giảm.
    • Nếu bạn muốn thực hành sử dụng giảm, tôi khuyên bạn nên đăng ký freeCodeCamp và hoàn thành càng nhiều thuật toán trung gian như bạn có thể sử dụng giảm.
    • Nếu các biến ‘const’ trong đoạn mã ví dụ là mới đối với bạn, tôi đã viết một bài viết khác về biến ES6 và lý do bạn có thể muốn sử dụng chúng .
    • Tôi cũng đã viết một bài báo có tên Sự cố với vòng lặp giải thích cách sử dụng map () và filter () nếu bạn mới sử dụng.

    Cảm ơn bạn đã đọc! Nếu bạn muốn được thông báo khi tôi viết một bài viết mới, vui lòng nhập email của bạn vào đây.

    Và nếu bạn thích bài viết, hãy chia sẻ nó trên mạng xã hội để những người khác có thể tìm thấy nó.


Xem thêm những thông tin liên quan đến chủ đề giảm hoạt động như thế nào trong javascript

Javascript: 04-02 Javascript có thể làm được gì? 🤔

  • Tác giả: Easy Frontend
  • Ngày đăng: 2021-11-08
  • Đánh giá: 4 ⭐ ( 5819 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này là một phần trong khoá học Javascript của mình trên Udemy.
    Đăng ký để xem full tại đây: http://course.ezfrontend.com/javascript
    ———
    js
    javascript
    javascript_tutorial
    ———
    VIDEO CHAPTERS:
    Made by: YOUR_NAME_WILL_BE_HERE
    Cảm ơn bạn nhiều nhé! ❤️
    ———
    Easy Frontend – Code xịn hơn mỗi ngày
    🔥 Khoá học Javascript: https://course.ezfrontend.com/javascript
    🎁 Khoá học ReactJS: https://course.ezfrontend.com/reactjs
    🎯 Fan cứng Easy Frontend: https://www.youtube.com/channel/UCG2ovypNCpVOTFeY1YCocmQ/join
    ———
    💰 Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé
    ———
    Kết nối với mình:
    – ✅ Follow facebook: https://www.facebook.com/nvhauesmn/
    – 🎉 Fan page: https://www.facebook.com/learn.easyfrontend
    – ❓ Group: https://www.facebook.com/groups/easyfrontend
    – 💻 Github: https://github.com/paulnguyen-mn
    – 💼 LinkedIn: https://www.linkedin.com/in/haunguyenmn/

Tất Tần Tật Về Callback Function Trong Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 5 ⭐ ( 8403 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Callback là một trong những khái niệm khá lằng ngoằng và dễ nhầm lẫn trong lập trình. Hãy cùng mình tìm hiểu về callback funtion trong javascript.

Sử dụng CDN để giảm tải cho Server

  • Tác giả: dinhhoanglong91.github.io
  • Đánh giá: 3 ⭐ ( 9627 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Câu chuyện bắt đầu

Toán tử trong JavaScript

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 3863 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học về Javascript này, bạn sẽ tìm hiểu làm thế nào để điều khiển hoặc thực hiện các hoạt động trên biến và giá trị bằng cách sử dụng Toán tử.   Toán tử trong Javascript là gì?   Toán tử là các ký hiệu hoặc từ khóa báo cho JavaScript Engine thực hiện một số loại hành động cụ thể.   Ví dụ: Ký

Await Javascript trong 10 phút

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 3389 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Trong một thời gian rất dài, chúng ta phải dựa vào callbacks để làm việc với các đoạn code bất đồng bộ trong javascript. Kết quả là, rất nhiều người trong chúng ta đã có những trải nghiệm kinh khủ…

Thuốc giảm đau hoạt động như thế nào?

  • Tác giả: www.vinmec.com
  • Đánh giá: 5 ⭐ ( 5234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuốc giảm đau có nhiều nhóm khác nhau, có cơ chế hoạt động nhằm để kiểm soát cơn đau do viêm, phản ứng với tổn thương mô, tác nhân hóa học hay mầm bệnh (trong đau cảm thụ) hoặc tổn thương thần kinh (trong đau thần kinh).

[JAVASCRIPT] JavaScript hoạt động như thế nào?

  • Tác giả: kipalog.com
  • Đánh giá: 4 ⭐ ( 3714 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Single Thread 1. Làm một việc tại một thời điểm Không giống như đa số các ngôn ngữ lập trình khác, javascript đơn giản là đơn luồng. Điều này …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  How to Create a Table with a Fixed Header and Scrollable Body - thead trong html