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ử đó.

test php

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

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.

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()

Bài viết này được đăng tại [free tuts .net]

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:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Hàm array map() trong Javascript

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

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

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

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Hàm array map() trong Javascript

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

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

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

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript