Giải thích về phương pháp rút gọn JavaScript
Giảm là một phương pháp có thể khó hiểu, đặc biệt là với tất cả các giải thích mơ hồ có thể tìm thấy trên web. Có rất nhiều lợi ích khi hiểureduce vì nó thường được sử dụng trong quản lý nhà nước (nghĩ Redux ). Chữ ký cho phương thức mảng reduce trong JavaScript là:
arr.reduce(callback, initialValue); Thuật ngữ
Giảm đi kèm với một số thuật ngữ như bộ giảm tốc & bộ tích lũy . Bộ accumulator là giá trị mà ta kết thúc và bộ reducer là hành động mà ta sẽ thực hiện để đạt được một giá trị .
Bạn phải nhớ rằng một bộ giảm sẽ chỉ trả về một giá trị và một giá trị duy nhất do đó tên giảm .
Lấy ví dụ cổ điển sau:
const value = 0; const numbers = [5, 10, 15]; for(let i = 0; i < numbers.length; i++) { value += numbers[i]; } Ở trên sẽ cho ta 30 (5 + 10 + 15). Điều này hoạt động tốt, nhưng ta có thể làm điều này với reduce thay vì sẽ giúp ta tránh việc thay đổi biến value .
Đoạn mã dưới đây cũng sẽ xuất ra 30 , nhưng sẽ không làm thay đổi biến value của ta (mà bây giờ ta gọi là initialValue )
/* this is our initial value i.e. the starting point*/ const initialValue = 0; /* numbers array */ const numbers = [5, 10, 15]; /* reducer method that takes in the accumulator and next item */ const reducer = (accumulator, item) => { return accumulator + item; }; /* we give the reduce method our reducer function and our initial value */ const total = numbers.reduce(reducer, initialValue) Đoạn mã trên có thể trông hơi khó hiểu, nhưng không có phép thuật nào xảy ra. Hãy thêm một console.log trong của ta reducer phương pháp mà ý chí sản lượng accumulator và item đối số.
Ảnh chụp màn hình sau cho thấy những gì được ghi vào console :
Vì vậy, điều đầu tiên ta nhận thấy là phương thức của ta được gọi 3 lần vì có 3 giá trị trong mảng của ta . Ắc của ta bắt đầu từ 0 mà là của ta initialValue ta truyền cho reduce . Trên mỗi lần gọi hàm, item này sẽ được thêm vào bộ accumulator . Lệnh gọi cuối cùng đến phương thức có giá trị accumulator là 15 và item là 15 , 15 + 15 cho ta 30 là giá trị cuối cùng của ta . Hãy nhớ phương thức reducer trả về bộ accumulator cộng với item .
Vì vậy, đó là một ví dụ đơn giản về cách bạn sẽ sử dụng reduce , bây giờ hãy đi sâu vào một ví dụ phức tạp hơn.
Làm phẳng một mảng bằng cách sử dụng Reduce
Giả sử ta có mảng sau:
const numArray = [1, 2, [3, 10, [11, 12]], [1, 2, [3, 4]], 5, 6]; Và giả sử vì một lý do điên rồ nào đó, JavaScript đã loại bỏ phương thức .flat nên ta phải tự san phẳng mảng này.
Vì vậy, ta sẽ viết một hàm để làm phẳng bất kỳ mảng nào dù các mảng được lồng sâu như thế nào:
function flattenArray(data) { // our initial value this time is a blank array const initialValue = []; // call reduce on our data return data.reduce((total, value) => { // if the value is an array then recursively call reduce // if the value is not an array then just concat our value return total.concat(Array.isArray(value) ? flattenArray(value) : value); }, initialValue); } Nếu ta chuyển numArray của numArray cho phương thức này và ghi lại kết quả, ta nhận được như sau:
Đây là một ví dụ tuyệt vời về cách ta có thể thực hiện một hoạt động rất phổ biến khá đơn giản.
Hãy xem qua một ví dụ nữa.
Ví dụ cuối cùng - Thay đổi cấu trúc đối tượng
Vì vậy, với trò chơi Pokemon mới sắp ra mắt, hãy giả sử ta có một server gửi cho ta một loạt các đối tượng Pokemon như vậy:
const pokemon = [ { name: "charmander", type: "fire" }, { name: "squirtle", type: "water" }, { name: "bulbasaur", type: "grass" } ] Ta muốn thay đổi đối tượng này thành:
const pokemonModified = { charmander: { type: "fire" }, squirtle: { type: "water" }, bulbasaur: { type: "grass" } }; Để có được kết quả mong muốn đó, ta thực hiện như sau:
const getMapFromArray = data => data.reduce((acc, item) => { // add object key to our object i.e. charmander: { type: 'water' } acc[item.name] = { type: item.type }; return acc; }, {}); Nếu ta gọi phương thức của bạn như vậy:
getMapFromArray(pokemon) Ta nhận được kết quả mong muốn của ta :
Bạn có thể xem Codesandbox tại đây .
Kết luận
Ngay từ cái nhìn đầu tiên, rút reduce vẻ phức tạp hơn các Phương pháp lặp lại mảng JavaScript khác như map và filter , nhưng một khi hiểu cú pháp, khái niệm cốt lõi và trường hợp sử dụng, nó có thể là một công cụ mạnh mẽ khác cho các nhà phát triển JavaScript.
Các tin liên quan
Khám phá các hàm Async / Await trong JavaScript2020-09-04
module ES6 và Cách sử dụng Nhập và Xuất trong JavaScript
2020-09-04
filter () Phương thức mảng trong JavaScript
2020-09-03
Hiểu các hàm mũi tên trong JavaScript
2020-07-31
Cách tạo phần tử kéo và thả với Vanilla JavaScript và HTML
2020-07-27
Hiểu các chữ mẫu trong JavaScript
2020-06-30
Cách sử dụng .map () để lặp lại thông qua các mục mảng trong JavaScript
2020-05-19
Hiểu về cấu trúc hủy, tham số khôi phục và cú pháp trải rộng trong JavaScript
2020-05-12
Cách gỡ lỗi JavaScript với Google Chrome DevTools và Visual Studio Code
2020-05-08
Thanh tiến trình trang với các biến JavaScript và CSS
2020-04-16
