Javascript Tips - Những điều có thể hay trong JS (ep1)
Javascript
247
tips
18
White

Dinh Duong viết ngày 02/07/2016

Imgur

Những điều có thể bạn đã biết hoặc chưa, những kinh nghiệm nho nhỏ của mình chia sẽ khi lập trình javascript, mong nó có thể giúp ích cho các bạn đang lập trình ngôn ngữ này :smile:

Tránh lỗi khi dùng những default function của array

Các default array function của javascript như map, forEach, filter,... sẽ bị lỗi nếu như trường hợp array của bạn null hoặc undefined (vd: nhận dữ liệu từ server), nó khá nguy hiểm nếu bạn nào quên, khiến ứng dụng mình stop ngay lập tức. Các bạn nên check trước khi gọi các function đó. Bạn có thể lồng nó vào scope của if hoặc gọn hơn thì viết như này.

var newArr = array && array.map(function(item){
    //DO SOMETHING
});

Sử dụng Ternary Operator cho gọn gàng

Ternary Operator, mấy bạn Mễ gọi thế :D, nó là ? : mà các bạn hay sài thôi. Các bạn có thể sử dụng thay cho if else, nhưng nhiều trường hợp nó tiện hơn rất nhiều.Ví dụ:

//jquery css
$element.css('color', per$.isFirstTab ? 'red' : 'green');

//set value for a variable
var color = per$.isFirstTab ? 'red' : 'green';

//Call a function
removeItem(per$.isFirstTab ? item1 : item2); //input values
module[per$.isFirstTab ? 'remove' : 'add'](item); //methods

Hàm map của javascript và jquery

Hai cái này thì nó khác nhau, bạn nào hay sài thì sẽ thấy, function map native của javascript nó sẽ return các giá trị undefined cho những item không thỏa điều kiện, còn jquery thì giúp chúng ta điều đó.

var array = [2, 3, 4, 5, 6, 7, 8];
var map1 = array.map(function(item) {
    if (item > 4)
        return item;
});
var map2 = $.map(array, function(item) {
    if (item > 4)
        return item;
})
console.log(map1); //[undefined, undefined, undefined, 5, 6, 7, 8]
console.log(map2); //[5, 6, 7, 8]

Nên nếu viết bằng hàm map của javascript thì bạn có thể viết lại bằng cách dùng hàm filter của native như thế này:

var array = [2, 3, 4, 5, 6, 7, 8];
var map1 = array.map(function(item) {
    if (item > 4)
        return item;
}).filter(function(item) {
    return item;
});

console.log(map1); //[5, 6, 7, 8]

Iterator trong javascript

Nếu bạn xử lý nhiều trong javascript thì bạn hay dùng những hàm thông dụng như forEach, map, filter, reduce,... kiểu lập trình như vậy được gọi là Declarative Proramming (Bạn tham khảo ở đây, một bài viết rất hay về Declarative Proramming). Mình sẽ viết lại các hàm mà javascript cung cấp đã được liệt kê ở trên để làm ví dụ.

Hàm forEach

var array = [2, 3, 4, 5, 6, 7, 8];
Array.prototype.foreach = function(iterator) {
    for (var i = 0, len = this.length; i < len; i++) {
        iterator && iterator(this[i]);
    }
}

array.foreach(function(item) {
    if (item > 4)
        console.log(item)
});
//5,6,7,8

Imgur

Hàm map

var array = [2, 3, 4, 5, 6, 7, 8];
Array.prototype.mapping = function(iterator) {
    var list = [];
    for (var i = 0, len = this.length; i < len; i++) {
        if (iterator)
            list.push(iterator(this[i]));
    }
    return list;
}

var newArr = array.mapping(function(item) {
    return item * item;
});

console.log(newArr);//[4, 9, 16, 25, 36, 49, 64]

Hàm remove

Trong javascript không support chúng ta hàm remove 1 item theo 1 điều kiện nào đó nên chúng ta có thể viết lại cho tiện sử dụng, dù chúng ta có thể sử dụng forEach hoặc nhiều cách khác để làm nhưng làm như thể sẽ thấy nó rõ ràng dễ maintain hơn.

var array = [2, 3, 4, 5, 6, 7, 8];
Array.prototype.remove = function(iterator) {
    for (var i = this.length; i >= 0; i--) {
        if (iterator && iterator(this[i]))
            this.splice(i, 1);
    }
}

array.remove(function(item) {
    return item > 4;
});

console.log(array);//2,3,4

Kết thúc ep1 (1 post nhỏ viết hoài mới xong :grin:), nhớ tiếp những gì hay hay mình sẽ chia sẽ tiếp ở series này phần sau. :grin:
Bài gốc từ blog của mình : http://jinhduong.github.io/javascripts/2016/06/05/js-tips.html

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Dinh Duong

18 bài viết.
134 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
60 9
(Ảnh) Với xu hướng lập trình mà business và phần lớn xử lý đều nằm ở tầng phía frontend với gánh nặng càng ngày càng đè lên vai chàng dũng sĩ javas...
Dinh Duong viết hơn 1 năm trước
60 9
White
30 5
(Ảnh) 1.Hoàn cảnh Bạn đã bao giờ tự hỏi tại sao setTimeout(()={console.log(123)}, 0); được nhiều library sử dụng đến như thế? Nó là 1 kỹ thuật h...
Dinh Duong viết hơn 1 năm trước
30 5
White
20 2
(Ảnh) Code splitting (chia nhỏ code) là một trong những tính năng làm nên tên tuổi của Webpack. Và với riêng bản thân mình thấy thì đây chính là t...
Dinh Duong viết 1 năm trước
20 2
Bài viết liên quan
White
43 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
43 8
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
18 bài viết.
134 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!