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

Trong bài viết tiếp theo về series "Say about object and array in javascript" thì chúng tôi sẽ giới thiệu cho các bạn những cách giúp bạn có thể tối ưu hơn trong array với những ví dụ thực tế Ở bài viết trước chúng ta đã biết sử dụng array khi nào? và những method của array mà mỗi developer javascript phải biết.  
Nhưng trước tiên tôi muốn có một lời khuyên chân thành đó là trước khi bạn đọc bài viết này thì bạn nên xem qua "10 method cần biết về array trong javascript" vì ở đó, chúng tôi đã tóm lượt lại những cú pháp mà đa số những lập trình viên đều sử dụng phổ biến nhất trong mỗi dự án của mình. Nên dành khoảng 1 phút cho bài viết đó, bạn sẽ không cảm thấy thất vọng đâu.

Trong bài viết này tips javascript sẽ recommented cho bạn một số cách có thể giúp bạn xử lý tốt hơn trước kia. Thật ra những trường hợp dưới đây tôi cũng bị sai phạm và từ đó cũng rút ra được nhiều điều cho nên mới có những chia sẻ cho các bạn nắm những sai lầm và tránh như tôi. 

Thay thế array.indexOf bằng array.includes

Nếu bạn muốn tìm một vị trí của array thì điều đương nhiên bạn sẽ sử dụng indexOf. Nó sẽ giúp bạn trả về tìm vị trí đầu tiên khi nó tìm được. Và indexOf chính là một giải pháp. Nhưng nếu bạn chỉ cần check giá trị có tồn tại trong array (return yes/no) thì tôi khuyên bạn không nên sử dụng indexOf. Kiểu như thế này.

const characters = [
  'ironman',
  'black_widow',
  'hulk',
  'captain_america',
  'hulk',
  'thor',
]

console.log(characters.indexOf('hulk'));
// 2 -> tìm thấy
console.log(characters.indexOf('batman'));
// -1 -> không tìm thấy. Không nên sử dụng cách này.

Thay vì sử dụng indexOf thì bạn có thể sử dụng includes, một method mà ES2016 đã giới thiệu, nó giúp chúng ta trả về true/false.

console.log(characters.includes('hulk')); //true
console.log(characters.includes('batman')); //false

Bởi vì sao chúng tôi recommend cho các bạn như vậy, là vì? Xem thêm ví dụ

const  array = [NaN, undefined];
if (array.indexOf(NaN) === -1){
    console.log("NaN not found in the array");
    //NaN not found in the array
}

if(!array.indexOf(undefined) === -1 ){
    console.log("true. array elements are undefined");
}else {
    console.log("Sorry can't find undefined");
    // Sorry can't find undefined
}

if (array.includes(NaN)){
    console.log("NaN was found in the array");
    //NaN not found in the array
}

if (array.includes(undefined)){
    console.log("undefined was found in the array");
    //NaN not found in the array
}

Với những kết quả trên chúng ta có thể kết luận. includes method so thể check được những falsy value như Nan, undefined. Ngược lại indexOf thì không, chính vì vậy chúng ta nên sử dụng includes thay vì indexOf, nhằm giảm bug cho chính chúng ta.

Thay thế Array.filter bằng Array.find

 Nhằm để giải thích cụ thể về việc này thì chúng ta lấy một ví dụ sau:

'use strict';

const characters = [
  { id: 1, name: 'ironman' },
  { id: 2, name: 'black_widow' },
  { id: 3, name: 'captain_america' },
  { id: 4, name: 'captain_america' },
];

function getCharacter(name) {
  return character => character.name === name;
}

console.log(characters.filter(getCharacter('captain_america')));
// [
//   { id: 3, name: 'captain_america' },
//   { id: 4, name: 'captain_america' },
// ]

console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }

Bạn có thể thấy filter và find đề có kết quả nhưng nó khác nhau nếu nói về performance. Với filter. filter nó sẽ loop xuyên suốt một array và lấy tất cả những giá trị có cùng điều kiện. find ngược lại, khi tìm được giá trị cùng với điều kiện thì nó ngừng thực thi.

Như vậy nếu lấy ví dụ trên thì filter sẽ trả về là

console.log(characters.filter(getCharacter('captain_america')));
// [
//   { id: 3, name: 'captain_america' },
//   { id: 4, name: 'captain_america' },
// ]

và find

console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america'}

Không có lý do gì mà không thay thế filter bằng find.

Thay thế sự kết hợp giữa Array.filter and Array.map bằng sử dụng Array.reduce 

Ở vấn đề này, tôi đã có một bài viết phân tích khá rõ về hiệu quả hay sự tối ưu khi sử dụng reduce thay cho filter and map. đọc thêm về Javascript - Developer Hơn Nhau Ở Performance?

Bài toán ở đây là gì? xem ví dụ:

const users = [{
    name: 'Ronaldo',
    age: 23
}, {
    name: 'Messi',
    age: 14
}, {
    name: 'Anoystick',
    age: 22
}]

Bài toán tìm name của các cầu thủ đó age trên 18. 

Bài toán rất đơn giản và rất bình thường nhưng nó thật sự khác biệt khi xử lý hàng triệu record đó các bạn. Nếu bạn nào hiểu rõ vấn đề thì sẽ sử dụng filter and map. Điều đó hợp lệ cho bài toán này.

 Sử dụng filter and map:

const valid = users.filter(({ age }) => age >= 18).map(({ name }) => name); 

Kết quả chính xác, nhưng chúng ta cùng phân tích về đoạn code trên. Ở đây users.length = 3,  giả  sử như users có 100000 item thì câu chuyện sẽ khác. Đầu tiên khi sử dụng filter chúng ta đã loop hết users với 100000 lần. Giả sử tìm được 50000 trên tuổi 18. Rồi sau đó sử dụng array.map để get ra name thì ta phải chạy thêm 50000 lần nữa. Vậy câu lệnh trên sẽ chạy 150000 nếu users có 100000 item. Kết quả phân tích cho ta thấy quá lãng phí và hiệu năng không hề tốt chút nào Nhưng với reduce chúng ta có thể xem.

Sử dụng reduce.

// the reduce method
const valid = users.reduce((acc, { age, name }) => {
  return (age >= 18) ? [...acc, name] : acc;
}, []);

Đơn giản và hiệu quả, nó cho kết quả tốt và hiệu năng rất tốt.

Kết Luận

Trong bài này chúng tôi cùng với các bạn đưa ra 3 ví dụ để cho chúng ta thấy nếu tận dụng tốt chúng ta có thể làm tốt hơn nữa. Cố gắng học hỏi những mẹo như thế này, biết đâu một ngày bạn gặp pgair những trường hợp này, nó sẽ giúp cho các bạn nổi bật hơn. 

Nên nhớ nếu có thể: 

1. Thay thế array.indexOf bằng array.includes 
2. Thay thế Array.filter bằng Array.find 
3. Thay thế sự kết hợp giữa Array.filter and Array.map bằng sử dụng Array.reduce 

Nếu bạn cảm thấy bài viết giúp bạn nhìn nhận ra vấn đề thì xin hãy chia sẻ tiếp, vì biêt đâu bạn sẽ giúp được những người khác có cùng chí hướng như bạn.

Happy coding!

Ref: freecodecamp