ES: ECMAScript là các đặc tả ngôn ngữ kịch bản.
mô tả chi tiết các chức năng cho các phiên bản cập nhật
ECMAScript là tiêu chuẩn còn Javascript là ngôn ngữ lập trình. Phiên bản mới nhất là ES7.
### const và let
- const không thể gán giá trị mới cho biến sau khi khai báo.
- let có thể gán giá trị mới cho biến sau khi khai báo.
let foo = 2;
foo =3; // ok
const baz = 2;
baz = 3; // error
### 1. Phạm vi của 1 biến
Trong ES5, khi bạn khai báo một biến bằng từ khóa `var`, phạm vi của biến là toàn cục.
ES6 cung cấp một cách mới để khai báo một biến bằng cách sử dụng từ khóa `let`.
Từ khóa `let` tương tự như từ khóa var, ngoại trừ các biến mà nó khai báo là phạm vi khối:
let variable_name;
// Trong JavaScript, các khối được biểu thị bằng dấu ngoặc nhọn {},
// ví dụ: if else, for, do while, while, try catch ...
let x = 10;
if (x == 10) {
let x = 20; // biến x này sẽ bị phá hủy sau khi câu lệnh if được thực thi xong
console.log(x); // output: 20 - reference x inside the lbock
}
console.log(x); // output:10 - reference at the begining of the script
--------let vs var
var a = 10;
console.log(window.a); // 10
let b = 20;
console.log(window.b); // undefined
---------let and callback function in a for loop
for (var i = 0; i < 5; i++) {
setTimeout(function () { console.log(i); }, 1000);
}
==> output: 5.
// Vì giá trị của biến i bên trong hàm callback
// luôn là giá trị cuối cùng của i trong vòng lặp.
for (let i = 0; i < 5; i++) {
setTimeout(function () { console.log(i); }, 1000);
}
==> output: 0,1,2,3,4,5.
--------tối ưu bộ nhớ dùng để chứa thông tin và giá trị của biến
var a= 12;
var b= 20;
if (a < b) {
let tmp = a;
a = b;
b= tmp;
}
==> Bộ nhớ được dành cho biến tmp sẽ được trả lại sau khi thực hiện xong biểu thức IF.
### 2. Arrow Function
Có 2 cách để tạo function theo các phiên bản cũ:
// cách 1: function <function_name> (var1, var2,...) {}
// cách 2: sử dụng closure. var <function_name> = function(var1, var2,...) {}
theo ES6 trở về sau ta có thêm cách 3:
var <function_name> = (var1, var2,...) => {}
Ví dụ:
var hello
= (firstname, lastname) => { console.log("Hello, " + firstname + " " + lastname); };
hello("t", "v");
--------- nếu bên trong function chỉ có 1 câu lệnh duy nhất
var hello
= (firstname, lastname) => console.log("Hello, " + firstname + " " + lastname);
--------- trường hợp chỉ có 1 tham số truyền vào
var hello = nickname => { console.log(nickname); };
--------- trường hợp không có tham số
var hello = () => { console.log("Hi there,"); };
Ràng buộc mũi tên.
`=>` phải nằm chung 1 dòng với `)`.
var hello = ()
=> { console.log("Hi there,"); }; // SAI
### 3: Destructuring Assignments in ES6
Tính năng này khá giống với hàm list trong PHP nhé!
Nghĩa là nó sẽ phân các giá trị trong mảng vào các biến theo thứ tự hay nói cách khác nó sẽ
Tách các phần tử của Array hoặc Object thành nhiều biến chỉ bằng một đoạn code duy nhất.
let date = [10, 3, 2918];
let [d, m, y] = date;
Nếu bạn muốn lấy một phần tử thôi thì hãy bỏ trống các phần tử không muốn lấy:
let [, , y] = date;
--------Object
let date = {
day: 10,
month: 6,
year: 2016
};
let {day: d, month: m, year: y} = date;
------- trường hợp element của đối tượng lấy không tồn tại
let name = ['tcs'];
let [my_name, email='xdasd@gmail.com'] = name;
--------Easily swap variables
person1 = 'Jeff'
person2 = 'Susan'
[person1, person2] = [person2, person1]
--------Automatically destructure information returned from a function
function twoOperations(num) { return [num*2, num/2] }
const [timesTwo, divideTwo] = twoOperations(5)
------- Destructure as you pass an object into a function
const fullName = ({first, last}) => `${first} ${last}`
fullName({first: 'Amber', last: 'Wilkie'})
const fullName = ({first, last = 'Anonymous'}) => first + ' ' + last
fullName({first: 'Amber'})
--------Gom nhiều mảng
const jewelry = ['ring', 'necklace']
const electronics = ['tv', 'ipad']
const valuables = [...jewelry, ...electronics]
// valuables == ['ring', 'necklace', 'tv', 'ipad']
### 4: Default Parameters in ES6
Thiết lập giá trị mặc định trong javascript.
Trong ES5 để tạo giá trị mặc định thì bạn sử dụng cặp dấu
|| để thiết lập ngay bên trong thân của hàm.
function sayHello(name) {
name = "Hi " + name || "Hi there";
return name;
}
sayHello(); // Hi there
sayHello("tc"); // Hi tc
Trong ES6 có cách khai báo giá trị mặc định đơn giản hơn rất nhiều,
cách này cũng tương tự như khai báo trong PHP
đó là sử dụng phép gán ngay tại vị trí khai báo tham số cho function
function sayHello(name = 'tc') {
name = "Hi " + name;
return name;
}
### 5: Rest Parameters in ES6
Tham số còn lại,
điều này có nghĩa là bạn có thể khai báo một hàm với số lượng tham số không xác định,
đây là một tính năng mới khiến Javascript ngày càng trở nên mạnh mẽ hơn.
let domainList = (main, sub, ...other) => {
console.log("Main: " + main);
console.log("Sub: " + sub);
console.log("Other");
console.log(other);
}
// Gọi hàm
domainList("google.com", "facebook.com", "freetuts.net", "ipho.com");
==> Kết quả:
Main: google.com
Sub: facebook.com
Other
["freetuts.net", "ipho.com"]
### 6. Template Literals in ES6
var first = "Tran Van";
var last = "My";
var name = `Ten cua minh la: ${first} ${last}.`;
### 7. Multi-line String in ES6
var content = `Toi ten la tcy,
La mot developer cua cong ty Framgia,
Ad: 13F Keangnam Landmark 72 Tower, Plot E6, Pham Hung Road, Nam Tu Liem District,
So thich la: code, xem anime, va ngu`;
console.log(content);
### 8. Enhanced Object Literals in ES6
Ví dụ với ES5:
function createSinger (name, age, address, salary) {
var singer = {};
singer['salaryOf' + name] : salary;
return singer;
}
Tương đương với code ES6
function createSinger (name, age, address, salary) {
return {
['salaryOf' + name] : salary,
}
}
### 9. Promises in ES6
$('img').ready().then(function() {
// loaded
}, function() { // call back when loading image is fail
// failed
$(this).attr('src', 'default.png');
});
Promise là một gói dùng để quản lý kết quả trả về của một hành động Asycn (bất đồng bộ)
và nó vừa được bổ sung vào ngôn ngữ Javascript từ version ES6.
var promise = new Promise(function(resolve, reject) {
// do st
if (rs == true) resolve('Success!');
else reject('Error!');
});
promise.then(
function(success){
console.log(success);
},
function(error){
console.log(error);
}
);
-----------bắt lỗi với catch
let promise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("Whoops!")), 1000);
});
// .catch(f) is the same as promise.then(null, f)
promise.catch(alert); // shows "Error: Whoops!" after 1 second
-----------xử lý dù cho thành công hay thất bại với finally
// Success
new Promise((resolve, reject) => {
setTimeout(() => resolve("result"), 2000)
})
.finally(() => alert("Promise ready"))
.then(result => alert(result)); // <-- .then handles the result
// Failed
new Promise((resolve, reject) => {
throw new Error("error");
})
.finally(() => alert("Promise ready"))
.catch(err => alert(err)); // <-- .catch handles the error object
### 10. Loops
`for / of` có cấu trúc tương tự như `for / in`
nhưng for-in sẽ đọc các key của array và for-of sẽ đọc các value của array đó.
const cities = ['Gbg', 'Stockholm', 'Oslo'];
for (const city in cities) {
console.log(city);
}
// ==> Output: 0 | 1 | 2
for (const city of cities) {
console.log(city);
}
//==> Output: Gbg | Stockholm | Oslo
### 11. Array methods
`Array.from()`: là phương thức cho phép chúng ta lấy một vài object
và tạo một mảng mới từ đó.
const listItems = document.querySelectorAll('li')
Array.from(listItems)
`Array.of()`: là phương thức cho phép chúng ta tạo các mảng từ các giá trị
mà bạn chỉ định như là các arguments.
Array.of('Chocolate', listItems, 135)
=> ["Chocolate", NodeList(91), 135]
`array.find()` là một phương thức sẽ chỉ tìm phần tử đầu tiên thỏa mãn điều kiện
thực hiện callback function.
const array = [1, 2, 3]
array.find( num => num % 2 == 0 )
`array.findIndex()` chúng ta có thể dùng phương thức này để lấy ra chỉ mục.
Trong trường hợp ko có phần tử nào của mảng thỏa mãn điều kiện thì .findIndex()
sẽ trả về giá trị là -1
### 12. Classes
Ví dụ 1:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area);
Ví dụ 2:
class Circle extends Shape {
//Constructor
constructor(address) {
console.log(address)
}
//Methods
getArea () {
return Math.PI * 2 * this.radius
}
//Calling superclass methods
expand (n) {
return super.expand(n) * Math.PI
}
//Static methods
static buildingMaterials() {
return [ 'wood', 'brick', 'plaster', 'stone']
}
}
class Apartment extends House {
constructor(tenants) {
super(); // gọi constructor của class cha
this.tenants = tenants;
}
}
------------- get and set
class House {
constructor(address) {
this.address = address
}
set (windows, number) {
return this[windows*2] = number;
}
get (windows) {
return this[windows/2]
}
}
Không có nhận xét nào:
Đăng nhận xét