Những điều cần biết về ES6

I. Khái niệm về ES6

• ES6 - ECMAScript 6 - European Computer Manufacturer's Association Script.
• ES6 do hiệp hội các nhà sản xuất máy tính Châu Âu đề xuất làm tiêu chuẩn của ngôn ngữ Javascript.
• References: ES6 Features. Compat Tablet. ES6 Desktop.

II. Những điểm mới trong ES6 1. Template String là gì ?

• Teamplate String là 1 chuỗi html thay vì mình viết nhiều nơi khác nhau thì mình cần khai báo 1 biến rồi chỗ nào gần gọi thì mình chỉ cần gọi biến đó là xong .

let elm = document.getElementById("mContent");
elm.style.color	= "#0174DF";

let todo = {
	id: 169,
	name: "Play football",
	status: false
};

elm.innerHTML	= `<div id="todo-id-${todo.id}">
						<i class="${ todo.status == true ? "hidden" : ""} glyphicon glyphicon-ok"></i>
						<span class="name">${todo.name}</span>
					</div>`;

2. Arrow Function

• Thay vì chúng ta biết function thông thường thì chúng ta sẽ viết bằng dạng Arrow Funtion cách viết bằng dấu =>

function func01(name, age) {
	return `func01 My name is ${name}, ${age} years old`;
}

var func02 = function(name, age) {
	return `func02 My name is ${name}, ${age} years old`;
}

var func03 = (name, age) => {
	return `func03 My name is ${name}, ${age} years old`;
}

var func04 = (name, age) => 
	`func04 My name is ${name}, ${age} years old`;
	//return `func04 My name is ${name}, ${age} years old`;

var func05 = name => {
	return `func05 My name is ${name}`;
}

var func06 = () => {
	return `func06 My name is`;
}

Ví dụ trên fun03, func04, func05 . Ở đây mình viết theo cách Arrow Funtion .

3. Enhanced Object Properties

• ES6 mang lại khả năng mô tả object một cách gọn gàng hơn. Chúng ta xem xứt ví dụ sau

/* ==================== Property value shorthand ==================== */
function getCourse(name, price, free){
	return {
		name,
		price,
		free
	}
}

console.log(getCourse("ES6", 20, false));


/* ==================== Method Properties ==================== */

function getCourse(name, price, free){
	return {
		name,
		price,
		free,

		showInfo1: function(){
			console.log(`${ name + " - " + price + " - " + free}`);
		},

		showInfo2(){
			console.log(`${ name + " - " + price + " - " + free}`);
		},

		showInfo3(delimiter = "-"){
			console.log(`${ name + delimiter + price + delimiter + free}`);
		}
	}
}

4. Funtion Default Params

• Là hàm có truyền tham số mặc định . Các bạn tham khảo ví dụ sau .

function showInfo(name ="ES6", price = 20){
	return `Course name: <b>${name}</b>, price: <b>${price}</b>`;
}

var dom = document.getElementById("mContent");
dom.style.color = "#0174DF";   
dom.innerHTML	= showInfo();

5. Class

• Như những ngôn ngữ lập trình khác PHP, Java , Ruby , ... điều có ra đời lập trình theo hướng đối tượng để dễ quản lý phát triền những hệ thống lớn và dễ bảo trì sau này đòi hỏi lập trình viên phải viết theo hướng OOP tổ chức dưới dạng Class , trong Javascript cũng vậy , các bạn xem xét ví dụ sau.

class Student {
	constructor(code, name, age){
		this.code = code;
		this.name = name;
		this.age  = age;
	}

	showInfo(){
		return this.code + " - " + this.name + " - " + this.getAge();
	}

	getAge(){
		let today = new Date();
		let year  = today.getFullYear();
		return year - this.age;
	}
}

let studentObj = new Student("SV001", "john", 1992);
console.log(studentObj);
console.log(studentObj.showInfo());

III. Tổng kết

• Qua bài viết của tôi hi vọng giúp các bạn phần nào phần nào hiểu những điểm mới trong ES6 ( Template String , Arrow Funtion ) , vận dụng lập trình hướng đối tượng để làm sản phẩm thay vì chúng ta hay viết theo lập trình dưới dạng function . Hơn nữa khi tiếp với Angular hay React chúng ta không khỏi bỡ ngỡ với cách viết lập trình hướng đối tượng.