Lời Giới Thiệu

Bạn có cảm thấy nhàm chán khi code Javascript mỗi ngày? Bài viết này sẽ giúp bạn thổi một luồng gió mới vào hành trình code Javascript của mình bằng cách khám phá 25 tính năng độc đáo ít người biết đến. Hãy cùng nhau lặn sâu vào thế giới Javascript để nâng tầm kỹ năng và tạo ra những ứng dụng web hiệu quả, thanh lịch và mạnh mẽ hơn bao giờ hết. Chuẩn bị tinh thần để khám phá những điều thú vị mà Javascript có thể làm được nhé!

Nhãn Cho Câu Lệnh Vòng Lặp Và Khối Lệnh

Bạn có muốn kiểm soát luồng thực thi trong vòng lặp một cách linh hoạt hơn? Javascript cho phép bạn đặt nhãn cho vòng lặp và khối lệnh, kết hợp với break và continue để tạo ra những logic phức tạp.

outerLoop: for (let i = 0; i  5; i++) {   innerLoop: for (let j = 0; j  5; j++) {     if (i === 2 && j === 2) break outerLoop;     console.log(`i=${i}, j=${j}`);   } }

Toán Tử Comma

Thay vì viết nhiều dòng, bạn có thể sử dụng toán tử comma để thực hiện nhiều biểu thức trên cùng một dòng và nhận kết quả của biểu thức cuối cùng.

let a = (1, 2, 3); // a = 3

Tagged Templates Literals: Không Chỉ Là String

Template literals không chỉ dùng để tạo chuỗi đơn giản. Khi được gắn nhãn, chúng có thể được sử dụng cho DSLs, xử lý input, hoặc bản địa hóa.

function htmlEscape(strings, ...values) {   // Example implementation }

Khai Báo Hàm Bên Trong Khối Lệnh

Mặc dù không được khuyến khích nhưng Javascript cho phép bạn khai báo hàm bên trong các khối lệnh. Điều này có thể dẫn đến những hành vi khác nhau trong chế độ không nghiêm ngặt.

if (true) {   function test() { return "Yes"; } } else {   function test() { return "No"; } }  test(); // Hành vi phụ thuộc vào môi trường

Toán Tử Void

Muốn trả về giá trị undefined sau khi thực thi một biểu thức? Toán tử void chính là thứ bạn cần, đặc biệt hữu ích khi làm việc với siêu liên kết Javascript.

void (0); // returns undefined

Toán Tử Bitwise: Tốc Độ Cho Số Học

Tăng tốc độ tính toán số học bằng cách sử dụng toán tử bitwise như | và &. Tuy nhiên, hãy đảm bảo mã của bạn vẫn dễ đọc nhé.

let floor = 5.95 | 0; // Cách nhanh chóng để làm Math.floor(5.95)

Câu Lệnh With: Phạm Vi Mở Rộng Cho Đối Tượng

Câu lệnh with mở rộng phạm vi cho một khối mã, giúp bạn viết mã ngắn gọn hơn. Tuy nhiên, hãy cẩn trọng vì nó có thể gây khó hiểu và ảnh hưởng đến hiệu suất.

with(document.getElementById("myDiv").style) {   background = "black";   color = "white"; }

Chèn Dấu Chấm Phẩy Tự Động (ASI)

Javascript cố gắng sửa lỗi thiếu dấu chấm phẩy, nhưng đừng quá phụ thuộc vào nó vì có thể dẫn đến kết quả không mong muốn.

let x = 1 let y = 2 [x, y] = [y, x] // Thiếu dấu chấm phẩy có thể gây lỗi

Toán Tử In: Kiểm Tra Thuộc Tính

Bạn muốn biết một đối tượng có một thuộc tính nào đó hay không mà không cần truy cập vào giá trị của nó? Toán tử in sẽ giúp bạn.

"toString" in {}; // true

Instanceof và Typeof: Phân Biệt Kiểu Dữ Liệu

Instanceof kiểm tra chuỗi nguyên mẫu, trong khi typeof cho biết kiểu dữ liệu của một biểu thức.

function Person() {} let person = new Person(); console.log(person instanceof Person); // true console.log(typeof person); // "object"

Hàm Cấp Khối Trong ES6

ES6 cho phép khai báo hàm có phạm vi khối, tương tự như let và const.

{   function test() {     return "block scoped";   } }  console.log(typeof test); // "function" trong chế độ không nghiêm ngặt, "undefined" trong chế độ nghiêm ngặt

Câu Lệnh Debugger: Dừng Và Gỡ Lỗi

Sử dụng debugger để tạm dừng thực thi mã và mở trình gỡ lỗi.

function problematicFunction() {   debugger; // Dừng thực thi tại đây nếu trình gỡ lỗi đang mở }

Hàm Eval(): Thực Thi Mã Động

eval() thực thi một chuỗi như mã Javascript nhưng tiềm ẩn rủi ro về bảo mật và hiệu suất.

eval("let a = 1; console.log(a);"); // 1

Thuộc Tính Proto Không Chuẩn

Mặc dù __proto__ được hỗ trợ rộng rãi để thiết lập nguyên mẫu của đối tượng, nhưng nó không phải là chuẩn. Hãy sử dụng Object.getPrototypeOf() và Object.setPrototypeOf().

let obj = {}; obj.__proto__ = Array.prototype; // Không khuyến khích

Hàm Document.write(): Ghi Trực Tiếp Vào HTML

document.write() ghi trực tiếp vào tài liệu HTML, nhưng có thể gây ra những tác động tiêu cực, đặc biệt khi tải các kịch bản bên ngoài đồng bộ.

document.write("
Hello World!
");

Gán Chuỗi Được Nối Lại

Javascript cho phép gán một giá trị cho nhiều biến cùng lúc trong một câu lệnh.

let a, b, c; a = b = c = 5; // Gán giá trị 5 cho cả ba biến

Bí Danh Thuộc Tính Đối Tượng

Khi gán thuộc tính cho đối tượng, bạn có thể sử dụng bí danh nếu tên thuộc tính trùng với tên biến.

const name = 'Alice'; const age = 25; const person = { name, age };

Giá Trị Mặc Định Tham Số Và Phân Rã

Kết hợp giá trị mặc định của tham số với kỹ thuật phân rã để tạo ra các hàm dễ đọc và linh hoạt hơn.

function createPerson({ name = 'Anonymous', age = 0 } = {}) {   console.log(`Name: ${name}, Age: ${age}`); }  createPerson({ name: 'Alice' }); // Name: Alice, Age: 0 createPerson(); // Name: Anonymous, Age: 0

Array.fill(): Khởi Tạo Mảng Nhanh Chóng

Khởi tạo mảng với một giá trị cụ thể một cách nhanh chóng bằng fill().

const initialArray = new Array(5).fill(0); // Tạo mảng [0, 0, 0, 0, 0]

Array.includes(): Kiểm Tra Phần Tử Trong Mảng

Kiểm tra sự tồn tại của một phần tử trong mảng dễ dàng hơn với includes() so với indexOf().

const fruits = ['apple', 'banana', 'mango']; console.log(fruits.includes('banana')); // true

Phân Rã Aliases: Đặt Tên Mới Cho Thuộc Tính

Khi phân rã đối tượng, bạn có thể đặt tên mới cho các thuộc tính bằng cách sử dụng bí danh.

const obj = { x: 1, y: 2 }; const { x: newX, y: newY } = obj; console.log(newX); // 1

Nullish Coalescing Operator: Giá Trị Mặc Định Đặc Biệt

?? chỉ cung cấp giá trị mặc định khi gặp null hoặc undefined, không áp dụng cho các giá trị falsy khác.

const count = 0; console.log(count ?? 10); // 0, bởi vì count không phải là null hoặc undefined

Tên Hàm Động: Linh Hoạt Và Uyển Chuyển

Tạo hàm với tên động bằng cách sử dụng tên thuộc tính được tính toán trong các ký tự đối tượng.

const dynamicName = 'func'; const obj = {   [dynamicName]() {     return 'Dynamic Function Name!';   } };  console.log(obj.func()); // "Dynamic Function Name!"

Trường Lớp Riêng Tư: Bảo Vệ Dữ Liệu

Sử dụng tiền tố # để khai báo trường riêng tư trong lớp, không thể truy cập từ bên ngoài.

class Counter {   #count = 0;    increment() {     this.#count++;   }    getCount() {     return this.#count;   } }

Kết Luận

Mỗi tính năng được đề cập ở trên là một công cụ hữu ích giúp bạn giải quyết các vấn đề lập trình một cách sáng tạo và hiệu quả hơn. Hãy không ngừng khám phá và áp dụng những tính năng này vào dự án thực tế để nâng cao kỹ năng Javascript của bạn.