Hướng dẫn map array object 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ử đó.

Hướng dẫn map array object javascript

Hướng dẫn map array object javascript

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é.

Nội dung bài viết

Video học lập trình mỗi ngày

Thông thường thì Array.prototype.map sẽ hỗ trợ Array, vậy nếu là một object thì sẽ sử dụng map như thế nào? 

Bài viết được nằm trong series: Mẹo javascript

Rất đơn giản, đừng nghĩ cao siêu hay đi tìm một giải pháp nào trên google. Chỉ suy nghĩ một chút là ra, đó là làm sao convert object to Array là ok thôi. 

Xem ví dụ:

var myObject = { 'a': 1, 'b': 2, 'c': 3 }
//convert to Array
myObject = Object.keys(myObject);

//Sau đó sử map như một Array.

Object.keys(myObject).map(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

javascript for in object

Nhưng bạn có thể dễ dàng lặp lại một đối tượng bằng cách sử dụng for ... in. Nhưng một số tình huống thì khuyên bạn nên dừng lại sử dụng for...in ngay bây giờ.

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

for (var key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    myObject[key] *= 2;
  }
}

console.log(myObject);
// { 'a': 2, 'b': 4, 'c': 6 }
Bài viết được nằm trong series: Mẹo javascript