ES6 theo góc nhìn của beginer

Tram Ho

Dạo gần đây mình có mày mò để học Reactjs. Đang định ăn xổi bắt đầu đọc tài liệu React luôn thì nhận ra không được vì thực sự cú pháp quá mới so với Javascript thân thuộc ?

Vậy nên mình quyết định phải học từ những thứ cơ bản nhất là ES6.

Sau đây là những gì mình đang và cố gắng tìm hiểu nếu có phần nào sai, hoặc hiểu chưa đúng mọng mọi người góp ý với ạ ?

Let and Const

Let về cơ bản thì giống var nhưng nó có scope, các bạn cũng xem ví dụ sau đây:

Qua ví dụ trên thì ta chú ý thấy những điểm sau:

  • giá trị của a được khai báo trong if hoàn toàn không ghi đè được giá trị ngoài if
  • b vẫn có thể sử dụng được trong if
  • giá trị của c đã bị thay đổi sau khi đi qua if

Const thì cũng không thay đổi mấy nó vẫn để khai báo hằng số thôi. Nhưng hãy vẫn lấy 1 vài ví dụ nhé:

Nhưng const là array hay object thì sao

Arrow Function

Qua ví dụ sau chúng ta sẽ thấy nó thay đổi như thế nào:

Cú pháp mới cơ bản là có 2 phần:

  1. var newOne = ()
    Phần var newOne như là giấy khai sinh ấy, kiểu nói cho mọi người biết “tao đã được đẻ ra rồi nhé, tên tao là newOne đấy nhé”. Còn nó làm nghề gì thì đây, phần = () này nói nó là 1 function chứ không phải bác sỹ hay kỹ sư.
  2. => {}
    Còn phần này thì kiểu kể về cuộc đời làm function của nó, làm những cái gì, làm như nào kết cục trả về ra sao thì viết vào trong đây.

Default Parameters

Cái này mình nghĩ thực sự nó quá quen thuộc rồi nhất là với các bạn học Ruby như mình.
Hiểu cơ bản là những params nếu không truyền vào thì không sao, nó sẽ lấy giá trị mặc định, ví dụ:

À nhưng mà mọi người chú ý các default parameter nên để ở cuối nhé vì nếu để như này thì sẽ không hoạt động đâu:

For of loop

Nhìn nhanh qua ví dụ trên chúng ta thấy ngay string[index] sẽ là là output của mỗi vòng lặp chứ không phải index. Cũng giống bên Ruby thôi.

Spread attributes

Theo như mình hiểu thì nó sẽ biến 1 danh sách các phần tử thành 1 mảng các phần tử.
Cùng xem ví dụ sau để hiểu hơn nhé:
Thông thường chúng ta sẽ viết

Cái chúng ta truyền vào khi gọi SumElements phải là 1 mảng, thì chúng ta có thể viết cách khác như sau:

Khi đó chúng ta không cần truyền vào 1 mảng nữa mà là 1 danh sách các phần tử.

Maps

Khá giống hash của Ruby nhưng chúng ta phải dùng phương thức setget để thêm phần tử và lấy phần tử và mỗi 1 phần tử trong Maps gắn liền với 1 cặp [key, value] chứ không phải {key: value}, và các key trong 1 Maps là unique, đồng nghĩa với việc nếu bạn set 2 giá trị có cùng key thì giá trị được set sau sẽ ghi đè lên giá trị trước đó. Cùng xem ví dụ:

Một số methods có sẵn sẽ thường xuyên sử dụng của Maps như:

Vì phía trên mình có bảo mỗi phần tử của Maps sẽ được lưu trữ dưới dạng [key, value] nên khi lặp chúng ta hoàn toàn có thể thử như sau:

Sets

Lưu lại 1 mảng các giá trị unique

Dù thêm 2 lần "a" nhưng trong sets chỉ có 1 giá trị "a".
Một số methods hữu dụng của Sets:

Static methods

Không biết mình hiểu có đúng không nhưng mình nghĩ nó giống 1 dạng class methods tương tự như của Ruby: Định nghĩa bên trong class và chỉ được gọi trực tiếp thông qua class.

Getters and Setters

Quá quen với anh em lập trình rồi, nếu bạn đã học qua về lập trình Java, Asp.NET trên trường thì cũng không lạ gì cú pháp như này rồi:

Nếu mọi người quên hoặc chưa biết thì mình xin giải thích ngắn gọn như sau:
Contructor là hàm khởi tạo khi bạn let person = new People("Jon Snow"); thì hiểu nôm na là thực ra bạn đang gọi đến hàm constructor này và this trong hàm này chính là đối tượng person vừa được khởi tạo. Và nó sẽ gán thuộc tính name của đối tượng person = giá trị chúng ta truyền vào ở new People("Jon Snow");. Khi bạn gọi person.setName("Dany"); thì this trong hàm này cũng chính là đối tượng gọi hàm (là person), nói đến đây chắc mọi người cũng hiểu rồi ạ ?

Tài liệu tham khảo

https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be
https://github.com/lukehoban/es6features#let–const

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo