Let's talk about javascript foreach object

Javascript foreach object. Có thể các bạn đã quen với việc loop in an array nhưng với object thì có muôn vàn vấn đề như javascript foreach object property hay javascript foreach object entries

Thì hôm nay tips javascript sẽ có một vài ví dụ về javascript foreach object key value và có những lời khuyên chân thành cho các bạn mới làm quen về object và array trong javascript. Và khi nào nên sử dụng object và khi nào nên sử dụng array để lưu trữ dữ liệu trong ứng dụng client của mình.

TIPS: Khi nào dùng objects? Khi nào dùng Arrays trong javascript.

Đầu tiên lướt qua về array mà ai cũng biết.

1 - javascript loop in an array.

Trước tiên chúng ta đi từ vấn đề đơn giản đề hướng tới một vấn đề phức tạp hơn. Đừng bỏ qua những thứ đơn giản nhất, vì từ đơn giản chúng ta mới biết được sự phức tạp của một data trong javascript. ví dụ:

let myArray = ["blog javascripts", "anonystick"];
for(let i = 0; i < myArray.length; i++){
   console.log(myArray[i]);
}
/* Outputs:
blog javascripts
anonystick
*/

Vậy nếu data đó được save trong objects thì làm thế nào để javascript foreach object và đây tôi xin chia sẻ một số cách sau

2 - Javascript foreach object

Ví dụ for in loop object

 const obj = {
   id:1,
   name: "blog javascript",
   site: 'anonystick.com'
}

for (let key in obj){
   if(obj.hasOwnProperty(key)){
     console.log(`${key} : ${obj[key]}`)
   }
}

/*
Output:
id : 1
name : blog javascript
site : anonystick.com
*/

TIPS: object.assign() deep copy in javascript

3 - Javascript foreach object key

Nhiều trường hợp trong lập trình chúng ta chỉ muốn lấy tất cả keys trong object thì phải làm sao. Đầu tiên chúng ta sử dụng method Object.keys() và lấy object làm argument và return về một array chứa keys. Sau đó ta có thể lấy như một arrays. Và trường hợp này chúng ta có thể  tìm javascript foreach object property như dưới đây

Ví dụ:

const obj = {
   id:1,
   name: "blog javascript",
   site: 'anonystick.com'
}

console.log(Object.keys(obj));

/*
Output:
["id", "name", "site"]
*/

4 - Javascript foreach object value

Cũng tương tự như Object.values() thì ta cũng có thể sử dụng Object.values() để lấy tất cả values trong object. Ví dụ:

const obj = {
   id:1,
   name: "blog javascript",
   site: 'anonystick.com'
}

console.log(Object.values(obj));

/*
Output:
[1, "blog javascript", "anonystick.com"]
*/

5 - Javascript foreach object entries

Với Object.entries() thì sẽ return array trong đó array đó chứa các [key, value]. ví dụ:

const obj = {
   id:1,
   name: "blog javascript",
   site: 'anonystick.com'
}

console.log(Object.entries(obj)) // return array [key, value]

Object.entries(obj).forEach(([key,value])=>{
    console.log(`${key}:${value}`)
})

/*
Output:
id:1
name:blog javascript
site:anonystick.com
*/

TIPS: Cách bạn có thể sử dụng Array JavaScript tốt hơn

6 - javascript loop through array of objects

Một khi chúng ta có thể convert một object to array thì việc còn lại khá đơn giản cho việc sử dụng các method của Array.

bài toán lập trình object javascript: Cho trước một object countries, tìm những countrie có dân số dưới 1000000000

var countries = {
    China: 1371980000,
    India: 1276860000,
    'United States': 321786000,
    Indonesia: 255461700,
    Brazil: 204873000,
    Pakistan: 190860000
};
countries = Object.keys(countries).filter(function(key) {
    // Countries under 1000000000
    return countries[key] <= 1000000000;
});
console.log(countries);
// Results in:
// ["UnitedStates", "Indonesia", "Brazil", "Pakistan"]

Giờ đây, các bạn đã có thể hiểu rõ hơn về cách lập trình với một object trong javascript. Ở bài tiếp theo tôi sẽ giúp các bạn làm rõ một số vấn đề như: 

  • - Khi nào sử dụng Objects javascript ? và khi nào sử dụng Arrays javascript
  • - Nên tập trung làm quen với Object hay Array trước khi học javascript? 
  • - Cách storage objects để query một cách nhanh nhất Để học javascript tốt thì Object và Array chính là vấn đề cốt lõi cho việc render ra một list. 

Nó nhanh hay chậm, không chỉ tuỳ thuộc vào database trả về, mà cũng một phần lập trình tại client. 

Thanks for reading!