Bản đồ JavaScript, Thu nhỏ và Lọc

Map, reduce và filter đều là các phương thức mảng trong JavaScript. Mỗi người sẽ lặp qua một mảng và thực hiện một phép biến đổi hoặc tính toán. Mỗi cái sẽ trả về một mảng mới dựa trên kết quả của hàm. Trong bài viết này, bạn sẽ tìm hiểu lý do tại sao và cách sử dụng từng cái.

Đây là một bản tóm tắt thú vị của Steven Luscher:

Bản đồ

Các map() phương thức được sử dụng để tạo một mảng mới từ một mảng hiện có, áp dụng một hàm cho từng phần tử của mảng đầu tiên.

cú pháp

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

Trong cuộc gọi lại, chỉ có mảng element bắt buộc. Thông thường một số hành động được thực hiện trên giá trị và sau đó một giá trị mới được trả về.

Ví dụ

Trong ví dụ sau, mỗi số trong một mảng được nhân đôi.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

Lọc

Các filter() phương thức lấy từng phần tử trong một mảng và nó áp dụng một câu lệnh có điều kiện đối với nó. Nếu điều kiện này trả về true, phần tử sẽ được đẩy vào mảng đầu ra. Nếu điều kiện trả về false, phần tử sẽ không được đẩy vào mảng đầu ra.

cú pháp

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

Cú pháp cho filter tương tự như mapngoại trừ hàm gọi lại sẽ trả về true để giữ phần tử, hoặc false nếu không thì. Trong cuộc gọi lại, chỉ có element bắt buộc.

ví dụ

Trong ví dụ sau, các số lẻ được “lọc” ra, chỉ để lại các số chẵn.

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]

Trong ví dụ tiếp theo, filter() được sử dụng để lấy tất cả các sinh viên có điểm lớn hơn hoặc bằng 90.

const students = [
  { name: 'Quincy', grade: 96 },
  { name: 'Jason', grade: 84 },
  { name: 'Alexis', grade: 100 },
  { name: 'Sam', grade: 65 },
  { name: 'Katie', grade: 90 }
];

const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Giảm

Các reduce() phương pháp giảm một mảng các giá trị xuống chỉ còn một giá trị. Để lấy giá trị đầu ra, nó chạy một hàm rút gọn trên từng phần tử của mảng.

cú pháp

arr.reduce(callback[, initialValue])

Các callback đối số là một hàm sẽ được gọi một lần cho mọi mục trong mảng. Hàm này có bốn đối số, nhưng thường chỉ có hai đối số đầu tiên được sử dụng.

• bộ tích điện – giá trị trả về của lần lặp trước
• giá trị hiện tại – mục hiện tại trong mảng
• mục lục – chỉ mục của mục hiện tại
• mảng – mảng ban đầu mà reduce được gọi
• Các initialValue đối số là tùy chọn. Nếu được cung cấp, nó sẽ được sử dụng làm giá trị bộ tích lũy ban đầu trong lần gọi đầu tiên đến hàm gọi lại.

ví dụ

Ví dụ sau cộng mọi số lại với nhau trong một mảng số.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10

Trong ví dụ tiếp theo, reduce() được sử dụng để chuyển đổi một mảng các chuỗi thành một đối tượng duy nhất hiển thị số lần mỗi chuỗi xuất hiện trong mảng. Lưu ý lệnh gọi này để giảm vượt qua một đối tượng trống {} như initialValue tham số. Giá trị này sẽ được sử dụng làm giá trị ban đầu của bộ tích lũy (đối số đầu tiên) được truyền cho hàm gọi lại.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts); 

/*
Output:
 { 
    dog: 2, 
    chicken: 3, 
    cat: 1, 
    rabbit: 1 
 }
 */

Video giải thích

Hãy xem video bên dưới từ kênh YouTube freeCodeCamp.org. Nó bao gồm các phương pháp mảng được thảo luận, cộng với một vài điều nữa.