Tìm hiểu những tính năng mới của Javascript trong phiên bản ES6

Mấy hôm nay lang thang trên mạng mình có xem qua cái phiên bản mới ES6 của javascript, thấy có mấy tính năng update hay nên chia sẻ cùng các bạn, thực ra là có khá nhiều tính năng nhưng mình chỉ biết được một số cái thôi, mấy cái khác chưa đụng đến nên chưa hiểu lắm.

Giới thiệu một chút về ES6

ECMAScript 6/ES6 là phiên bản mới nhất của bộ tiêu chuẩn ECMAScript – một bộ đặc tả tiêu chuẩn dành cho Javascript do Hiệp hội các nhà sản xuất máy tính Châu Âu (European Computer Manufacturers Association – ECMA) đề xuất. Phiên bảnECMAScript phổ biến ở thời điểm hiện tại (đầu 2015), và được hầu hết các trình duyệt hỗ trợ là ES5 và ES5.1 (ra mắt vào khoảng năm 2009 và 2011)
 
ES6 đã ra mắt vào giữa năm 2015 và được lấy tên chính thức là ES2015, với rất nhiều những tính năng mới lạ, và cần thiết đối với sự phát triển chóng mặt của Javascript trong những năm gần đây. Ngoài ra, phiên bản mới nhất của bộ đặc tả tiêu chuẩn này là ES7 cũng đang được phát triển, tuy chưa định ngày ra mắt chính thức nhưng cũng đã bắt đầu gây được sự chú ý của giới công nghệ với những tính năgn hấp dẫn như async function,observer,…
 
Trong bài này mình liệt kê một số tính năng mới mình tìm hiểu được và thấy thú vị, các bạn có thể tham khảo thêm tại đây.
 

1. Xử lý chuỗi.

Cái này mình thấy tiện lắm, ngày trước khi xử lý chuỗi dài trong js luôn bực mình với việc xử lý các dấu nháy đơn (') và nháy kép (") xuất hiện, giờ khỏe hơn nhiều.
Ví dụ với kiểu viết cũ của ES5
var name = "Thuy";
var result = "Xin chao ban " + name + ", hom nay la \"Thu 5\" ngay 25/08";

var multiline = "Nguyen Van A \n 28 tuoi \n Hai Chau, TP Da Nang"

Với ES6 thì chỉ cần thế này

var name = "Thuy";
var result = `Xin chao ban ${name} hom nay la "Thu 5" ngay 25/08`;

var multiline = `Nguyen Van A 
28 tuoi 
Hai Chau, TP Da Nang`;

Như các bạn thấy, với ES6 hỗ trợ nhiều dòng, không quan tâm đến dấu nháy đơn, nháy kép, và hỗ trợ truyền tham số vào chuỗi.

 

2. Cho phép gán giá trị default cho tham số

Ở phiên bản này, Javascript đã có thể sử dụng các giá trị mặc định cho tham số truyền vào các hàm như những ngôn ngữ lập trình khác như C++, C#.

function f(x, y=12) {
   // y = 12 nếu không truyền giá trị cho nó (hoặc truyền undefined) 
   return x + y;
}
f(3) == 15

 

3. Truyền tham số không xác định số lượng.

Thay đổi này cho phép chúng ta truyền tham số vào hàm một cách vô cùng linh hoạt, các bạn xem ví dụ dưới đây

function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, "hello", true, 7) === 9

 

4. Truyền tham số thông qua từng phần tử của mảng.

Chúng ta cũng có thể ném nguyên 1 mảng đối tượng vào hàm, các phần tử của mảng sẽ được tự động truyền vào các tham số của hàm đó.

function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

 

5. Bổ sung thêm từ khóa let và const

Giờ đây trong js chúng ta đã có thể khai báo hằng số, với giá trị không thay đổi được

const x = 10;
x = 5; // Lỗi

Và let cũng là một dạng khai báo biến giống như var, tuy nhiên, biến được định nghĩa bằng từ khoá let có phạm vi truy cập khép kín trong khối lệnh chứa nó.

function testLet() {
    // a *không* truy cập được tại đây
    for( let a = 0; a < 5; a++ ) {
        // a chỉ truy cập được trong này
    };
    // a *không* truy cập được tại đây
};
 
function testVar() {
    // b truy cập *được* tại đây
    for( var b = 0; b < 5; b++ ) {
        // b truy cập được ở tất cả mọi nơi trong hàm testVar()
    };
    // b truy cập *được* tại đây
};

 

7. Hỗ trợ module

Ở phiên bản này javascript đã hỗ trợ module, các bạn xem ví dụ sau

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

 

8. Class kế thừa

Trong ES6, các kiểu dữ liệu sẵn có như Array, Date, các DOM Elements có thể được kế thừa bởi các class mới.

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        this.width  = width
        this.height = height
    }
}

class Circle extends Shape {
    constructor (id, x, y, radius) {
        super(id, x, y)
        this.radius = radius
    }
}

Còn rất nhiều cái thú vị nữa, các bạn có thể xem thêm tại đây http://es6-features.org/

Related Post


Tạo Date range picker với bootstrap datepicker
Tuesday, July 26, 2016
Hôm nay mình phải làm 1 chức năng nhỏ trong tìm kiếm, trong đó có 2 option chọn ngày CheckIn & CheckOut sử dụng Datepicker, yêu cầu là ngày CheckIn phải lớn hơn hoặc bằng ngày hiện tại, và ngày CheckOut phải lớn hơn ngày CheckIn, không cho phép chọn ngược về quá khứ. Yêu cầu có vậy thôi nhưng mò phát khùng mất 1 buổi, và mò ra rồi nên share cho bạn nào cần copy luôn phát cho nhanh
JavaScript – Chàng hiệp sĩ toàn năng
Tuesday, May 3, 2016
Khởi nguồn từ giữa những năm 1990, qua 20 năm tồn tại và phát triển, Javascript đã có những thay đổi lớn để thích nghi với thời cuộc, và bây giờ trở thành một ngôn ngữ toàn năng, thiết yếu và phù hợp đối với bất cứ một nhà phát triển nào. Với ý tưởng ban đầu là tạo ra một ngôn ngữ thông dịch tích hợp vào trình duyệt nhằm tăng tính tương tác của người dùng với trang web, với sự mềm dẻo của mình thì ngày nay Javascript đã làm được nhiều điều hơn thế, chúng ta thử điểm lại những miếng võ mà chàng hiệp sĩ này có thể triển khai nhé.
Search

Đăng ký nhận bài mới


Category

Blog Archive