Jav es6

Cú pháp ES6 hay còn được gọi là ES2015 đều là những tiêu chuẩn chung để nói về cú pháp mới trong JavaScript, kể cả sau này chúng ta cũng có thể gặp ES7 [đã ra mắt 2016] và ES8 nữa đừng lo. Ngoài những cú pháp mới Hỗ trợ lập trình viên tận răng sức mạnh từ JavaScript, những cú pháp cũ của chúng ta cũng sẽ được thay đổi và nâng cấp theo tiêu chuẩn mới. Giúp mã nguồn chúng ta dễ đọc và dễ quản lý hơn

Sơ lược về bài viết

Trong bài viết này chúng ta sẽ tìm hiểu qua các chủ đề sau

1. Cú pháp khởi tạo biến [Variable] hoặc hằng số [Constant]
2. Tìm hiểu nội suy string [String Interpolation]
3. Tìm hiểu về các giá trị mặc định [Default Values] của các tham số [Parameters] trong hàm [Function]
4. Tìm hiểu về Arrow Function và cách viết tắt của Arrow Function

Cú pháp khởi tạo biến hoặc hằng số

Trong cú pháp ES6, các bạn có thể sử dụng từ khóa let và const để định nghĩa 1 biến hay hằng số. Những vấn đề này có lẽ các bạn đã từng khá quen thuộc nếu như đã từng học qua lập trình ở các ngôn ngữ khác rồi.

// Cú pháp khởi tạo biến và hằng số
let numVar = 1;
let stringVar = 'Hello World!!!';
// numVar += 1; ==> numVar === 2

const numConst = 1;
const stringConst = 'Hello World!!!';
// numConst += 1; ==> error

Ở đoạn mã trên cho các bạn thấy rằng, cách thức sử dụng let   hoàn toàn không có gì khác so với cách chúng ta sử dụng . Vì thế các bạn nên sử dụng var  cả. Vì thế các bạn nên sử dụng let   thay vì var   trong mã nguồn .

Contents string

Trước đây để có thể nối các chuỗi ở các biến trở lại với nhau, ta thường sử dụng phép cộng [ +  ] để cộng các ảo . Thì với cú pháp ES6 này, việc sử dụng biến hay hằng số trực tiếp trong chuỗi giúp đơn giản hóa việc chúng ta gõ và code nhìn sạch sẽ hơn rất nhiều.

// Nội suy chuỗi [String Interpolation]
let stringVar = 'Hello World!!!';
console.log[`Nội suy chuỗi: ${stringVar}`]; // ==> "Nội suy chuỗi: Hello World!!!"

function stringInterpolation[] {
  return 'stringInterpolation đã được gọi!!!';
}
console.log[`Nội suy chuỗi: ${stringInterpolation[]}`];

Bạn có thấy đấy để có thể suy diễn một biến nội dung nào đó bên trong rất dễ dàng không? . ${}này.

Tìm hiểu về giá trị mặc định của các tham số trong hàm

Trước đây, để bạn có thể định nghĩa được các tham số mặc định khi truyền vào thì cách truyền hệ thống sẽ như thế này

function originalDefaultValues[a, b] {
     a = a || 1; // Nếu có giá trị và không rỗng hoặc sai[false] thì set là a, nếu không sẽ là 1
     b = b || 2; // Tương tự như trên
}

Và với cú pháp mới, Javascript đã cho phép chúng ta viết dễ dàng hơn hẳn

// Các giá trị mặc định của các tham số trong Function
function defaultParams[a = 1, b = 2] {
  console.log[`Giá trị mặc định: ${a} - ${b}`];
}
defaultParams[];

Tìm hiểu về Arrow Function và cách viết tắt của Arrow Function

Arrow Function hay còn gọi là hàm mũi tên, nhưng mà tốt nhất thì các bạn đừng dịch ra vì nghe nó rất "củ chuối". Nó thừa hưởng cách viết rút gọn bằng cú pháp ES6 nhưng bên trong nó sẽ có nhiều điểm khác biệt so với hàm thông thường mà chúng ta đã biết.

// Function thông thường
function regularFunc[] {
  this.hello = 'Hello Regular Function';
  console.log['regularFunc: ' + this.hello];
}
regularFunc[];

// Anonymous Function
let anonymousFunc = function[] {
  this.hello = 'Hello Anonymous Function';
  console.log['anonymousFunc: ' + this.hello];
}
anonymousFunc[];

// Arrow Function
let arrowFunc = [] => {
  // this ở đây sẽ không hiểu nếu bạn dùng 'use strict' ở Javascript hoặc khi dùng Babel
  this.hello = 'Hello Arrow Function';
  console.log['arrowFunc: ' + this.hello];
}
arrowFunc[];

// Một số cách viết tắt trong Arrow Function
let full = [a = 1 , b = 2] => {
  return a + b;
}
full[]; // full === 3
let one = a => a; one[5]; // one === 5
let two = [a, b] => a + b; two[1, 2] // two === 3

Qua đoạn mã trên thì các bạn cũng sẽ được thấy 2 cách thông dụng nhất từ ​​trước đến nay là Hàm thông thường và cách sử dụng Hàm ẩn danh [Hàm vô danh - một cách khởi động hàm khác của hàm thông thường] để khởi tạo hàm

Ngoài ra, các bạn còn được hỗ trợ thêm cho công việc "lười biếng" với cách viết tắt không kém phần khó hiểu khi sử dụng ban đầu. Vậy đâu là sự khác biệt giữa Hàm thông thường và Hàm mũi tên ???

Học Web Chuẩn sẽ giới thiệu với các bạn một số thay đổi của ES6 gần đây. Sẽ giúp bạn hiểu rõ hơn khi bắt đầu học các thư viện hay JS Frameworks hiện hành

Nội dung chính Hiển thị

• 1. ECMAScript ES6 là gì?
• 2. Các chức năng mới của ES6
• 3. chức năng mũi tên
• 4. khối phạm vi
• 5. Ba-bên. js

Đây là phần nâng cao của Javascript, do đó để tránh mất thời gian, Học Web Chuẩn sẽ mặc định các bạn đã biết một số khái niệm về Javascript rồi nhé, sẽ tập trung vô nội dung mới của ES6 thôi

• ES6 là gì?
• ES6 - biến phân biệt var - let - const
• ES6 - tham số mặc định cách khai báo tham số mặc định
• ES6 - cú pháp trải rộng sử dụng cú pháp "lây lan"
• ES6 - rest parameters khai báo và sử dụng các tham số còn lại
• ES6 - hủy tùy chọn giá trị mảng hoặc đối tượng
• ES6 - arrow function cách viết function mới theo tên mũi tên
• ES6 - cấu trúc lớp và cách sử dụng
• ES6 - xuất & nhập xuất và lồng các tệp Javascript

var functionName = [var1, var2] => {
    // Nội dung function
};

var hello = [] => {
  console.log['Hello Bạn'];
};
hello[];

    for [let i = 0; i