Khi tôi bắt đầu học JavaScript, điều đầu tiên tôi làm là lập danh sách các thủ thuật giúp tôi tiết kiệm thời gian. Tôi phát hiện ra chúng từ các lập trình viên khác, trên các trang web khác nhau và trong sách hướng dẫn.
Trong bài viết này, tôi sẽ chỉ cho bạn 12 cách tuyệt vời để cải thiện và tăng tốc mã JavaScript của bạn. Trong hầu hết các trường hợp, chúng là phổ quát.
Chúng tôi nhắc nhở: cho tất cả độc giả của "Habr" - giảm giá 10 rúp khi đăng ký bất kỳ khóa học Skillbox nào bằng mã khuyến mại "Habr".
Hộp kỹ năng khuyến nghị: khóa học thực hành .
Lọc các giá trị duy nhất
Mảng
Kiểu đối tượng Set đã được giới thiệu trong ES6, cùng với toán tử..., spread, chúng ta có thể sử dụng nó để tạo một mảng mới chỉ chứa các giá trị duy nhất.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Trong tình huống bình thường, cần nhiều mã hơn để thực hiện thao tác tương tự.
Kỹ thuật này hoạt động với các mảng chứa các kiểu nguyên thủy: không xác định, null, boolean, chuỗi và số. Nếu bạn đang làm việc với một mảng chứa các đối tượng, hàm hoặc mảng bổ sung, bạn sẽ cần một cách tiếp cận khác.
Độ dài của mảng bộ đệm theo chu kỳ
CHU KỲ
Khi bạn học vòng lặp for, bạn làm theo quy trình chuẩn:
for (let i = 0; i < array.length; i++){
console.log(i);
}Tuy nhiên, với cú pháp này, vòng lặp for liên tục kiểm tra độ dài của mảng trong mỗi lần lặp.
Đôi khi điều này có thể hữu ích, nhưng trong hầu hết các trường hợp, việc lưu vào bộ nhớ đệm độ dài của mảng sẽ hiệu quả hơn vì điều này sẽ yêu cầu một người truy cập vào nó. Chúng ta có thể làm điều này bằng cách xác định một biến độ dài trong đó chúng ta xác định biến i, như sau:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Về nguyên tắc, gần giống như trên, nhưng bằng cách tăng kích thước vòng lặp, chúng ta sẽ tiết kiệm được thời gian đáng kể.
Xếp hạng ngắn mạch (xếp hạng McCarthy)
NGƯỜI ĐIỀU HÀNH CÓ ĐIỀU KIỆN
Toán tử bậc ba là một cách nhanh chóng và hiệu quả để viết các câu lệnh điều kiện đơn giản (và đôi khi không đơn giản như vậy):
x> 100? “trên 100”: “dưới 100”;
x> 100? (x>200? "hơn 200": "trong khoảng 100-200"): "nhỏ hơn 100";
Nhưng đôi khi ngay cả toán tử bậc ba cũng phức tạp hơn mức cần thiết. Thay vào đó, chúng ta có thể sử dụng 'và' && và 'hoặc' || Các toán tử Boolean để đánh giá các biểu thức nhất định theo cách ngắn gọn hơn. Nó thường được gọi là "ngắn mạch" hoặc "đánh giá ngắn mạch".
Làm thế nào nó hoạt động
Giả sử chúng ta chỉ muốn trả về một trong hai điều kiện trở lên.
Sử dụng && sẽ trả về giá trị sai đầu tiên. Nếu mỗi toán hạng đều có giá trị đúng thì biểu thức cuối cùng được đánh giá sẽ được trả về.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Sử dụng || sẽ trả về giá trị thực đầu tiên. Nếu mỗi toán hạng có giá trị sai thì giá trị được đánh giá cuối cùng sẽ được trả về.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullVí dụ 1
Giả sử chúng ta muốn trả về độ dài của một biến nhưng chúng ta không biết loại của nó.
Trong trường hợp này, bạn có thể sử dụng if/else để kiểm tra xem foo có đúng loại không, nhưng phương pháp này có thể quá dài. Vì vậy, tốt hơn là chúng ta nên thực hiện “đoản mạch” của mình.
return (foo || []).length;Nếu biến foo có độ dài phù hợp thì giá trị đó sẽ được trả về. Nếu không chúng ta sẽ nhận được 0.
Ví dụ 2
Bạn có gặp vấn đề khi truy cập một đối tượng lồng nhau không? Bạn có thể không biết liệu một đối tượng hoặc một trong các thuộc tính phụ của nó có tồn tại hay không và điều này có thể dẫn đến các vấn đề.
Ví dụ: chúng tôi muốn truy cập thuộc tính dữ liệu trong this.state, nhưng dữ liệu không được xác định cho đến khi chương trình của chúng tôi trả về yêu cầu tìm nạp.
Tùy thuộc vào nơi chúng tôi sử dụng nó, việc gọi this.state.data có thể ngăn ứng dụng khởi động. Để giải quyết vấn đề, chúng ta có thể gói nó trong một biểu thức có điều kiện:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Một lựa chọn tốt hơn là sử dụng toán tử "hoặc".
return (this.state.data || 'Fetching Data');Chúng tôi không thể thay đổi mã ở trên để sử dụng &&. Toán tử 'Tìm nạp dữ liệu' && this.state.data sẽ trả về this.state.data bất kể nó có được xác định hay không.
Chuỗi tùy chọn
Người ta có thể đề xuất sử dụng chuỗi tùy chọn khi cố gắng trả lại một thuộc tính sâu vào cấu trúc cây. Vì vậy, biểu tượng dấu chấm hỏi? chỉ có thể được sử dụng để truy xuất một thuộc tính nếu nó không rỗng.
Ví dụ: chúng ta có thể cấu trúc lại ví dụ trên để lấy this.state.data?..(). Nghĩa là, dữ liệu chỉ được trả về nếu giá trị không rỗng.
Hoặc, nếu vấn đề là trạng thái có được xác định hay không, chúng ta có thể trả về this.state?.data.
Chuyển đổi sang Boolean
CHUYỂN ĐỔI LOẠI
Ngoài các hàm boolean thông thường đúng và sai, JavaScript còn coi tất cả các giá trị khác là đúng hoặc sai.
Cho đến khi có ghi chú khác, tất cả các giá trị trong JavaScript đều là trung thực, ngoại trừ 0, "", null, không xác định, NaN và tất nhiên là sai. Sau này là giả mạo.
Chúng ta có thể dễ dàng chuyển đổi giữa hai loại bằng cách sử dụng toán tử !, toán tử này cũng chuyển đổi kiểu thành boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Chuyển đổi thành chuỗi
CHUYỂN ĐỔI LOẠI
Việc chuyển đổi nhanh từ số nguyên sang chuỗi có thể được thực hiện như sau.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Chuyển đổi thành số nguyên
CHUYỂN ĐỔI LOẠI
Chúng tôi thực hiện chuyển đổi ngược lại như thế này.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Phương pháp này cũng có thể được sử dụng để chuyển đổi kiểu dữ liệu boolean thành các giá trị số thông thường, như hiển thị bên dưới:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Có thể có những tình huống trong đó + sẽ được hiểu là toán tử nối chứ không phải toán tử cộng. Để tránh điều này, bạn nên sử dụng dấu ngã: ~~. Toán tử này tương đương với -n-1. Ví dụ: ~15 bằng -16.
Sử dụng hai dấu ngã liên tiếp sẽ phủ nhận thao tác vì - (- - n - 1) - 1 = n + 1 - 1 = n. Nói cách khác, ~-16 bằng 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
VẬN HÀNH
Bắt đầu từ ES7, bạn có thể sử dụng toán tử lũy thừa ** làm cách viết tắt cho lũy thừa. Việc này nhanh hơn nhiều so với việc sử dụng Math.pow(2, 3). Nghe có vẻ đơn giản, nhưng điểm này được đưa vào danh sách các kỹ thuật vì nó không được đề cập ở mọi nơi.
console.log(2 ** 3); // Result: 8Không nên nhầm lẫn nó với ký hiệu ^, thường được sử dụng để tính lũy thừa. Nhưng trong JavaScript đây là toán tử XOR.
Trước ES7, phím tắt ** chỉ có thể được sử dụng cho lũy thừa cơ số 2 bằng cách sử dụng toán tử dịch trái theo bit <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Ví dụ: 2 << 3 = 16 tương đương với 2 ** 4 = 16.
Float tới số nguyên
HOẠT ĐỘNG / CHUYỂN ĐỔI LOẠI
Nếu bạn cần chuyển đổi một số float thành một số nguyên, bạn có thể sử dụng Math.floor(), Math.ceil() hoặc Math.round(). Nhưng có một cách nhanh hơn, để làm điều này chúng ta sử dụng |, đó là toán tử OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Hành vi | phụ thuộc phần lớn vào việc bạn đang xử lý số dương hay số âm nên phương pháp này chỉ phù hợp nếu bạn tự tin vào việc mình đang làm.
n | 0 loại bỏ mọi thứ sau dấu phân cách thập phân, cắt bớt số float thành số nguyên.
Bạn có thể có được hiệu ứng làm tròn tương tự bằng cách sử dụng ~~. Sau khi buộc phải chuyển đổi thành số nguyên, giá trị vẫn không thay đổi.
Xóa số ở cuối
Toán tử OR có thể được sử dụng để xóa bất kỳ số chữ số nào khỏi một số. Điều này có nghĩa là chúng ta không cần chuyển đổi các loại như ở đây:
let str = "1553";
Number(str.substring(0, str.length - 1));Thay vào đó chúng ta chỉ cần viết:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Liên kết tự động
CÁC LỚP HỌC
Các ký hiệu mũi tên ES6 có thể được sử dụng trong các phương thức lớp và được ngụ ý ràng buộc. Điều này có nghĩa là bạn có thể nói lời tạm biệt với các biểu thức lặp đi lặp lại như this.myMethod = this.myMethod.bind(this)!
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};Cắt mảng
Mảng
Nếu bạn cần tách các giá trị khỏi một mảng, có các phương thức nhanh hơn splice().
Ví dụ: nếu bạn biết kích thước của mảng ban đầu, bạn có thể ghi đè thuộc tính độ dài của nó như sau:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Nhưng có một phương pháp khác và nhanh hơn. Nếu tốc độ là điều quan trọng với bạn thì đây là những lựa chọn của chúng tôi:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]In (các) giá trị cuối cùng của một mảng
Mảng
Kỹ thuật này yêu cầu sử dụng phương thức slice().
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]Định dạng mã JSON
JSON
Có thể bạn đã sử dụng JSON.stringify. Bạn có biết rằng nó giúp định dạng JSON của bạn không?
Phương thức stringify() có hai tham số tùy chọn: hàm thay thế, có thể được sử dụng để lọc JSON được hiển thị và giá trị khoảng trắng.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Chỉ vậy thôi, tôi hy vọng rằng tất cả những kỹ thuật này đều hữu ích. Bạn biết những thủ thuật gì? Viết chúng trong các ý kiến.
Hộp kỹ năng khuyến nghị:
- Khóa học thực hành hai năm .
- Khóa học trực tuyến .
- Khóa học năm thực tế .
Nguồn: www.habr.com