Array map trong JavaScript | Laptrinhcanban.com

HOME › >>

Array map trong JavaScript

Hướng dẫn cách sử dụng phương thức Array map trong JavaScript. Bạn sẽ học được cách dùng Array map để xử lý tuần tự và tạo mảng mới từ các phần tử trong mảng JavaScript sau bài học này.

Array map trong JavaScript

Array map trong JavaScript là phương thức trong Array Object, có tác dụng xử lý tuần tự và tạo mảng mới từ các phần tử trong mảng ban đầu.

Phương thức Array map hoạt động theo cơ chế:

  1. Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
  2. Chuyển chúng đến đối số của phương thức Array map là một hàm callback chứa các xử lý
  3. Sau đó thêm kết quả xử lý như là một phần tử mới vào mảng kết quả.

Chúng ta sử dụng Array map để ử lý tuần tự và tạo mảng mới từ các phần tử trong mảng JavaScript với 3 kiểu cú pháp sau đây:

arr.map(callbackFn(value));
arr.map(callbackFn(value, index));
arr.map(callbackFn(value, index, array));

Trong đó:

  • arr là mảng ban đầu
  • callbackFN là hàm callback chứa các xử lý. Hàm callback sẽ nhận từng phần tử từ mảng arr để tiến hành xử lý và thay đổi nó.
  • value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • index là tên một biến dùng để gán index của phần tử đang được lấy từ mảng để truyền vào callbackFN
  • array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Phương thức Array map() sẽ nhận từng phần tử từ mảng, truyền vào callback function, xử lý và thay đổi giá trị. Cuối cùng thì giá trị này được trả về và thêm vào như là một phần tử mới trong mảng kết quả.

Xử lý tuần tự và tạo mảng mới từ các phần tử trong mảng JavaScript bằng Array map

Chúng ta xử lý tuần tự và tạo mảng mới từ các phần tử trong mảng JavaScript bằng Array map như ví dụ sau đây:

let num = [2, 3, 4, 5, 6];

let new_num = num.map(function(element){
return element* 2;
});

console.log(new_num);
// [ 4, 6, 8, 10, 12 ]

Trong ví dụ này, chúng ta sử dụng biến element để nhận lần lượt các phần tử từ trong mảng ban đầu, và thay đổi chúng bằng cách nhân lên 2 lần.

Kết quả của các phép nhân này sẽ lần lượt được trả về và thêm vào mảng kết quả như là một phần tử mới.

Và, một mảng mới có các giá trị gấp đôi các phần tử của mảng ban đầu đã được tạo ra.

Sử dụng phương thức Array map nâng cao

Ngoài việc truyền giá trị của phần tử vào hàm như trên, chúng ta cũng có thể truyền cả index của phần tử đó vào hàm callback để thực hiện xử lý, giống như ví dụ sau:

let num = [2, 3, 4, 5, 6];

let new_num = num.map(function(element, index){
return (element + index);
});

console.log(new_num);
// [ 2, 4, 6, 8, 10 ]

Trong ví dụ này, chúng ta sử dụng cặp biến là elementindex để gán giá trị và index của phần tử đang xét vào hàm callback, và thay đổi giá trị element đó bằng cách cộng giá trị này với index của nó.

Kết quả của các phép cộng này sẽ lần lượt được trả về và thêm vào mảng kết quả như là một phần tử mới.

Và, một mảng mới có các giá trị bằng tổng của các giá trị và index tương ứng của các phần tử trong mảng ban đầu đã được tạo ra.

Ngoài cách này, chúng ta cũng có thể truyền thêm toàn bộ cả mảng vào trong hàm callback để xét điều kiện nếu muốn. Ví dụ chúng ta có thể truyền cả giá trị, index của phần tử, cũng như cả mảng đó vào trong hàm callback để thực hiện xử lý như sau:

let num = [2, 3, 4, 5, 6];

let new_num = num.map(function(element, index, num){
return (element + index + num[2]);
});

console.log(new_num);
// [ 6, 8, 10, 12, 14 ]

Với ví dụ này thì ngoài tổng của giá trị và index của phần tử đang được xét, thì giá trị của num[2] cũng sẽ được thêm vào, và trả về kết quả như là phần tử trong một mảng mới.

Sử dụng kết hợp phương thức Array map với các hàm và phương thức khác

Ngoài việc xử lý các phép tính toán số học như trên, chúng ta cũng có thể sử dụng các hàm và phương thức khác bên trong hàm callback của phương thức Array map, nhằm giúp việc xử lý các giá trị linh hoạt hơn.

Ví dụ, chúng ta có thể sử dụng phương thức Array map kết hợp với phương thức toUpperCase() để chuyển toàn bộ các ký tự thường thành chữ hoa như sau:

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit.map(function(element){
return element.toUpperCase();
});

console.log(newfruit);
// ["APPLE", "GRAPES", "MELON", "ORANGE"]

console.log(fruit);
// ["Apple", "Grapes", "Melon", "Orange"]

Lại nữa, chúng ta cũng có thể sử dụng arrow function để rút gọn hàm callback, như cách viết sau đây:

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit.map(element => element.toUpperCase());

console.log(newfruit);
// ["APPLE", "GRAPES", "MELON", "ORANGE"]

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về Array map trong JavaScript và cách tạo mảng mới từ xử lý tuần tự các phần tử trong mảng ban đầu rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-map-trong-javascript/

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME  › >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.