Những tính năng nên biết về ES6 khi học React Native

Xin chào các bạn!

Hôm nay mình xin giới thiệu một số tăng năng của ES6 để chúng ta nắm được khi học ES6.

ES6 là gì? ES6 là chữ viết tắt của ECMAScript 6, đây được coi là một tập hợp các kỹ thuật nâng cao của Javascript và là phiên bản mới nhất của chuẩn ECMAScript.

ECMAScript 6 (hay còn được gọi là ES6, ES2015) là phiên bản mới nhất của chuẩn ECMAScript. Chuẩn này được phê duyệt vào tháng 6/2015. Nó là một bản nâng cấp quan trọng cho ES kể từ ES5 đã được chuẩn hoá vào năm 2009.

1. Templade Literals: Nó cho phép chúng ta sử dụng multi-line string, sử dụng biến, biểu thức, hàm bên trong string mà không phải thông qua phép cộng string.

let name1 = 'Điệp';
let name2 = 'Bắp';
let num1  = 2;
let num2  = 3
const fullname = `Tên bạn là : ${num1 +num2} ${name1} ${name2}`;
console.log(fullname);

Kết quả trả ra Tên bạn là : 5 Điệp Bắp

2. Destructuring objects. Tách các phần tử của  Object thành nhiều biến chỉ bằng một đoạn code duy nhất.

const per = {
  firstName : 'Điệp',
  lastName  : 'Bắp',
  city      : 'HN',
};
const { firstName : fn, lastName: ln } = per;

console.log(`${fn} ${ln}`);

Kết quả trả ra: Điệp Bắp​

3. Array: Nó tách các phần tử của mảng thành các key tương ứng.

let [key1,key2] = ['Điệp Bắp','Học ES6','haha'];
  
  console.log(`${key1} ${key2}`);

Kết quả trả ra: Điệp Bắp Học ES6

4. Rest Parameters: Cho phép chúng ta biểu diễn một số đối số không xác định như một mảng. Chúng ta sẽ dùng cú pháp ...

function add(...nums){
  //console.log(arguments);
  console.log(nums);
}
add(4,5,7,8,12);

Kết quả trả ra: [ 4, 5, 7, 8, 12 ]​

Lưu ý: nếu chúng ta muôn viết biên trong function thì chúng ta phải viết đằng trước

VD 

function add(a,b,...nums){

5. Arrow functions:  Nó dùng cú pháp toán tử => để thể hiện cho kiểu viết function như trước: 

function add(...nums){
  let total = nums.reduce((x,y) => x + y);
  console.log(total);
}
add(4,5,7,8,12);

Kết quả trả ra: 36 

6. Default params: Cho phép khai báo giá trị mặc định cho biến trong function.

function add(numArray = []) {
  let total = 0;
  numArray.forEach((element) =>{
    total += element;
  });
  console.log(total);
}
add();