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

Pluck javascript array - Việc bạn giải quyết vấn đề trong lập trình nhanh hay chậm, dễ hiểu hay phức tạp. Hoặc ở một khía cạnh khác, bạn muốn trình bày vấn đề bạn gặp phải cho một đồng nghiệp nghe và nhờ sự giúp đỡ từ họ, nhưng bạn thực sự không biết phải giải thích thế nào để có thể giải quyết được vấn đề bạn gặp phải. Thì bạn nên xem lại cách đặt câu hỏi của mình?

Ủa đang đọc bài "Pluck javascript array" mà sao toàn nói chuyện gì vậy? Không, mọi chuyện đều có bắt đầu đấy, Pluck javascript đó chính là một khái niệm mà bạn cần phải hiểu để khi cần và áp dụng thì search trên google là nó ra thôi, giả sử bạn không biết khái niệm đấy thì bạn phải mô tả vấn đề đó một cách tỉ mỉ nhất.

Trường hợp sử dụng Pluck javascript.

Vào một ngày đẹp trời, công ty giao cho bạn một Arrays trong đó chứa thông tin như sau:

var goal  = [ 
        { 
            "category" : "other", 
            "title" : "harry University", 
            "value" : 50000, 
            "id":"1" 
        }, 
        { 
            "category" : "traveling", 
            "title" : "tommy University", 
            "value" : 50000, 
            "id":"2" 
        }, 
        { 
            "category" : "education", 
            "title" : "jerry University", 
            "value" : 50000, 
            "id":"3" 
        }, 
        {     
            "category" : "business", 
            "title" : "Charlie University", 
            "value" : 50000, 
            "id":"4" 
        } 
    ] 

Ví dụ từ: geeksforgeeks

Và nhiệm vụ của bạn phải filter và chỉ lấy những giá trị thuộc "category" mà thôi. Tôi biết bài toán này nó quá dễ và có nhiều cách làm, nhưng các bạn chú ý tên của bài viết này đó là mang đến và giải thích cho bạn hiểu thêm một khái niệm trong lập trình javascript. Cho nên đừng ý kiến vượt qua phạm vi bài viết này. Vậy Pluck javascript là gì? Và viết code như thế nào là tối ưu?

Pluck javascript là gì?

Pluck javascript là một khái niệm được sử dụng khi chúng ta cần trích xuất dữ liệu của một thuộc tính trong một danh sách cho trước. Giống như chúng ta phải tìm ra tên của tất cả các sinh viên, nếu như bạn nào chưa biết thì sẽ đi tìm phương pháp hoặc xử lý thủ công. Nhưng nếu bạn nào đọc bài viết này rồi or đã biết khái niệm này trước đây thì việc xử lý hoặc search google là ra phương pháp thôi.

Đó các bạn thấy đấy, nếu dữ liệu ít thì các bạn muốn làm gì thì làm, nhưng nếu mà bạn phải xử lý hảng triệu records thì câu chuyện này đáng để bàn tới đây. OK bây giờ bạn đã biết tới Puck trong javascript rồi thì việc triển khai hay có bao nhiêu cách để viết function puck thì chúng ta cũng xem qua trong bài viết này luôn. Và tôi cũng khuyên chân thành bạn bỏ ra chút thời gian để học thêm nhiều về kỹ năng xử lý trong object và array trong javascript. Bởi vì, trong js chúng ta sẽ sử dụng chúng rất rất nhiều.

Sử dụng pluck javascript

Có nhiều phương pháp để tạo nên một function puck(), giờ chúng ta thử viết một số phương pháp xem thằng nào hiệu quả hơn.

Tôi sẽ lấy ví dụ trên để so sánh luôn:

Pluck Unique Values from Array of Javascript Objects

Cách 1:

Sử dụng from và map trong javascript

const pluck = key => array => Array.from(new Set(array.map(obj => obj[key])));
const getCategorys = pluck('category');

console.log(getCategorys(goal)); //goal ở đây là objects array ở phía trên 

Cách 2: Chỉ sử dụng map() trong javascript

let result = goal.map(a => a.category);

let result = goal.map(({ category }) => category)

console.log(result);

Notes: Hãy suy nghĩ xem nhìn vào là biết map() ok rồi, nhưng tại sao vẫn phải có cách 1...???

Cách 3: cách thông thường chỉ dùng for in trong javascript

function pluck(objs, name) {
    var sol = [];
    for(var i in objs){
        if(objs[i].hasOwnProperty(name)){
            sol.push(objs[i][name]);
        }
    }
    return sol;
}

console.log(pluck(goal, 'category'));

Cách 4: Reduce javascript

const pluck = (key, array) =>
  array.reduce((values, current) => {
    values.push(current[key]);

    return values;
  }, []);

console.log(pluck('category', goal));

Cách 5 dùng thư viện như lodash hoặc Underscore.js | pluck()

var goal  = [ 
        { 
            "category" : "other", 
            "title" : "harry University", 
            "value" : 50000, 
            "id":"1" 
        }, 
        { 
            "category" : "traveling", 
            "title" : "tommy University", 
            "value" : 50000, 
            "id":"2" 
        }, 
        { 
            "category" : "education", 
            "title" : "jerry University", 
            "value" : 50000, 
            "id":"3" 
        }, 
        {     
            "category" : "business", 
            "title" : "Charlie University", 
            "value" : 50000, 
            "id":"4" 
        } 
    ] 
   console.log(_.pluck(goal, 'category')); 

Cuối cùng là cho bạn nào đã từng sử dụng DataTable js rồi

var table = $('#example').DataTable({
  "data": [
    {
      "name": "Tiger Nixon",
      "hr": {
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25"
      }
    },
    {
      "name": "Garrett Winters",
      "hr": {
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25"
      }
    },
    {
      "name": "Ashton Cox",
      "hr": {
        "position": "Junior Technical Author",
        "salary": "$86,000",
        "start_date": "2009/01/12"
      }
    }
    ],
    "columns": [
        { "data": "name" },
        { "data": "hr.position" }
    ]
);
 
var saleries = table
    .rows()
    .data()
    .pluck( 'hr' )
    .pluck( 'salary' );

Nói tóm lại dùng cách nào đi chăng nữa thì bạn cũng phải hiểu những khái niệm này, để khi gặp khó khăn thì hãy tìm hiểu theo từ khoá đó, chứ đừng có ngồi mò, suy đoán các kiểu mà trong khi những vấn đề đó đã được giải quyết rất nhiều ở trên google hay ở các đồng nghiệp của bạn. Nên nói chuyện bằng ngôn ngữ lập trình.