ES5-ES6 TRONG JAVASCRIPT

I – ES5
ECMAScript 5 còn được gọi là ES5 hay ECMAScript 2009. Đây là những tính năng, cải tiến
và bổ sung quan trọng cho Javascript. Những cải tiến này chủ yếu hướng tới việc viết code theo
chuẩn ES5 giúp code Javascript chặt chẽ và sạch sẽ hơn trước, đâu đó nó cũng giúp chúng ta xử lý
các công việc rườm rà trước kia một cách nhanh và gọn gàng hơn.
1. String.trim()
Hàm trim() loại bỏ khoảng trắng đầu và cuối một chuỗi truyền vào.
Code JS:

var str = ' Vietpro Academy ';

str.trim();

document.write(str);

2. Array.isArray()
Cú pháp kiểm tra dữ liệu truyền vào có phải là một mảng hay không, giá trị trả về sẽ là
true hoặc false
Code JS:

var arr = ['Bootstrap', 'jQuery', 'Laravel'];

if(Array.isArray(arr)){
document.write(arr);
}

3. Array.forEach()
Cú pháp duyệt qua tất cả các phần tử của một mảng bằng cách nhận vào một callback
function, tham số truyền vào callback function sẽ nhận giá trị của phần tử mảng sau mỗi lần duyệt
qua chính phần tử đó.
Code JS:

var arr = ['Bootstrap', 'jQuery', 'Laravel'];

arr.forEach(function(value){

document.write(value+',');
});
4. Array.map()
Cú pháp cho phép duyệt qua từng phần tử của mảng để chỉnh sửa lại giá trị chủa chính
phần tử đó trong mang rồi tạo ra một mảng mới có số lượng phận tử tương ứng nhưng có giá trị
mới đã được chỉnh sửa
Code JS:

var arr = ['Bootstrap', 'jQuery', 'Laravel'];

var new_arr = arr.map(function(value, index, array){

return 'Vietpro '+value;

});
document.write(new_arr);

Trong đó :

 Value: giá trị củ a phầ n tử qua mỗ i lầ n quyệt qua

 Index: vị trí củ a phầ n tử qua mỗ i lầ n duyệt qua
 Array: mả ng ban đầ u đang đượ c duyệt qua

5. Array.filter()
Cú pháp duyệt qua một mảng và tìm ra những phần tử có giá trị thỏa mãn một tiêu chí
nào đó, kết quả trả về sẽ là một mảng lưu trữ tất cả các giá trị của các phần tử thỏa mãn tiêu chí
tìm kiếm
Code JS:

var arr = [1,3,5,7,9];

var result = arr.filter(function(value, index, array){

return value > 5;

});
document.write(result);

Trong đó :

 Value: giá trị củ a phầ n tử qua mỗ i lầ n quyệt qua

 Index: vị trí củ a phầ n tử qua mỗ i lầ n duyệt qua
 Array: mả ng ban đầ u đang đượ c duyệt qua

6. Array.reduce()
 Cú pháp cho phép duyệt qua tất cả các phần tử của mảng, đồng thời tạo ra một tham số để
lưu trữ kết quả tính toán được qua mỗi lần duyệt qua phần tử mảng.
Code JS:

var arr = [1,3,5,7,9];

var result = arr.reduce(function(total, value){

return total + value;

});
document.write(result);

Trong đó :

 Toal: tham số đượ c trả về cho result

 Value: giá trị củ a phầ n tử qua mỗ i lầ n quyệt qua

7. Array.reduceRight()
Cú pháp cho phép duyệt qua tất cả các phần tử của mảng, đồng thời tạo ra một tham số để
lưu trữ kết quả tính toán được qua mỗi lần duyệt qua phần tử mảng.
Code JS:

var arr = [1,3,5,7,9];

var result = arr.reduceRight(function(total, value){

return total + value;

});
document.write(result);

Trong đó :

 Toal: tham số đượ c trả về cho result

 Value: giá trị củ a phầ n tử qua mỗ i lầ n quyệt qua

8. Array.every()
Cú pháp duyệt qua tất cả các phần tử của mảng và kiểm tra xem giá trị của tất cả các
phần tử đó phải đồng thời thỏa mãn một hoặc nhiều tiêu chí bất kỳ, kết quả trả về là true nếu tất
cả cùng thỏa mãn, ngược lại trả về false khi chỉ cần một phần tử nào đó không thỏa mãn.
Code JS:
 var arr = [1,3,5,7,9];

var result = arr.every(function(value, index, array){

return value > 0;

});
document.write(result);

Trong đó :

 Value: giá trị củ a phầ n tử qua mỗ i lầ n quyệt qua

 Index: vị trí củ a phầ n tử qua mỗ i lầ n duyệt qua
 Array: mả ng ban đầ u đang đượ c duyệt qua

9. Array.some()
Cú pháp duyệt qua tất cả các phần tử của mảng và kiểm tra xem giá trị của tất cả các
phần tử đó có phần tử nào thỏa mãn một hoặc nhiều tiêu chí bất kỳ, kết quả trả về là true nếu chỉ
cần ít nhất một phần tử thỏa mãn, ngược lại trả về false khi không có bất kỳ phần tử nào thỏa
mãn.
Code JS:

var arr = [1,3,5,7,9];

var result = arr.some(function(value, index, array){

return value > 6;

});
document.write(result);

Trong đó :

 Value: giá trị củ a phầ n tử qua mỗ i lầ n quyệt qua

 Index: vị trí củ a phầ n tử qua mỗ i lầ n duyệt qua
 Array: mả ng ban đầ u đang đượ c duyệt qua

10. Array.indexOf()
indexOf() nhận vào một mảng và giá trị của một phần tử trong mảng, nó sẽ trả về vị trí
của phần tử đó trong mảng
Code JS:

var arr = ['Bootstrap', 'jQuery', 'Laravel'];

var result = arr.indexOf('jQuery');
document.write(result);
11. Array.lastIndexOf()
lastIndexOf() nhận vào một mảng và giá trị của một phần tử trong mảng, nó sẽ trả về vị trí
của phần tử đó xuất hiện lần cuối cùng trong mảng
Code JS:

var arr = ['Bootstrap', 'jQuery', 'Laravel', 'Bootstrap'];

var result = arr.lastIndexOf('jQuery');
document.write(result);

12. JSON.parse()
Cú pháp để chuyển mỗi chuỗi JSON sang đối tượng
Code JS:

var str_json = '{"course":"PHP Fullstack", "time":"06 month"}';

var obj = JSON.parse(str_json);
document.write(obj.course+'<br/>'+obj.time);

13. JSON.stringify()
Cú pháp để chuyển một đối tượng sang chuỗi JSON
Code JS:

var obj = {course:"PHP Fullstack", time:"06 month"};

var str_json = JSON.stringify(obj);
document.write(str_json);

14. Date.now()
Cú pháp lấy ra mốc thời gian tại thời điểm hiện tại
Code JS:

// Cá ch cũ
var d = new Date();
document.write(d.getTime());

// Cá ch mớ i
document.write(Date.now());
II – ES6
ECMAScript 6 còn được gọi là ES6 hay ECMAScript 2015, một số người còn gọi là
Javascript 6. ES6 chủ yếu cung cấp cho chúng ta những tính năng mới để xử lý các công việc trong
Javascript một cách đơn giản và mạnh mẽ hơn.
1. JavaScript let
Let là một từ khóa được sử dụng khi khai báo biến trong Javascript gần giống với var, tuy
nhiên khác với var sẽ tồn tại cả bên ngoài lẫn bên trong block scope { … } thì let chỉ tồn tại bên
trong block scope mà thôi
Code JS:

if(!a || !b){
var a = 50;
let b = 100;
}
document.write(a);
document.write(b);

2. JavaScript const
Const là một từ khóa được sử dụng để khai báo biến có giá trị duy nhất, không đổi trong
Javascript (chính là hằng số). Việc khai báo lại giá trị của biến đó ở bất cứ hình thức nào cũng làm
cho giá trị mới của nó cũng như biến đó không thể sử dụng được.
Code JS:

const a = 3.14
var a = 10;
document.write(a);

3. JavaScript Arrow Functions

Đây là cách thức viết lại cấu trúc của việc khai báo một function giúp cho việc khai báo trở
nên đơn giản hơn và sử dụng hiệu quả hơn trong một số trường hợp nhất định
Code JS:

// ES5
var result = function(a, b){

return value;
}

// ES6
const result = (a, b)=>{
 return value;
}

// ES6 rú t gọ n khi có return

const result = (a, b)=>value

// ES6 rú t gọ n khi chỉ có mộ t tham số và return

const result = a => value

4. JavaScript Classes
Quy tắc để khai báo một lớp (lập trình hướng đối tượng trong Javascript)
Code JS:

class Dog{

constructor(a){

this.name = a;
}
}
dog = new Dog('Milu');
document.write(dog.name);

Trong đó :

 Dog: Tên lớ p mô tả nhữ ng chú chó (đặ t tên tù y ý giố ng vớ i cách đặ t tên biến trong
Javascript, khuyến khích viết hoa các ký tự đầu tiên củ a mỗ i từ )
 Constructor: Hà m khở i tạ o, sẽ tự độ ng chạ y và chạ y đầ u tiên khi mộ t đố i tượ ng đượ c
khở i tạ o từ mộ t lớ p chứ a nó
 Name: tên thuộ c tính mô tả tên củ a chú chó (chính là các biến trong Javascript)
 This: Từ khó a thể hiện chính nó (chính đố i tượ ng đó ), đượ c sử dụ ng khi truy cậ p tớ i
chính các thuộ c tính (biến) hoặ c phương thứ c (hàm) trong chính lớ p đó
Chú ý:

 Từ khó a new đượ c sử dụ ng để khở i tạ o đố i tượ ng từ mộ t lớ p

 Trong quá trình khở i tạ o đố i tượ ng, nếu truyền tham số thì tham số nà y sẽ chạ y và o
constructor

5. Default parameter values

ES6 cho phép bỏ qua tham số mặc định khi truyền giá trị
Code JS:
 function courses(a, b, c='Laravel'){

return a+', '+b+', '+c;

}

document.write(courses('Bootstrap', 'jQuery'));

6. Array.find()
Find() duyệt qua từng phần tử của mảng và trả về giá trị của phần tử thỏa mãn một hay
nhiều tiêu chí nào đó (chú ý là sau khi tìm được phần tử thỏa mã nó sẽ dừng ngay việc duyệt qua
các phần tử khác, cho dù có thể có rất nhiều phần tử tiếp theo cũng thỏa mã)
Code JS:

var arr = [1,3,5,7,9];

var result = arr.find(function(value, index, array){

return value > 5;

});

document.write(result);

7. Array.findIndex()
Cơ chế hoạt động của findindex() tương tự như của find(), tuy nhiên kế quả trả về không
phải là giá trị của phần tử gần nhất thỏa mãn tiêu chí mà là vị trí của phần tử đó
Code JS:

var arr = [1,3,5,7,9];

var result = arr.findIndex(function(value, index, array){

return value > 5;

});

document.write(result);

8. Exponentiation (**)
Trong ES6 xuất hiện toán tử **, nó gần giống như với số mũ trong toán học
Code JS:

// Tính mũ theo cá ch cũ
var a = Math.pow(5, 3);

// Tính mũ theo ES6

 var b = 5**3;
document.write(a+'<br/>'+b);

9. HTML Template String

Template String trong Javascript chính thức xuất hiện từ phiên bản ES6, nó gần giống với
các Template Engine phổ biến trong PHP, giúp việc thao tác với một chuỗi kết quả được dễ dàng
và linh hoạt hơn
Code JS :

<script>
var courses = 'NodeJS + RectJS + MongoDB';
var str = `
<h1>Fullstack JS: ${courses}</h1>
`;

document.write(str);
</script>

10. Promise
a. Xử lý đồ ng bộ (sync)
Xử lý đồng bộ là xử lý theo kiểu đơn luồng, tuần tự code xuất hiện trước sẽ thực thi trước
và chạy xong thì mới thực thi code tiếp theo.
Code JS :

console.log('case 1');
console.log('case 2');
console.log('case 3');

b. Xử lý bấ t độ ng bộ (async)
Xử lý bất đồng bộ là xử lý theo kiểu đa luồng, code được thực thi một cách độc lập, code
nào thực thị xong thì trả về kết quả trước, không phân biệt code thực thi trước và thực thi sau.

console.log('case 1');

setTimeout(()=>{

console.log('case 2');
}, 3000);

console.log('case 3');
c. Promise trong xử lý bấ t đồ ng bộ
Promise là một khái niệm mới trong Javascript, nó chỉ bắt đầu xuất hiện từ phiên bản ES6,
giúp chúng ta thao tác dữ liệu từ xử lý bất đồng bộ (callback function) một cách dễ dàng và linh
hoạt.
Cú phá p sử dụ ng Promise :

// Khở i tạ o mộ t Promise
var promise = new Promise(function(resolve){

resolve('Success');
});
// Lấ y giá trị trả về từ Promise
promise.then(function(resolve){

console.log(resolve);
});

Code JS :

var promise = new Promise((resolve)=>{

setTimeout(()=>{

resolve('case 2');
}, 3000);

});

promise.then((res)=>{

console.log(res);
});