Phương thức map
Xét ví dụ sau: chúng ta có hàm f(x) = x
2 và muốn áp dụng hàm này lên mảng [1, 2, 3, 4, 5, 6, 7, 8, 9]. Phương thức map trong JavaScript sẽ giúp thực hiện điều này:
'use strict';
function square(x) {
return x * x;
}
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const results = numbers.map(square); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);
Lưu ý: tham số truyền vào map() là đối tượng hàm square.
Mặc dù có thể thay thế bằng vòng lặp for:
const transform = (x) => x * x;
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const output = [];
for (let i=0; i<data.length; i++) {
output.push(transform(data[i]));
}
Tuy nhiên, cách viết này không thể hiện rõ mục đích "áp dụng hàm transform cho từng phần tử và tạo mảng mới". Phương thức map() trừu tượng hóa quy tắc xử lý, cho phép áp dụng bất kỳ hàm phức tạp nào, ví dụ chuyển đổi các số thành chuỗi:
const values = [1, 2, 3, 4, 5, 6, 7, 8, 9];
values.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
Phương thức reduce
Phương thức reduce() nhận một hàm hai tham số và tính toán tích lũy trên mảng:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
Ví dụ tính tổng mảng:
const nums = [1, 3, 5, 7, 9];
nums.reduce((a, b) => a + b); // 25
Phương thức filter
Filter giữ lại các phần tử thỏa mãn điều kiện. Ví dụ lọc các số lẻ:
const list = [1, 2, 4, 5, 6, 9, 10, 15];
const filtered = list.filter(item => item % 2 !== 0);
// [1, 5, 9, 15]
Hàm callback của filter có thể nhận 3 tham số: phần tử, vị trí, và mảng gốc. Tận dụng điều này để loại bỏ phần tử trùng lặp:
'use strict';
const fruits = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
const unique = fruits.filter((item, pos, arr) => arr.indexOf(item) === pos);
Phương thức sort
Phương thức sort() sắp xếp mảng dựa trên hàm so sánh. Ví dụ sắp xếp số:
const digits = [10, 20, 1, 2];
digits.sort((a, b) => {
if (a < b) return -1;
if (a > b) return 1;
return 0;
}); // [1, 2, 10, 20]
Đảo ngược thứ tự:
digits.sort((a, b) => {
if (a < b) return 1;
if (a > b) return -1;
return 0;
}); // [20, 10, 2, 1]
So sánh không phân biệt chữ hoa/thường:
const words = ['Google', 'apple', 'Microsoft'];
words.sort((s1, s2) => {
const c1 = s1.toUpperCase();
const c2 = s2.toUpperCase();
if (c1 < c2) return -1;
if (c1 > c2) return 1;
return 0;
}); // ['apple', 'Google', 'Microsoft']
Lưu ý: phương thức sort() thay đổi mảng gốc:
const a1 = ['B', 'A', 'C'];
const a2 = a1.sort();
a1 === a2; // true