ARRAY FUNCTION
NUMBER FUNCTION
STRING FUNCTION
DATE / TIME FUNCTION
MATH FUNCTION
GLOBAL FUNCTION
BOOLEAN FUNCTION
DOM FUNCTION
appendChild Javascript parentElement Javascript parentNode Javascript insertAfter Javascript insertBefore javascript innerHTML Javascript insertAdjacentHTML javascript nextSibling javascript activeElement Javascript adoptNode Javascript anchors Javascript baseURI Javascript Document.body Javascript characterSet Javascript createAttribute Javascript Hàm document.createComment() trong Javascript Hàm document.createDocumentFragment() trong Javascript Hàm document.createElement() trong Javascript Hàm document.createTextNode() trong Javascript Hàm document.doctype trong Javascript Hàm document.documentElement trong Javascript Hàm document.documentMode trong Javascript Hàm document.documentURI trong Javascript Hàm document.domain trong Javascript Hàm document.embeds trong Javascript Hàm document.forms trong Javascript Hàm document.hasFocus() trong Javascript Hàm document.head trong Javascript Hàm document.images trong Javascript Hàm document.implementation trong Javascript Hàm document.importNode() trong Javascript Hàm document.inputEncoding trong Javascript Hàm document.lastModified trong Javascript Hàm document.links trong Javascript Hàm document.normalize() trong Javascript Hàm document.scripts trong Javascript Hàm document.querySelector() trong Javascript Hàm document.readyState trong Javascript Hàm document.removeEventListener() trong Javascript Hàm document.querySelectorAll() trong Javascript Hàm document.title trong Javascript Hàm document.URL trong Javascript Hàm document.write() trong Javascript Hàm document.writeln() trong Javascript Hàm document.getElementById() trong Javascript Hàm document.getElementsByClassName() trong Javascript Hàm document.getElementsByName() trong Javascript Hàm document.getElementsByTagName() trong Javascript
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Hàm array map() trong Javascript

Trong bài này chúng ta sẽ tìm hiểu hàm map trong javascript, đây là hàm dùng để lặp qua các phần tử của mảng và cho phép xử lý giá trị của phần tử đó.

Javascript map là một hàm dành cho đối tượng mảng trong javascript, hàm này có công dụng tương tự như vòng lăp forEach.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Hàm map() sẽ lặp qua từng phần tử của mảng, tham số truyền vào là một anonymous function. Hàm anonymous sẽ có một tham số truyền vào và đó chính là phần tử của mỗi vòng lặp, bên trong thân hàm anonymouse sẽ có lệnh return về một giá trị và giá trị này sẽ thay thế cho phần tử đó.

1. Cú pháp hàm map trong javascript

Cú pháp: Cú pháp chung của hàm map()

array.map(function(item){
    // item chính là phần tử đang lặp
    return item; // giá trị trả về sẽ thay thế cho giá trị ban đầu của phần tử
});

Giá trị trả về của hàm map trong js là một mảng mới, với số lượng phần tử bằng với mảng cũ, nhưng giá trị của các phần tử thì được quyết định bởi lệnh return của hàm map.

Chúng ta sẽ bắt đầu bằng một ví dụ khá cơ bản, đó là lặp và in ra các phần tử trong mảng.

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

Kết quả:

freetuts.net
techtuts.net
simpletutorials.org

2. Hàm map với tham số là arrow function

Ở ví dụ trên mình đã truyền vào một anonymous function. Tuy nhiên, bạn hoàn toàn có thể sử dụng arrow function trong es6 để truyền vào tham số của hàm map.

Như ví dụ ở phần 1 thì mình sẽ viết lại như sau:

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

Kết quả không khác so với ví dụ trên.

3. Cách dùng hàm map trong javascript

Chúng ta sẽ giải một bài toán như sau: Hãy viết chương trình thay đổi gấp đôi giá trị của các phần tử trong mảng dưới đây.

var numbers = [5, 10, 20, 22, 60];

Thực ra bài này bạn hoàn toàn có thể sử dụng vòng lặp for, vòng lặp while hay một vòng lặp bất kì. Tuy nhiên, nếu bạn sử dụng hàm map thì bài toán sẽ trở nên đơn giản hơn rất nhiều.

Cách 1: Giải bằng hàm map như sau:

var numbers = [5, 10, 20, 22, 60];
var new_number = numbers.map(function(item){
    return item * 2; // nhân đôi giá trị
});

console.log(new_number);
// Kết quả: [10, 20, 40, 44, 120]

Như bạn thấy, mảng new_number có giá trị mới gấp đôi với giá trị của mảng cũ.

Cách 2: Sử dụng vòng lặp for

Sau đây là giải bằng cách sử dụng vòng lặp, và mình sẽ sử dụng vòng lặp for.

var numbers = [5, 10, 20, 22, 60];
for (var i = 0; i < numbers.lenght; i++){
    numbers[i] = numbers[i] * 2;
}

console.log(numbers);
// Kết quả: [10, 20, 40, 44, 120]

4. Lời kết

Trên là cú pháp và cách sử dụng hàm map trong javascript. Bạn phải lưu ý rằng hàm này chỉ được dùng để lặp qua các phần tử của mảng, bởi map là một phương thức của đối tượng array.

Nếu bạn muốn lặp qua một object thì hãy sử dụng vòng lặp forEach trong javascript để thay thế nhé.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top