Hướng dẫn cơ bản về các phương thức mảng JavaScript

Các map() phương thức áp dụng một hàm cho từng phần tử trong một mảng và trả về một bản sao của mảng ban đầu với các giá trị đã sửa đổi (nếu có).

Cú pháp:

const newArr = oldArr.map(function(currentValue, index, array) {
  // Do stuff with currentValue (index and array are optional)
});

• newArr – mảng mới được trả về
• oldArr – mảng cũ đang được vận hành. Mảng này sẽ không bị thay đổi
• currentValue – giá trị hiện tại đang được xử lý
• index – chỉ số hiện tại của giá trị đang được xử lý
• array – mảng ban đầu

Ví dụ:

ES5

var arr = [1, 2, 3, 4];

var newArray = arr.map(function(element) {
  return element * 2
});

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]

ES6

const arr = [1, 2, 3, 4];

const newArray = arr.map(element => {
  return element * 2;
});

const newArrayOneLiner = arr.map(element => element * 2);

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]
console.log(newArrayOneLiner); // [2, 4, 6, 8]

map so với forEach

Trên bề mặt, các map() và forEach() phương pháp rất giống nhau. Cả hai phương thức đều lặp qua một mảng và áp dụng một hàm cho từng phần tử. Sự khác biệt chính là map() trả về một mảng mới, trong khi forEach() không trả lại bất cứ điều gì.

Vậy bạn nên sử dụng phương pháp nào? Nói chung, nó tốt hơn để sử dụng forEach() nếu bạn không cần thay đổi các giá trị trong mảng ban đầu. forEach() là một lựa chọn tốt nếu tất cả những gì bạn cần làm là ghi từng phần tử của một mảng vào bàn điều khiển hoặc lưu chúng vào cơ sở dữ liệu:

const letters = ['a', 'b', 'c', 'd'];

letters.forEach(letter => {
  console.log(letter);
});

map() là lựa chọn tốt hơn nếu bạn cần cập nhật các giá trị trong mảng ban đầu. Điều này đặc biệt hữu ích nếu bạn muốn lưu trữ mảng đã cập nhật dưới dạng một biến và giữ nguyên mảng gốc làm tham chiếu.

Cách sử dụng map với các phương thức mảng khác

Từ map() trả về một mảng, bạn có thể sử dụng nó với các phương thức mảng khác để làm cho mã của bạn ngắn gọn và dễ đọc hơn nhiều.

sử dụng map với filter

Một điều cần nhớ khi sử dụng map() là nó áp dụng một chức năng cho mọi phần tử của mảng ban đầu và trả về một mảng mới có cùng độ dài với mảng cũ. Nói cách khác, không thể bỏ qua các phần tử của mảng mà bạn không muốn sửa đổi:

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.map(num => {
  if (num > 10) {
    return num * 2;
  }
});

console.log(doublesOverTen); // [undefined, undefined, 30, 40]

Đó là nơi filter() phương pháp đi vào. filter() trả về một mảng mới gồm các phần tử đã lọc đáp ứng một điều kiện nhất định, sau đó bạn có thể xâu chuỗi map() đến:

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.filter(num => {
  return num > 10;
}).map(num => {
  return num * 2;
});

console.log(doublesOverTen); // [30, 40]

Mã này có thể được đơn giản hóa hơn nữa:

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.filter(num => num > 10).map(num => num * 2);

console.log(doublesOverTen); // [30, 40]

sử dụng map với reverse

Có thể đôi khi bạn cần đảo ngược một mảng trong khi ánh xạ qua nó. Các reverse() phương pháp làm cho điều này trở nên dễ dàng, nhưng điều quan trọng cần nhớ là, trong khi map() là bất biến, reverse() không phải. Nói cách khác, các reverse() phương thức sẽ thay đổi mảng ban đầu:

const nums = [1, 2, 3, 4, 5];
const reversedDoubles = nums.reverse().map(num => num * 2);

console.log(nums); // [5, 4, 3, 2, 1]
console.log(reversedDoubles); // [10, 8, 6, 4, 2]

Một trong những ưu điểm chính của map() là nó không làm thay đổi mảng ban đầu và sử dụng reverse() như thế này đánh bại mục đích. Tuy nhiên, đây là cách khắc phục đơn giản – chỉ cần nhớ sử dụng map() đầu tiên và sau đó reverse() mảng mới nó trả về:

const nums = [1, 2, 3, 4, 5];
const reversedDoubles = nums.map(num => num * 2).reverse();

console.log(nums); // [1, 2, 3, 4, 5]
console.log(reversedDoubles); // [10, 8, 6, 4, 2]

sử dụng map trên một đối tượng

Trong khi map() được dùng để thao tác trên mảng, chỉ cần thêm một chút thao tác, bạn cũng có thể lặp qua các đối tượng. Object.keys(), Object.values()và Object.entries() tất cả đều trả về một mảng, nghĩa là map() có thể dễ dàng được kết nối với từng phương thức:

const obj = { 
  a: 1, 
  b: 2, 
  c: 3 
}
const doubles = Object.values(obj).map(num => num * 2);

console.log(doubles); // [2, 4, 6]

Bây giờ đi ra ngoài và map() tất cả mọi thứ!