Trang chủ » GIẬT 3 TẦNG QUÀ – IN DẤU TIẾNG ANH

JavaScript – 25 Tính Năng Chưa Từng Được Tiết Lộ Của

Thông thường đối với lập trình viên, chúng tôi viết các loại mã tương tự nhau, rơi vào một khuôn mẫu, mặc dù thoải mái, nhưng đôi khi lại cảm thấy tẻ nhạt.

Tuy nhiên, thế giới của JavaScript rất rộng lớn, chứa đầy các tính năng tiên tiến mà khi được khám phá và sử dụng, có thể biến công việc phát triển của chúng ta thành điều gì đó thú vị và thoả mãn hơn nhiều.

Trong bài viết này, chúng tôi sẽ tiết lộ 25 tính năng JavaScript tiên tiến hứa hẹn không chỉ tiết lộ những viên ngọc ẩn này mà còn nâng cao khả năng thành thạo JavaScript của bạn lên mức chưa từng có.

Hãy cùng nhau khám phá, tích hợp các khả năng tiên tiến của JavaScript vào bộ sưu tập mã của chúng ta để tạo ra các ứng dụng hiệu quả, trang nhã và mạnh mẽ hơn. Đã đến lúc thổi một luồng không khí mới vào công việc lập trình của chúng ta cùng một cảm giác mới lạ về niềm vui và sự sáng tạo.

Danh mục nội dung

Nhãn cho câu lệnh vòng lặp và chặn (Loop and Block)

Trong JavaScript, bạn có thể đặt nhãn cho các vòng lặp và các câu lệnh khối, cho phép kiểm soát chính xác với các câu lệnh break và continue.

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

Toán tử comma cho phép đánh giá nhiều biểu thức theo một chuỗi, trả về kết quả của biểu thức cuối cùng.

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

Tagged Templates Literals: Vượt Qua Định Dạng Strings

Ngoài việc tạo ra các string, các template literals được gắn nhãn có thể được sử dụng cho các Ngôn ngữ Đặc biệt của Miền (DSLs), làm sạch đầu vào người dùng, hoặc địa phương hóa.

function htmlEscape(strings, …values) {

// Example implementation

}

Khai báo hàm bên trong các khối

Mặc dù không được khuyến khích nhưg JavaScript cho phép khai báo hàm bên trong các khối, điều này có thể dẫn đến các 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(); // Behavior varies depending on the environment

Toán tử void

Toán tử void đánh giá bất kỳ biểu thức nào và sau đó trả về giá trị không xác định, hữu ích cho các siêu liên kết với JavaScript.

void (0); // returns undefined

Toán tử bitwise giúp thực hiện các phép toán số học nhanh chóng.

Các toán tử bitwise, như | và &, có thể thực hiện một số phép toán số học nhanh chóng hơn, mặc dù điều kiện là phải có khả năng đọc.

let floor = 5.95 | 0; // Fast way to do Math.floor(5.95)

Câu lệnh with được sử dụng để làm việc với các đối tượng trong JavaScript

Câu lệnh with mở rộng chuỗi phạm vi cho một khối mã, cho phép bạn viết mã ngắn hơn. Tuy nhiên, nó không được khuyến khích do lo ngại về khả năng đọc hiểu và 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 các dấu chấm phẩy bị thiếu, nhưng việc dựa vào nó có thể dẫn đến kết quả không mong muốn.

let x = 1

let y = 2

[x, y] = [y, x] // Without proper semicolons, this could fail

Toán tử in được sử dụng để kiểm tra xem một thuộc tính cụ thể có tồn tại trong một đối tượng hay không

Kiểm tra xem một đối tượng có một thuộc tính cụ thể hay không mà không truy cập trực tiếp vào giá trị của nó.

“toString” in {}; // true

Instanceof và typeof

Instanceof kiểm tra chuỗi nguyên mẫu (prototype chain), trong khi typeof trả về một chuỗi chỉ ra kiểu dữ liệu của biểu thức chưa được đánh giá.

function Person() {}

let person = new Person();

console.log(person instanceof Person); // true

console.log(typeof person); // “object”

Các hàm cấp khối trong ES6

ES6 cho phép các 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” in non-strict mode, “undefined” in strict mode

Câu lệnh Debugger

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

function problematicFunction() {

debugger; // Execution pauses here if the developer tools are open

}

Hàm eval() trong JavaScript được sử dụng để thực thi mã JavaScript động từ chuỗi

Hàm eval() thực thi một chuỗi như mã JavaScript nhưng đi kèm với những vấn đề lớn về bảo mật và hiệu suất.

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

Thuộc tính không chuẩn proto

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

let obj = {};

obj.__proto__ = Array.prototype; // Not recommended

Hàm document.write() trong JavaScript được sử dụng để thêm nội dung trực tiếp vào tài liệu HTML hiện tại.

Hàm document.write() ghi trực tiếp vào tài liệu HTML, nhưng việc sử dụng nó có thể mang lại những tác động tiêu cực, đặc biệt là khi tải các kịch bản bên ngoài đồng bộ.

document.write(“<h1>Hello World!</h1>”);

Gán chuỗi được nối lại (Chained Assignment)

JavaScript cho phép thực hiện các phép gán theo chuỗi, có thể gán một giá trị duy nhất cho nhiều biến trong một câu lệnh.

let a, b, c;

a = b = c = 5; // Sets all three variables to the value of 5

Toán tử in được sử dụng để kiểm tra xem một thuộc tính cụ thể có tồn tại trong một đối tượng hay không.

Toán tử in kiểm tra xem một thuộc tính có tồn tại trong một đối tượng hay không mà không cần truy cập vào giá trị của thuộc tính đó.

const car = {

make: ‘Toyota’,

model: ‘Corolla’

};

console.log(‘make’ in car); // true

Bí danh thuộc tính đối tượng

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

const name = ‘Alice’;

const age = 25;

const person = { name, age };

Giá trị mặc định tham số và kỹ thuật phân rã kết hợp

Bạn có thể kết hợp giá trị mặc định của tham số với kỹ thuật phân rã trong các tham số của hàm để định nghĩa hàm một cách 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

Sử dụng Array.fill() để khởi tạo mảng

Nhanh chóng khởi tạo một mảng với một giá trị cụ thể bằng cách sử dụng phương thức fill().

const initialArray = new Array(5).fill(0); // Creates an array [0, 0, 0, 0, 0]

Phương thức Array.includes() được sử dụng để kiểm tra sự hiện diện của một phần tử trong mảng.

Dễ dàng kiểm tra sự hiện diện của một phần tử trong một mảng bằng cách sử dụng phương thức includes(), phương thức này dễ đọc hơn so với việc sử dụng indexOf().

const fruits = [‘apple’, ‘banana’, ‘mango’];

console.log(fruits.includes(‘banana’)); // true

Phân rã aliases

Khi phân rã một đối tượng, bạn có thể gán các thuộc tính cho các biến với các tên khác nhau 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 cho giá trị mặc định

Sử dụng ?? để cung cấp giá trị mặc định chỉ khi xử lý với null hoặc undefined, không áp dụng cho các giá trị falsy khác như

const count = 0;

console.log(count ?? 10); // 0, because count is not null or undefined

Tên hàm động

Tạo các hàm có 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ư

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

class Counter {

#count = 0;

increment() {

this.#count++;

}

getCount() {

return this.#count;

}

Tổng kết

Mỗi tính năng mà chúng tôi nghiên cứu sâu sẽ mở ra những con đường mới để giải quyết các thách thức về mã hóa, giống như việc thêm một công cụ đổi mới vào bộ công cụ của chúng tôi.

Điều này không chỉ nâng cao khả năng của trong việc tạo ra các giải pháp một cách sáng tạo và hiệu quả mà còn nhấn mạnh tính linh hoạt, năng động của JavaScript.

Những tính năng nâng cao này nêu bật vai trò quan trọng của việc học hỏi liên tục trong lĩnh vực phát triển web.

Nắm bắt những sắc thái này và tích hợp chúng vào thực tiễn viết code hàng ngày cho phép chúng tôi hoàn thiện các kỹ năng của mình và đóng góp vào sự phát triển của công nghệ web.

Hãy nhớ rằng, con đường để thành thạo JavaScript là một hành trình liên tục, trong đó mỗi dòng code đều mang đến cơ hội khám phá điều gì đó phi thường.

Hãy tiếp tục vượt qua giới hạn của những gì chúng ta có thể đạt được với JavaScript, luôn tò mò và cởi mở với những khả năng vô tận đang ở phía trước.

NativeX – Học tiếng Anh online toàn diện “4 kỹ năng ngôn ngữ” cho người đi làm.

Với mô hình “Lớp Học Nén” độc quyền:

Tăng hơn 20 lần chạm “điểm kiến thức”, giúp hiểu sâu và nhớ lâu hơn gấp 5 lần.
Tăng khả năng tiếp thu và tập trung qua các bài học cô đọng 3 – 5 phút.
Rút ngắn gần 400 giờ học lý thuyết, tăng hơn 200 giờ thực hành.
Hơn 10.000 hoạt động cải thiện 4 kỹ năng ngoại ngữ theo giáo trình chuẩn Quốc tế từ National Geographic Learning và Macmillan Education.