Hướng dẫn về phương pháp rút gọn trong Javascript – làm thế nào để giảm công việc 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: javascript giảm công việc như thế nào

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ủ đề làm thế nào để giảm công việc javascript

JavaScript có gì mà hot vậy? Lộ trình trở thành Full-Stack JavaScript siêu đầy đủ

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2020-11-24
  • Đánh giá: 4 ⭐ ( 7992 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay mình sẽ chia sẻ về sự hay ho bá đạo của ngôn ngữ lập trình JavaSript nhé. JavaScript là gì, tại sao nó hot vậy, học có nhiều việc làm không. Mình cũng sẽ chia sẻ lộ trình học để trở thành làm JavaScript FullStack nha.

    Tư vấn free tại: https://fb.com/lophocviet
    Thông tin khoá học JavaScript Full Stack: https://cybersoft.edu.vn/bootcamp-lap-trinh-fullstack-javascript-tu-zero-co-viec-lam

    Timestamp:
    00:00 – Tóm tắt nội dung vlog
    00:17 – Giới thiệu về ngôn ngữ lập trình JavaScript
    00:55 – Ưu điểm của JavaScript, tại sao nên học
    02:09 – Nhược điểm của JavaScript
    04:05 – Học JavaScript thì làm được gì (front/back-end, mobile, game)
    07:46 – Lộ trình học JavaScript cơ bản
    10:02 – Lộ trình học JavaScript chuyên sâu front-end
    11:50 – Lộ trình học JavaScript chuyên sâu back-end

    Nhớ subscribe cho mình nhe: https://bit.ly/codedaotube\r
    \r
    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer – lập trình viên thứ thiệt.\r
    Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 VÀ T6 hàng tuần nha!\r
    \r
    Ghé thăm mình tại:\r
    Blog: https://toidicodedao.com/\r
    Fanpage: https://www.facebook.com/toidicodedao/

    javascript js cybersoft

Công cụ tốt nhất cho nhà phát triển để giảm thiểu Javascript

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 5433 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nói ngắn gọn, rút ​​gọn là kỹ thuật loại bỏ các ký tự không cần thiết khỏi mã nguồn. Điều này còn được gọi là nén và giảm thiểu mã. Rất nhiều trang web sản xuất và hệ thống điện thoại văn…

Lập trình viên JavaScript là gì?

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 6347 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lập trình viên biết sử dụng và áp dụng JavaScript vào các dự án của họ được gọi là lập trình viên JavaScript. Mặc dù một lập trình viên JavaScript

Tăng hiệu suất trong ASP.NET với việc giảm bớt dung lượng JavaScript

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 3 ⭐ ( 6822 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài trước Tôi đã hướng dẫn bạn cách tăng hiệu suất trong ASP.NET với việc loại bỏ khoảng trắng từ HTML. Tiếp theo bài này, tôi sẽ hướng dẫn bạn cách tăng hiệu suất trong ASP.NET với việc giảm bớt dung lượng JavaScript

Làm việc với mảng (Array) trong Javascript

  • Tác giả: phambinh.net
  • Đánh giá: 5 ⭐ ( 1056 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp các phương thức, thuộc tính làm việc với mảng trong JavaScript. Các hàm xử mảng trong JavaScript, các hàm xử lý array trong JavaScript.

JavaScript là gì? Giới thiệu cơ bản về JS cho người mới bắt đầu

  • Tác giả: www.hostinger.vn
  • Đánh giá: 5 ⭐ ( 7678 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đọc bài giải thích thuật ngữ của chúng tôi để biết JavaScript là gì và cách thức hoạt động của nó. Bài viết còn so sánh giữa JS với các ngôn ngữ lập trình web khác.

Tối ưu hóa javascript wordpress đơn giản nhất (2020)

  • Tác giả: wptangtoc.com
  • Đánh giá: 4 ⭐ ( 6211 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn Tối ưu hóa javascript wordpress dễ dàng

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  Cách phóng to / thu nhỏ các phần tử khi di chuột bằng CSS - di chuột tăng kích thước css