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

Mẹo viết javascript

Bài viết nằm trong Series - Mẹo viết javascript, là một bài viết thuộc các thủ thuật đơn giản giúp lập trình viên có thể viết nhanh hơn, gọn hơn, và hiệu quả hơn. Hầu hết các tips and tricks javascript đều không khó hiểu, vì code tương đối đơn giản, quan trọng nó phải được sử dụng hằng ngày.

Và sau đây là một tình huống mà ai trong số chúng ta cũng đã từng gặp trong code của mình ít nhất cũng vài chục lần.

Trích xuất data từ array.

Tình huống diễn ra như thế này, ví dụ, chúng ta có một array chứa nhiều thông tin như name, age, address, link... Giờ đây, chúng ta chỉ muốn photocopy ra một bản nhưng chỉ có một số trường thôi như name, age mà thôi. Lý do, nếu bạn là một back-end đúng nghĩa thì sẽ hiểu việc vận chuyển một data có nhiều kích thước sẽ tốn băng thông các kiểu con đà điểu...

Và đây có 3 cách giải quyết mà tôi thường làm, tôi nghĩ cách thứ 3 bạn sẽ hơi bị bất ngờ... Đầu tiên là sử dụng cách thủ công thời nguyên thuỷ...

Sử dụng For ... Loop:

let data = [
    {name: "anonystick", sex:1, age: 42},
    {name: "medium", sex:0, age: 45},
    {name: "subrss", sex:1, age: 41}
]

// new an array
var new_data = [];
for (var i=0, new_data=[]; i<data.length; i++) {
    // push item to array
    new_data.push({
        name: data[i].name,
        sex:  data[i].age
    });
}
console.log(`Array is:::`, data);

//Ouput
"Array is:::", [{
  name: "anonystick",
  sex: 42
}, {
  name: "medium",
  sex: 45
}, {
  name: "subrss",
  sex: 41
}]

Ngoài cách thủ công này, chúng ta hiện nay đều không sử dụng phương pháp truyền thống nữa mà thay vào đó là sử dụng map method trong es6.

Sử dụng map()

let data = [
    {name: "anonystick", sex:1, age: 42},
    {name: "medium", sex:0, age: 45},
    {name: "subrss", sex:1, age: 41}
]

data = data.map(el => {
  return {name: el.name, sex: el.sex}
})

//Ouput
"Array is:::", [{
  name: "anonystick",
  sex: 42
}, {
  name: "medium",
  sex: 45
}, {
  name: "subrss",
  sex: 41
}]

Tiếp theo cách này tôi dám chắc bạn sẽ chưa hề sử dụng, đó là sử dụng JSON.stringify(), thật ra nếu bạn đã từng đọc bài Shallow copying và Deep copying trong javascript thì sẽ thấy JSON.stringify() được sử dụng và quan trọng như thế nào?

Sử dụng JSON.stringify()

let data = [
    {name: "anonystick", sex:1, age: 42},
    {name: "medium", sex:0, age: 45},
    {name: "subrss", sex:1, age: 41}
]

data = JSON.parse(JSON.stringify(data, ["name","age"]))

//Ouput
"Array is:::", [{
  name: "anonystick",
  sex: 42
}, {
  name: "medium",
  sex: 45
}, {
  name: "subrss",
  sex: 41
}]

Lời kết

Trên đây là cách giải quyết một tình huống diễn ra như cơm bữa extract data from javascript?" và tôi đã đưa ra 3 cách cụ thể nhất, tất nhiên là có nhiều cách khách như sử dụng các method trong array javascript để giải quyết nó. Nhưng tôi nghĩ không nhất thiết phải rườ rà như vậy. Và đây cũng là một mẹo viết javascript cho các DEV.

Happy coding!!!