Các điểm nhấn trong cú pháp của ES6 | Phát triển ứng dụng đa nền tảng - Sharing

Các điểm nhấn trong cú pháp của ES6 | Phát triển ứng dụng đa nền tảng - Sharing

  5/08/2022    trannguyenhan

---

Trong phát triển ứng dụng đa nền tảng các bạn sẽ được đề cập tới 2 framework đa nền tảng mobile nổi tiếng nhất hiện nay đó là React Native và Flutter. Với React Native việc nắm vững Javascript và những cú pháp mới trong ES6 là điều rất cần thiết. Trong bài viết này mình muốn viết về những điểm nhấn trong cú pháp của ES6, bài viết được tham khảo trong chương 4, phần 1.2 của slide bài giảng phát triển ứng dụng đa nền tảng sẽ được chia sẻ ở những bài viết sau trên blog của mình và đã được bổ sung và sửa đổi một số kiến thức cho đầy đủ hơn.

Từ khóa let và const

Trong ES5, chúng ta định nghĩa 1 biến sử dụng từ khóa var, phạm vi của biến khi sử dung var để khai báo sẽ chỉ có 2 trường hợp là global hoặc local. Khi chúng ta định nghĩa biến ngoài một hàm thì nó là biến global, còn khi chúng ta định nghĩa biến ở bên trong hàm thì nó là một biến local.

Trong ES6 giới thiệu cho chúng ta một từ khóa let giúp cho việc khai báo biến chạy trong một block (block ở đây được hiểu như là giới hạn trong 2 dấu "{}")

Ví dụ: 

let x = 10;
if (x == 10) {
    let x = 20;
    console.log(x); // 20:  reference x inside the block
}
console.log(x); // 10: reference at the begining of the script

Chúng ta có thể thấy biến x được khai báo mới trong block if hoàn toàn được khai báo mới chứ không hề liên quan gì tới biến đã được khai báo ở ngoài. Việc này cũng giúp chúng ta tránh nhầm lẫn trong việc sử dụng tên biến hơn và cũng giúp Javascript gần hơn với các ngôn ngữ khác.

ES6 cũng cung cấp một cách định nghĩa hằng số sử dụng const. const keyword dùng để định nghĩa các biến chỉ đọc và tham chiếu tới một giá trị.

Các biến được khai báo bởi từ khóa let là mutable (có thể thay đổi), còn các biến khai báo bởi từ khóa const là immutable (không thể thay đổi).

Vòng lặp for...of

Cú pháp mới for...of giúp lặp một cách dễ dàng hơn trên các đối tượng có thể lặp lại như là: mảng, string, map, set,...

Ví dụ: 

let scores = [80, 90, 70];

for (let score of scores) {
    score = score + 5;
    console.log(score);
}

Template literals

Trước ES6, chúng ta sử dụng dấu ngoặc đơn (') và ngoặc kép (") để biểu thị cho string javascript, và string bị giới hạn rất nhiều chức năng. 

Với template literals chúng ta có thể làm nhiều hơn với một string như là: 

- Khai báo và sử dụng string có thể kéo dài trên nhiều dòng

- Thực hiện nội suy cho phép nhúng các biến hoặc biểu thức vào chuỗi 

- An toàn khi chèn vào các mã HTML

Template literals được đặt trong 2 dấu (``), ví dụ: 

let str = `Template literal in ES6`;

console.log(str);// Template literal in ES6
console.log(str.length); // 23
console.log(typeof str);// string

Arrow Function

Cú pháp mũi tên (=>), đây như là một cách viết gọn hàm lại. Ví dụ với một hàm bình thường như sau: 

let add = function (x, y) {
	return x + y;
};
console.log(add(10, 20)); // 30

Chúng ta có thể viết gọn lại với cú pháp của arrow function như sau: 

let add = (x, y) => x + y;
console.log(add(10, 20)); // 30;

Một số trường hợp chúng ta có thể viết gọn lại hơn nữa arrow function, khi danh sách tham số chỉ có 1, chúng ta có thể bỏ qua dấu ngoặc đơn: 

(singleParam) => { statements }
singleParam => { statements }

Tuy nhiên nếu hàm không có tham số thì cặp dấu ngoặc đơn là bắt buộc sử dụng: 

() => { statements }

Nếu chỉ có một biểu thức trong nội dung của arrow function thì chúng ta có thể bỏ qua dấu ngoặc nhọn: 

let square = x => x * x;

Giá trị mặc định cho tham số

Ví dụ: 

function say(message='Hi') {
    console.log(message);
}

say(); // 'Hi'
say('Hello') // 'Hello'

Xây dựng các Class

Trước ES6, Javascript không có khái niệm về class, mà để bắt chước một class thì chúng ta có thể sử dụng constructor/prototype pattern. 

Ở ES6, khái niệm class đã được giới thiệu và đây chắc chắn là những tin vui cho những ai fan của hướng đối tượng: 

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

Module

- Mỗi module được biểu diễn bằng một thẻ .js riêng biệt 

- Lệnh import hoặc export trong một module để xuất hoặc nhập các biến, hàm, class hoặc bất cứ một thực thể nào đến từ một module hoặc tệp khác

Ví dụ, tạo một file message.js có nội dung như sau: 

export let message = 'ES6 Modules';

Để sử dụng biến message trong một file khác, chúng ta có thể sử dụng cú pháp import như sau: 

import { message } from './message.js'

Rest Parameters

- Truyền vào lượng tham số tùy ý cho hàm dưới dạng mảng

- Thêm vào phía trước tham số toán từ ... (dấu ba chấm)

function sortNumbers(...numbers) {
    return numbers.sort();
}
console.log(sortNumbers(3, 5, 7));
console.log(sortNumbers(3, 5, 7, 1, 0));

Toán tử Spread

Toán tử spread (tức là chia nhỏ) một mảng và chuyển các giá trị vào hàm được chỉ định.

const odd = [1,3,5];
const combined = [2,4,6, ...odd];
console.log(combined);

// => output: [ 2, 4, 6, 1, 3, 5 ]

function f(a, b, ...args) {
	console.log(args);
}

f(1, 2, 3, 4, 5);

// => output: [ 3, 4, 5 ]

Phép gán hủy cấu trúc

Biểu thức giúp dễ dàng trích xuất các giá trị từ mảng hoặc thuộc tính từ các đối tượng, thành các biến riêng biệt bằng cách cung cấp một cú pháp ngắn gọn.

let colors = ["Xanh", "Đỏ"];
let [a, b] = colors;

Tham khảo: https://www.javascripttutorial.net/es6/

Read More