Thực ra để học được javascript (ES5) bạn chỉ cần làm nhiều là biết thôi, ES6 cũng vậy. Nếu các bạn đã biết về ES5 thì ES6 cũng chả khác gì. Chẳng qua cú pháp của ES6 rút gọn đi rất nhiều nên với những bạn đã quen với ES5 sẽ cảm thấy ES6 thật kì diệu vãi ra. Chỉ với vài dòng code nó đã có thể thay thế cho một mớ bòng bong nếu viết bằng javascript cũ. Bài viết này sẽ giúp các bạn có một cách nhìn mới tinh về ES6 để có thể dễ dàng tiếp cận. Cứ hình dung như bạn sẽ được tẫy não và đang tìm hiểu về một ngôn ngữ mới lạ nhé, nó sẽ dễ dàng hơn là bạn change từ code cũ sang code mới.
1. Cách khai báo biến
Nếu bên ES5 chỉ có var thì bên ES6 chúng ta có thêm let và const
- var được dùng khi khai báo một biến có thể dùng đi dùng lại nhiều lần
- let dùng để khai báo biến có tính chất tạm thời, ví dụ như biến tạm khi ta thực hiện phép hoán tmp = a, a=b, b=tmp
- cost chắc khá rõ rồi, nó dùng để khai báo biến cố định, không bị thay đổi trong quá trình code. Thường thì các function được khai báo bằng const
Có một cách để khởi tạo giá trị mặc định cho biến mà chúng ta hay dùng như sau:
var notify = thongbao || "khong co thong bao"
Nếu không có giá trị được gắn cho biến notify thì notify sẽ có giá trị "khong co thong bao"
Ở ES6 chúng ta có thêm một cách đó là gắn trực tiếp tham số truyền vào một giá trị khởi tạo
Ví dụ: function notification (notify = "khong co thong bao") {
console.log (notify);
}
2. Cách tạo function
Ở ES5 nếu bắt gặp từ function thì các bạn biết ngay nó là function. Còn ES6, nếu thấy dấu '(' và ')' thì nó là một function.
Ví dụ: const a = ()
Đó là khai báo 1 biến a cố định, được hiểu là 1 function không có đối số truyền vào và chưa biết làm gì (là chưa viết xong đó)
Tiếp theo chúng ta sẽ định nghĩa nó làm gì bằng cách dùng cú pháp '=>', đó được gọi là arrow function
Ví dụ: const a = () => console.log('oh yeah')
Vậy là xong một function a với công dụng say 'oh yeah' trên console log của trình duyệt.
Với những function phức tạp, nhiều tham số thì cứ thêm vào bên trong dấu ( ) và viết code trong code block { }
Ví dụ: const a = (b , c) => {
let tmp = b
b = c
c = tmp
}
function a truyền vào 2 số và hoán đổi giá trị cho nhau
3. Khai báo tham số bao nhiêu cũng được
Cách nói vui này khi bạn viết function mà nhát truyền vào tham số vì chả biết sau này cần biến gì thêm nữa không. Lúc đó các bạn sẽ dùng Rest Parameter được khai báo bằng '... ' + tên mảng chứa biến
Ví dụ: const socialAlert = ( facebook, google, zing, ...other) {
alert( facebook)
alert( google)
alert( zing)
alert( other[0])
alert( other[1])
}
Vậy là khi bạn gọi socialAlert("1", "2", "3", "4", "5") thì nó sẽ lần lượt hiện alert 5 lần cho bạn
4. Rã array, object bằng dấu 3 chấm
Dấu 3 chấm sử dụng ở mục 3 đấy, chính là nó. Khi dấu 3 chấm đứng trước một thằng nào đó là mãng, hoặc map thì giống như nó bị phân hủy và rã thành từng phần tử riêng biệt
Ví dụ: var arrayA = [1, 2, 3]
var arrayB = [...arrayA, 4]
Lúc này thằng A bị rã ra thành 1, 2, 3 và thằng B nó tóm hết, đưa thêm số 4 vào để thành mãng [1, 2, 3, 4]
Tương tự với object
var objectA = {id: 1, name: "A"}
var objectB = {...objectA, name: "B", country: "VN"}
Object B cướp thông tin của thằng A, sau đó ghi đè name là "B" và thêm thông tin country "VN"
5. WeekMap
Một cái khá hay giống với java mà bây giờ mới có là WeekMap, nó tương tự như Map của java vậy, tuy nhiên key truyền vào của nó phải là object, function hoặc class, không như java có thể truyền vào string, number, object tùy ý.
var newMap = new WeekMap()
var key1 = {}
var key2 = () => console.log("key2")
// thêm giá trị cho map
newMap.set(key1, "object")
newMap.set(key2, "function")
// lấy ra
console.log(newMap.get(key1)) // "object"
// kiểm tra tồn tại
console.log(newMap.has(key2)) // true
console.log(newMap.has({}))
// false => Vì tuy có cùng object rỗng với key1 nhưng nó trỏ tới 2 địa chỉ khác nhau
// xóa
newMap.delete(key2)
6. Nối chuỗi bằng HTML template string
var s1 = "hello"
var s2 = "world"
var mySentence = "I am newbie, ${s1} my ${s2}"
// kết quả được chuỗi "I am newbie, hello my world"
Vi diệu quá phải không nào, từ nay khỏi sợ chiếm bộ nhớ bởi nối chuỗi nữa rồi
==============================================
Xong rồi đấy, nếu mà muốn học nữa thì tìm tài liệu tiếp đi. Ở đây mình chỉ nói sơ ra 6 cái chính của ES6 để đảm bảo rằng với 6 điểm này bạn có thể đọc hiểu 90% code ES6. Phần còn lại chính là kinh nghiệm chinh chiến khi bạn đào sâu vào làm. Xu hướng hiện nay code backend cũng giống như frontend, nên cứ nhớ những điểm này đi, rồi sau này bạn sẽ thấy nó xuất hiện ở rất nhiều ngôn ngữ lập trình đấy. Hy vọng bài viết này sẽ hữu ích với các bạn.
P.s: màu xanh là code ES5, màu hồng là code ES6, code ES6 không cần ";" ở cuối dòng vẫn chạy ổn nhé (tiếp kiệm thời gian). Hiện tại ES6 chưa được hổ trợ trên các trình duyệt, muốn chạy ES6 được thì vui lòng tìm hiểu thêm về babel và cách run nhé (babel sẽ chuyển ES6 thành ES5 để chạy được trên trình duyệt). Còn chỉ muốn học thì có thể thực hành tại đây: http://www.es6fiddle.net
ConversionConversion EmoticonEmoticon