programming javascript

Ví dụ về giảm trong javascript là gì?

Phương thức rút gọn JavaScript là một trong những nền tảng của lập trình chức năng. Hãy cùng khám phá cách thức 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

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

const euros = [29.76, 41.85, 46.5];

const sum = euros.reduce[[total, amount] => total + amount]; 

sum // 118.11

Làm thế nào để sử dụng nó

Trong ví dụ này, Giảm chấp nhận hai tham số, tổng và số tiền hiện tại
Phương thức rút gọn quay 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à số tiền hiện tại là 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
Phép tính được lặp lại cho từng số tiền trong mảng, nhưng mỗi lần 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 trong mảng, phương thức trả về tổng giá trị

Phiên bản ES5 của Phương thức 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 đe dọa bạn. Nó hoàn toàn giống như viết

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Chúng tôi sử dụng

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

7 thay vì

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

8 và chúng tôi thay thế từ

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

9 bằng một "mũi tên béo" [

const euros = [29.76, 41.85, 46.5];

const average = euros.reduce[[total, amount, index, array] => {
  total += amount;
  if[ index === array.length-1] { 
    return total/array.length;
  }else { 
    return total;
  }
}];

average // 39.37

0] sau các tham số và chúng tôi bỏ qua 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 giá trị trung bình bằng phương pháp rút gọn trong JavaScript

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 để làm điều này là tận dụng các đối số khác trong phương thức rút gọn. Đối số đầu tiên trong số đó là chỉ số. Giống như vòng lặp for, chỉ số đề cập đến số lần bộ giảm tốc đã lặp qua mảng. Đối số cuối cùng là chính mảng đó

const euros = [29.76, 41.85, 46.5];

const average = euros.reduce[[total, amount, index, array] => {
  total += amount;
  if[ index === array.length-1] { 
    return total/array.length;
  }else { 
    return total;
  }
}];

average // 39.37

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

Nếu bạn có thể sử dụng hàm rút gọn để đưa ra mức 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 số 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ỉ cộng các số lớn hơn 10. Quan điểm của tôi là Phương thức 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ị. Bạn có thể giảm một mảng thành một mảng mới

Chẳng hạn, 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 nhân đôi. Để làm điều này, chúng ta cần đặt giá trị ban đầu cho bộ tích lũy của mình thành một mảng trống

Giá trị ban đầu là giá trị của tham số tổng khi bắt đầu giảm. Bạn đặt giá trị ban đầu bằng cách thêm dấu phẩy theo sau 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 = euros.reduce[[total, amount, index, array] => {
  total += amount
  return total/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ẽ mặc định là 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. Nếu chúng ta muốn rút gọn một mảng giá trị thành một mảng khác mà mọi giá trị đều được nhân đôi, chúng ta cần đẩy số lượng * 2. Sau đó, chúng tôi trả về tổng số khi không còn số tiền nào để đẩy

________số 8

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 nhân đôi bằng cách thêm câu lệnh if bên trong bộ giảm tốc của chúng tôi

const euro = [29.76, 41.85, 46.5];

const above30 = euro.reduce[[total, amount] => {
  if [amount > 30] {
    total.push[amount];
  }
  return total;
}, []];

above30 // [ 41.85, 46.5 ]

Các thao tác này là các phương thức bản đồ và bộ 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ẽ hợp lý hơn khi sử dụng bản đồ hoặc bộ lọc vì chúng đơn giản hơn để sử dụng. Lợi ích của việc sử dụng rút gọn phát huy tác dụng khi bạn muốn ánh xạ và lọc cùng nhau và bạn có rất nhiều dữ liệu để xem qua

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

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 thức lại với nhau, giờ đây bạn biết rằng thay vào đó, việc 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ón đồ và bạn muốn biết mỗi món đồ có bao nhiêu món trong bộ sưu tập

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Để 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ố

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Trong lần vượt qua đầu tiên của chúng tôi, 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

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

Để làm điều này, trong vòng lặp thứ hai, chúng tôi kiểm tra xem tổng số của chúng tôi có chứa khóa có 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 như vậy thì chúng tôi tăng số tiền lên một

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Tôi đã viết lại chính xác logic đó theo cách ngắn gọn hơn ở trên cùng

Làm phẳng một mảng các mảng bằng phương thức Giảm trong JavaScript

Chúng ta có thể sử dụng reduce để 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

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Thông thường, thông tin được lồng vào nhau theo những cách phức tạp hơn. Chẳng hạn, 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

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Chúng ta sẽ đi qua từng đối tượng và kéo ra các màu. Chúng tôi làm điều này bằng cách chỉ số lượng. c cho từng đố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 vào tổng

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

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

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Đường ống với Giảm

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

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

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Vì bất kỳ lý do gì, chúng ta cần tăng, sau đó tăng gấp đôi, sau đó giảm một lượng

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 tăng số tiền lên ba lần, sau đó nhân đôi, sau đó giảm đi 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 chức năng của mình mỗi lần vì vậy chúng tôi sẽ sử dụng rút gọn để tạo một đường dẫn

Một đường ống dẫn là một thuật ngữ được sử dụng cho một danh sách các chức năng chuyển đổi một số giá trị ban đầu thành giá trị cuối cùng. Đườ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

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

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

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Bởi vì đường ống là một mảng, 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 quy trình

var euros = [29.76, 41.85, 46.5]; 

var sum = euros.reduce[ function[total, amount]{
  return total + amount
}];

sum // 118.11

Chức năng giảm vẫn giống hệt nhau

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

Nếu bạn không chuyển vào một giá trị ban đầu, reduce sẽ coi mục đầu tiên trong mảng của bạn 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 đã thêm danh sách các số

Nếu bạn đang cố 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 lỗi dễ mắc phải và là một trong những điều đầu tiên bạn nên kiểm tra khi gỡ lỗi

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

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

Mọi thứ trong bài đăng này đều đến từ một loạt video tuyệt vời về egghead có tên là Giới thiệu Giảm. Tôi hoàn toàn tin tưởng Mykola Bilokonsky và tôi biết ơn anh ấy vì mọi thứ 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 tôi như một bài tập để hiểu rõ hơn về từng khái niệm. Ngoài ra, tôi sẽ 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 một việc gì đó

MDN Giảm nhãn tài liệu mà tôi gọi là tổng số

const euros = [29.76, 41.85, 46.5];

const average = euros.reduce[[total, amount, index, array] => {
  total += amount;
  if[ index === array.length-1] { 
    return total/array.length;
  }else { 
    return total;
  }
}];

average // 39.37

1. Điều quan trọng là phải biết điều này bởi vì hầu hết mọi người sẽ gọi nó là một công cụ tích lũy nếu bạn đọc về nó trực tuyến. Một số người gọi nó là

const euros = [29.76, 41.85, 46.5];

const average = euros.reduce[[total, amount, index, array] => {
  total += amount;
  if[ index === array.length-1] { 
    return total/array.length;
  }else { 
    return total;
  }
}];

average // 39.37

2 như trong giá trị trước đó. Tất cả đề cập đến cùng một điều. Tôi thấy việc tính tổng dễ dàng hơn khi tôi học rút gọn

Nếu bạn muốn thực hành sử dụng reduce, 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 càng tốt bằng cách sử dụng reduce
Nếu các biến 'const' trong đoạn mã ví dụ còn mới đối với bạn, tôi đã viết một bài viết khác về các 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 tên là Rắc rối với vòng lặp giải thích cách sử dụng bản đồ [] và bộ lọc [] nếu đây là những điều mới mẻ đối với bạn

Cảm ơn vì đã đọc. Nếu bạn muốn được thông báo khi tôi viết bài 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, vui lòng chia sẻ nó trên phương tiện truyền thông xã hội để những người khác có thể tìm thấy nó

QUẢNG CÁO

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Giảm [] trong JavaScript là gì?

Phương thức reduce[] thực thi hàm gọi lại "reducer" do người dùng cung cấp trên mỗi phần tử của mảng, theo thứ tự, chuyển vào giá trị trả về từ phép tính ở phần trước . Kết quả cuối cùng của việc chạy bộ giảm tốc trên tất cả các phần tử của mảng là một giá trị duy nhất. . The final result of running the reducer across all elements of the array is a single value.

Giảm được sử dụng để làm gì?

Phương thức reduce[] thực thi hàm rút gọn cho phần tử mảng . Phương thức reduce[] trả về một giá trị duy nhất. kết quả tích lũy của hàm. Phương thức reduce[] không thực thi hàm đối với các phần tử mảng trống. Phương thức reduce[] không thay đổi mảng ban đầu.

Tại sao nó được gọi là giảm JavaScript?

Bộ tích lũy là giá trị mà chúng ta kết thúc và bộ giảm tốc là hành động mà chúng ta sẽ thực hiện để đạt được một giá trị. Bạn phải nhớ rằng bộ rút gọn sẽ chỉ trả về một giá trị và chỉ một giá trị thôi do đó có tên là reduce.

Giảm một mảng là gì?

Giảm mảng trong JavaScript là một phương thức được xác định trước được sử dụng để giảm mảng thành một giá trị duy nhất bằng cách chuyển hàm gọi lại trên từng phần tử của mảng. It accepts a function executed on all the items of the specified array in the left-to-right sequence. The returned single value is stored in the accumulator.

Giảm cơ bản

Phiên bản ES5 của Phương thức rút gọn trong JavaScript​

Tìm giá trị trung bình bằng phương pháp rút gọn trong JavaScript​

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

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