1 số tính năng mới trong JS ES5 và ES6

Chục ngày rồi mà chả biết viết về cái gì nên đành lôi tạm mấy cái mới học vẹt được từ trên mạng tổng hợp lại cho anh em đang có nhu cầu bổ sung kiến thức về thằng khỉ gió Javascript cái nào. Chủ yếu là mấy cái tiện dụng mới nhất để anh em từng trải với thằng JS cảm thấy nó đỡ nhục hơn trước chứ không phải ngồi liệt kê được ra hết đâu nhé :)) Giờ thì đi đến từng cái nào :3

String template

Cái này giống kiểu String format mà anh em hay dùng ở các thằng C# hay Java thôi

PHIÊN BẢN CỔ LỖ SĨ

var message = "The user "+ user.firstName + "" + user.lastName +
" cannot be "+ action + "because "+ validationError;

PHIÊN BẢN HỢP THỜI

var message = `The user ${user.firstName} ${user.lastName} cannot be
${action} because ${validationError}`;

Biến var

Giờ thì anh em có thể sử dụng keyword LET thay thế cho VAR để hạn chế việc gán loạn xạ như kiểu

var handsome = "HOÀNG";
var handsome = "PHAN HẢI"; (được luôn)

nhưng giờ nếu dùng LET

let handsome = "HOÀNG"
let handsome = "PHAN HẢI" (làm gì có ai đẹp trai ngoài HOÀNG được => lỗi ngay)

Từ khóa CONST

Giống như các đàn anh đi trước như C++, C# hay Java thì JS cũng mới cho thêm thằng này để hợp thời. Cái này ví dụ như trên

const handsome = "HOÀNG"
handsome = "PHAN HẢI" (lỗi như thằng let vì làm gì có ai đẹp nữa :)) )

Scope

Khi sử dụng khai báo biến với var thì chả có sờ cộp sờ củng gì cả => Đây cũng chính là nguyên nhân gây lỗi tóe loe của thằng JS đó nên giờ với LET và CONST thì bị giới hạn trong block nó khai báo nên “đẹp trai” đỡ nhiều rồi :3

Default parameter

Cũng là 1 tính năng ăn theo cho kịp thời đại giống các bô lão C# thôi ấy mà

let sayHello = function(message = "Hello world!") {
    console.log(message);
}
sayHello(); // prints "Hello world!"
sayHello("HOÀNG XINH GÁI!"); // prints "HOÀNG XINH GÁI!"

Arrow function

Tên nghe hơi cá chuối đúng không anh em? Hàm mũi tên là cái quái gì nhỉ :)) Mũi tên chính là cái => đó đó :3 Anh em nào làm C# biết ngay đó chính là biểu tượng kinh điển của LINQ rồi. Và giờ thì người ta cũng đã mang phong cách LINQ lên cho LINQ. Ví dụ thì như dưới

function(arg1, arg2){//something here}
The above can now be written as:
(arg1, arg2) => {//something here}>/pre>

Toán tử IN

Nhìn là hiểu này

let arr = ["janishar", "ali", "anwar"]
let displayArr = function(arr) {
    for (let x in arr) {
        console.log(x);
    }
};

1 loạt tính năng để JS giống OOP

Giờ thì JS cho khai báo cả class, khởi tạo cả class nữa luôn; rồi có cả GET,SET nữa này

class Person {
    constructor(firstName, lastName, age) {
        console.log(arguments);
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    get firstName() { return this._firstName; }
    set firstName(value) { this._firstName = value; }
    get lastName() { return this._lastName; }
    set lastName(value) { this._lastName = value; }
    get age() { return this._age; }
    set age(value) { this._age = value; }

    static haveBaby() {
       return Person.population++;
   }
}

Static function nữa luôn; chưa kể cho cả kế thừa các kiểu con đà điểu nữa.

class NhaVanViDai extends Person{
    constructor(firstName, lastName, age, subject){
        super(firstName, lastName, age);
        this.subject = subject;
    }
    get subject() { return this._subject; }
    set subject(value) { this._subject = value; }
    vietBlog() {
        console.log(
            this.firstName,
            "đẹp giai vừa viết",
            this.subject
         );
    }
}
let hoang = new NhaVanViDai("LÊ", "HOÀNG", 16, "1 bài blog thật là hay");
hoang.vietBlog();

Giờ thì JS code không khác C# hay Java luôn :)). Muốn sử dụng các modules khác thì có cả IMPORT, EXPORT. Thử hỏi thì khác gì không nào :v

Xử lý với COLLECTION

Mấy cái này chắc nhiều anh em đã biết nhưng nói qua lại 1 tí nhỉ. À mà thôi nó cũng chỉ là mấy cái hàm MAP, FILTER, FOREACH. Tính năng như thằng FOR basic nhất thôi chứ chả khác gì mấy đâu :3

Promise

Để xử lý mấy cái callback hell thì người ta cho ra cái thằng Promise mà bài viết trước mình có nói rồi hay sao ấy :v Anh em lôi ra đọc lại tí nhé :3

CHỐT

Thực ra thì JS còn được bổ sung thêm cả đống thứ linh tinh nữa mà mình chả để ý hết, tạm thời cứ liệt kê những thứ trên để anh em cùng nhau nắm bắt và tìm hiểu thêm. Với đống tính năng được các anh Khoai Tây cho vào thê, thì JS ngày càng mang lại cho những người lập trình như chúng ta bớt cáu bẩn khi phải làm việc với nó vì sự dễ dãi của nó ngày xưa :)) Giờ thì đi ăn sáng nào :v

Advertisements

One thought on “1 số tính năng mới trong JS ES5 và ES6

  1. Pingback: Mùa JS nằm cạnh | Code, code and more code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s