Một số tính năng cơ bản trong Javascript ES6

Lời nói đầu

Xin chào 500 anh em, Trong buổi seminar hôm nay mình sẽ giới thiệu về những điểm mới trong JavaScript ES6, Một phiên bản Javascript với cú pháp rất gọn, linh hoạt, dễ tiếp cận hơn phiên bản Javascript trước đó. Hiện tại đã có phiên bản JavaScript ES7,ES8 và sắp tới sẽ có phiên bản ES9, Đừng lo lắng vì theo mình xem qua thì các phiên bản ES7, ES8 chỉ có một số sự thay đổi nhẹ. Ngày nay, chúng ta có thể thấy rất nhiều thư viện Javascript, thậm chí một vài còn được coi là FrameWork để xây dựng phần Viewcủa ứng dụng MVC vì nó rất linh hoạt, dễ dàng maintain và thay thế hoàn toàn việc render view từ phía server. Do đó trong các dự án ngày nay chúng đang thay thế cách tạo view theo kiểu truyền thống. Và để tiếp cận và sử dụng chúng, Chúng ta không thể không biết đến ES6, Mình sẽ chỉ điểm một số tính năng mới mình thấy khá hay và dùng rất nhiều.

constants

Trong ES6 đã có constant rồi nhé, tức là hằng số, tuy nhiên nó chỉ đúng đối với biến được gán bằng một gía trị. ES6:

const PI = 3.141593
console.log(PI); // 3.141593
PI = 1; // compiler error
const ARG = {a: 3};
ARG.a = 4 // that ok !;

Arrow function

ES6 cung cấp một cách để tạo một function một cách viết rất gọn, Và hiện tại hầu hết các lập trình viên đều viết theo dạng này. ES6:

(param1, param2) => { 
    return param1 + param2
}
# if 0 param
() => {
    # body function here
 }

ES5:

function(param1, param2) { 
    return param1 + param2
}

Block scoping (let keyword)

Chính là phạm vi biên sử dụng trong block, Đơn giản là biến được khai báo bằng từ khóa let thì sẽ chỉ có phạm vi sử dụng trong 1 block {}, Trong khi lập trình chúng ta nên sử dụng từ khóa let trong hầu hết mọi trường hợp: ES5

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

ES6

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

Default parameter

Hỗ trợ gán giá trị mặc định tham số của function:

var f = (x, y = 7, z = 42)  => {
    return x + y + z
}
f(1) === 50

String Interpolation

ES6 giải quyết việc truyền tham số vào chuỗi string một cách dễ dàng bằng cặp ${}, không cần phải sử dụng oparator như phiên bản ES5 trước đó ES6:

var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`

ES5:

var customer = { name: "Foo" };
var card = { amount: 7, product: "Bar", unitprice: 42 };
var message = "Hello " + customer.name + ",\n" +
"want to buy " + card.amount + " " + card.product + " for\n" +
"a total of " + (card.amount * card.unitprice) + " bucks?";

Binary & Octal Literal

Chú ý khi so sánh 2 biến, hãy xem xét thật kĩ trước khi so sánh bằng toán tử === hoặc == ***ES6: ***

0b111110111 === 503 // true
0o767 === 503 //true

Object

ES6:

x = {a, b}
x = {
    foo(a,b){
    },
    bar(a,b){
    }
}

ES5:

x = {a: a, b: b}
x = {
    foo: foo(a,b){
    }
    bar: bar(a,b){
    }
}

Object matching

ES6: var { op: a, lhs: { op: b }, rhs: c } = X var {a} = X <=> var {a: a} = X <=> var a = X.a var {a, b = 3} = X // default b = 3 if b null ES5:

var tmp = getASTNode();
var a = tmp.op;
var b = tmp.lhs.op;
var c = tmp.rhs;

Modules

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

//  someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

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

//  lib/mathplusplus.js
export * from "lib/math"
export var e = 2.71828182846
export default (x) => Math.exp(x)

//  someApp.js
import exp, { pi, e } from "lib/mathplusplus"
console.log("e^{π} = " + exp(pi))

Class

Thay bằng việc khai báo prototype phức tạp ES6 cung cấp một cách đơn giản để thao tác OOP với javascript bằng từ khóa Class, Chú ý đây chỉ là cú pháp khai báo dê hiểu cho lập trình viên chứ nó không đúng nghĩa là Class trong các ngôn ngữ phía server như C, C++, Java, Php...

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
    }
}

Tổng kết

Trên là những điểm mới khá hay và cơ bản của ES6 theo mình là khá cần thiết.

nguồn

http://es6-features.org