ES6 hay là Javascript 2015
es6
21
Javascript
265
White

Mạnh Mẽ lên viết ngày 28/08/2015

ES6

Bạn có biết Javascript, - ngôn ngữ lập trình web mà chúng ta vẫn sử dụng còn có một tên gọi khác là ECMAScript ? ECMAScript hiện nay không phải là phiên bản đầu tiên. Dưới đây là các mốc thời gian của ECMAScript

  • ECMAScript 1:(ES1) ra đời năm*1997*
  • ECMAScript 2:(ES2) được giới thiệu năm 1998
  • ECMAScript 3:(ES3) được giới thiệu năm 1999
  • ECMAScript 4:(ES4) được giới thiệu năm 2000
    • jQuery ra đời năm 2006
    • NodeJS ra đời năm 2009
  • ECMAScript 5:(ES5) ra đời năm 2011
  • ECMAScript 6:(ES6) tháng 6 năm 2015

Bây giờ đã đang là tháng 6 năm 2015, vậy bạn đã biết gì về ES6 chưa :)

Lập trình hàm trong ES6

ES6 cung cấp một loạt các API rất hữu dụng với cấu trúc Array. Các xử lý cũng linh hoạt lên rất nhiều, trong đó nổi bật nhất phải kể đến Array Comprehension. Dưới đây là cách viết hàm bình phương cho ES5 và ES6:

// ES5
[1, 2, 3].map(function (i) { return i * i }); // [1, 4, 9]
// ES6
[for (i of [1, 2, 3]) i * i]; // [1, 4, 9]

Một ví dụ nữa với hàm lọc (filter)

// ES5
[1, 2, 3].filter(function (i) { return i < 3 }); 
// ES6
[for (i of [1, 2, 3]) if (i < 3) i ];

Nếu kết hợp 2 vòng for thì ta sẽ còn viết được nhiều xử lý hơn trong 1 dòng duy nhất

[for (x of 'abc'.split('')) for (y of '123'.split('')) (x+y)];
// ["a1", "a2", "a3", "b1", "b2", "b3", "c1", "c2", "c3"]

Với những sức mạnh kể trên thì bạn sẽ cảm thấy ES6 cũng "mạnh mẽ" chẳng kém gì Python, Haskell hay Scala !

Từ khóa Let

ES6 giới thiệu một từ khóa mới để định nghĩa biến: let. Vậy so với var thì let có những khác biệt nào ?

var có hiệu lực đến hàm gần nhất, trong khi let có hiệu lực đến dấu đóng mở ngoặc gần nhất (thường sẽ nhỏ hơn phạm vi của hàm gần nhất)

Sự khác biệt sẽ thể hiện rõ khi chạy một vòng loop qua một biến khai báo bằng varlet

var arr = [];
for (var i=0; i<3; i++){ 
  arr[i] = function(){ 
    console.log(i); 
  }
};
arr[0](); // 3
arr[1](); // 3
arr[2](); // 3

Ở trên là đoạn code của ES5, biến i là biến chung trong cả function, vì vậy ở thời điểm gọi arr[0](), arr[1](), arr[2]() thì i đã nhận giá trị 3, dẫn đến mọi ouput đều trờ thành 3. Dưới đây chúng ta sẽ thử với let của ES6

let arr = [];
for(let i=0; i<3; i++) {
  arr[i] = function() {
    console.log(i);
  }
};
arr[0](); //0
arr[1](); //1
arr[2](); //2

Biến i chỉ nhận giá trị trong vòng for, vì vậy sẽ lần lượt mang giá trị 0,1,2 với 3 lần gọi ở cuối cùng.

Arrow function

Mình định viết về Arrow function, nhưng thấy đã có bài này rất chi tiết và đầy đủ :) Vì vậy các bạn xem bài viết trên nhé.

Babel.js

Babel.js là tool cuối cùng mình muốn giới thiệu với mọi người. Trong thời gian ES6 vẫn chưa chính thức ra mắt và được các browser support, thì các bạn có thể viết code ES6 và dùng Repl của BabelJS để dịch lại sang mã ES5 chạy được trên browser. BabelJS mang lại khả năng phát triển và sử dụng các tính năng của ES6 ngay tại thời điểm này và chỉ cần thêm một thao tác compile là code sẽ chạy được trên các browser bình thường.

BabelJS

Nhân tiện, dưới đây là đoạn code được BabelJS dịch ra với cách dùng hàm let bên trên. Bạn có thể thấy biến i được wrap trong một function mới.

var arr = [];
var _loop = function (i) {
  arr[i] = function () {
    console.log(i);
  };
};
for (var i = 0; i < 3; i++) {
  _loop(i);
};
arr[0]();
arr[1]();
arr[2]();

Vậy đã có bạn nào code bằng ES6 chưa :)

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

Mạnh Mẽ lên

7 bài viết.
29 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
47 6
(Ảnh) Flux trong giới Javascript không chỉ là chủ đề nổi tiếng nhất mà còn là chủ đề khó nắm bắt nhất. Bài viết này sẽ cố gắng giải thích một cách...
Mạnh Mẽ lên viết 3 năm trước
47 6
White
34 15
Electron và Atom (Ảnh) Các bạn có biết đến trình soạn thảo Atom của Github không nhỉ. Atom là một dự án mã nguồn mở khá giống Sublime nhưng có th...
Mạnh Mẽ lên viết hơn 3 năm trước
34 15
White
16 3
(Ảnh) Ở 2 phần trước mình đã tổng lại app desktop đầu tiên viết bằng framework (Link) của Github. Các bạn có thể theo dõi lại (Link) của 2 bài viế...
Mạnh Mẽ lên viết hơn 3 năm trước
16 3
Bài viết liên quan
White
5 1
Xử lý đồng bộ một mảng bằng Promise thay cho async.eachSeries Tựa Đang muốn chạy một hàm trong đó xử lý đồng bộ từng phần tử trong một mảng, do g...
Cuong Pham viết 2 năm trước
5 1
White
2 0
Do dạo này Webstorm chẳng hiểu sao lag quá (dù máy mạnh) nên sắc phong Visual Studio Code từ IDE phụ lên IDE chính. Các plugin này để đảm bảo trải ...
Cuong Pham viết hơn 1 năm trước
2 0
White
16 2
(Ảnh) Lời mở JavaScript, ngôn ngữ được ấp ủ đúng 10 ngày đã trở thành từ kỹ thuật được nhắc nhiều nhất bây giờ, phải cảm ơn cuộc cách mạng của W...
Lơi Rệ viết 3 năm trước
16 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
29 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á!