Hướng dẫn javascript map to object - ánh xạ javascript tới đối tượng

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

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

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

Nội dung bài viết

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

Trong bài viết hướng dẫn sử dụng về map in javascript, thuộc Series - Mẹo javascript này chúng ta sẽ tìm hiểu Maps trong javascript là gì?, cách tạo và sử dụng map như thế nào?Maps trong javascript là gì?, cách tạo và sử dụng map như thế nào?

Maps trong javascript là gì?

Để hiểu được Maps thì phải hiểu được định nghĩa

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

Dictionaries trong javascript được định nghĩa là một cấu trúc dữ liệu có mục đích chung để lưu trữ một nhóm đối tượng.Dictionaries được liên kết với một tập hợp các khóa và mỗi khóa có một giá trị được liên kết duy nhất. Khi được hiển thị với một khóa, từ điển sẽ chỉ trả về giá trị liên quan.

Ví dụ dưới đây được xem là một Dictionaries:

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

Trước ES6, Javascript không hỗ trợ về dữ liệu cấu trúc, và bây giờ chúng ta được sử dụng thông qua

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

Đừng nhầm lẫn với khái niệm Map functions nhé mấy anh chai.

JavaScript key, value map

Dưới đây là 3 cách phổ biến để tạo

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

1. Using Constructor

   const emptyMap = new Map();
   assert.equal(emptyMap.size, 0);
   

2. Pass as Iterable

   const map = new Map([
   [1, 'one'],
   [2, 'two'],
   [3, 'three'],
   ]);
   

3. Using Set() Method

   const map = new Map()
        .set(1, 'one')
        .set(2, 'two')
        .set(3, 'three')
   

Copying Maps

const original = new Map()
                .set(false, 'no')
                .set(true, 'yes');

const copy = new Map(original);
assert.deepEqual(original, copy);

Cách sử dụng JavaScript map.

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

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

const map = new Map();
map.set('foo', 123);
assert.equal(map.get('foo'), 123);

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

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

const map = new Map([['foo', 123]]);
assert.equal(map.has('foo'), true);
assert.equal(map.delete('foo'), true)

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

const map = new Map()
            .set('foo', true)
            .set('bar', false);
assert.equal(map.size, 2)
map.clear();
assert.equal(map.size, 0)

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

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

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

const results = 'Anonystick'' : 75,
'Aftab' :80,
'James' : 85,
'Manisha': 77,
'Suhana' :87,
'Margaret': 82}

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