// Longhand
let x; cho y = 20;
// Viết tắt
let x, y = 20;
Chúng ta có thể gán giá trị cho nhiều biến trong một dòng bằng cách cấu trúc mảng.
// Longhand
let a, b, c; a = 5; b = 8; c = 12;
// Viết tắt let
[a, b, c] = [5, 8, 12];
Chúng ta có thể lưu 5 dòng mã ở đây với toán tử bậc ba (có điều kiện).
// Longhand
let mark = 26;
cho kết quả;
if (mark> = 30) {
result = 'Pass';
} else {
result = 'Fail';
} // Viết tắt cho kết quả = mark> = 30? 'Vượt qua thất bại';
Chúng ta có thể sử dụng OR(||) đánh giá ngắn mạch để gán giá trị mặc định cho một biến trong trường hợp giá trị mong đợi được tìm thấy là sai.
// Longhand let imagePath;
let path = getImagePath ();
if (path! == null && path! == undefined && path! == '') {
imagePath = path;
} else {
imagePath = 'default.jpg';
}
// Viết tắt
let imagePath = getImagePath () || 'default.jpg';
>>> Tìm hiều thêm: Chương trình học lập trình từ cơ bản đến nâng cao
Nếu bạn đang gọi một hàm chỉ khi một biến là đúng, thì bạn có thể sử dụng AND(&&) ngắn mạch để thay thế cho điều này.
// Longhand if (isLoggedin) {
goToHomepage ();
}
// Viết tắt isLoggedin && goToHomepage ();
Tốc độ AND(&&) ngắn hữu ích hơn trong React khi bạn muốn kết xuất một thành phần có điều kiện. Ví dụ:
<div> {this.state.isLoading && <Loading />} </div>
Để hoán đổi hai biến, chúng ta thường sử dụng một biến thứ ba. Chúng ta có thể hoán đổi hai biến một cách dễ dàng với phép gán cấu trúc mảng.
let x = 'Hello', y = 55;
// Longhand const temp = x; x = y; y = tạm thời;
// Tốc ký [x, y] = [y, x];
// Hàm tốc ký
add (num1, num2) { return num1 + num2; }
// Viết tắt
const add = (num1, num2) => num1 + num2;
Tham khảo : Hàm Arrow trong JavaScript
Sử dụng toán tử + để nối các giá trị chuỗi với các biến. Với các ký tự mẫu của ES6, chúng ta có thể làm điều đó theo cách đơn giản hơn.
// Longhand
console.log ('Bạn nhận được cuộc gọi nhỡ từ' + number + 'at' + time);
// Viết tắt
console.log (`Bạn nhận được cuộc gọi nhỡ từ $ {number} lúc $ {time} ');
Đối với chuỗi nhiều dòng, sử dụng toán tử + với chuỗi thoát dòng mới (\ n). Chúng ta có thể làm điều đó theo cách dễ dàng hơn bằng cách sử dụng dấu gạch ngược (`).
// Longhand
console.log ('JavaScript, thường được viết tắt là JS, là ngôn ngữ lập trình \ n' + 'tuân theo đặc tả ECMAScript \ n' + '. JavaScript là cấp cao, \ n' + 'thường chỉ- được biên dịch kịp thời và đa mô hình. ');
// Viết tắt
console.log (`JavaScript, thường được viết tắt là JS, là một ngôn ngữ lập trình tuân theo đặc tả ECMAScript. JavaScript là cấp cao, thường được biên dịch trong thời gian và đa mô hình.`);
Để đối sánh nhiều giá trị, chúng ta có thể đặt tất cả các giá trị trong mảng và sử dụng indexOf() hoặc includes().
// Longhand
if (giá trị === 1 || giá trị === 'một' || giá trị === 2 || giá trị === 'hai') {
// Thực thi một số mã }
// Viết tắt 1
if ([1, 'one', 2, 'two']. IndexOf (value)> = 0) {
// Thực thi một số đoạn mã }
// Viết tắt 2
if ([1, 'one', 2, 'two']. Include (value)) {
// Thực thi một số đoạn mã }
Nếu tên biến và tên khóa đối tượng giống nhau thì chúng ta chỉ có thể đề cập đến tên biến trong các ký tự đối tượng thay vì cả khóa và giá trị. JavaScript sẽ tự động đặt khóa giống như tên biến và gán giá trị dưới dạng giá trị biến.
let firstname = 'Amitav';
let lastname = 'Mishra';
// Longhand
let obj = {firstname: firstname, lastname: lastname};
// Viết tắt let obj = {firstname, lastname};
Có sẵn các phương thức như parseIntvà parseFloatcó sẵn để chuyển đổi một chuỗi thành số. Chúng ta cũng có thể làm điều này bằng cách chỉ cần cung cấp toán tử một ngôi (+) trước giá trị chuỗi.
// Longhand
let total = parseInt ('453');
let average = parseFloat ('42 .6 ');
// Viết tắt
let total = + '453'; cho trung bình = + '42 .6 ';
Để lặp lại một chuỗi trong một số thời gian nhất định, bạn có thể sử dụng một forvòng lặp. Nhưng sử dụng repeat()phương pháp này, chúng ta có thể làm điều đó trong một dòng duy nhất.
// Longhand
let str = ''; for (let i = 0; i <5; i ++) {
str + = 'Xin chào'; }
console.log (str); // Chào chào chào chào chào
// Viết tắt
'Xin chào' .repeat (5);
Tips: Bạn muốn xin lỗi ai đó bằng cách gửi 100 lần "xin lỗi"? Hãy thử nó với repeat()phương pháp. Nếu bạn muốn lặp lại từng chuỗi trong một dòng mới, thì hãy thêm \nvào chuỗi.
'xin lỗi \ n'.repeat (100);
Chúng ta có thể sử dụng Math.pow() để tìm lũy thừa của một số. Có một cú pháp ngắn hơn để làm điều đó với double asterik (**).
// Longhand
const power = Math.pow (4, 3); // 64
// Viết tắt const power = 4 ** 3; // 64
Toán tử kép NOT bitwise là một thay thế cho Math.floor().
// Longhand
const floor = Math.floor (6.8); // 6
// Viết tắt
const floor = ~~ 6.8; // 6
Note: Phương pháp toán tử kép NOT bitwise chỉ hoạt động với số nguyên 32 bit, tức là (2 ** 31) -1 = 2147483647. Vì vậy, đối với bất kỳ số nào cao hơn 2147483647, toán tử bitwise (~~) sẽ cho kết quả sai, vì vậy khuyến khích sử dụng Math.floor() trong trường hợp như vậy.
Chúng ta có thể sử dụng vòng lặp for để lặp qua từng giá trị của mảng và tìm giá trị max hoặc min. Chúng ta cũng có thể sử dụng phương thức Array.reduce () để tìm số max và min trong mảng. Nhưng sử dụng toán tử spread, chúng ta có thể thực hiện nó trong một dòng duy nhất.
// Viết tắt
const arr = [2, 8, 15, 4];
Math.max (... arr); // 15
Math.min (... arr); // 2
Để lặp qua một mảng, chúng ta thường sử dụng for truyền thống. Chúng ta có thể sử dụng for...of để lặp qua các mảng. Để truy cập chỉ mục của mỗi giá trị, chúng ta có thể sử dụng for...in.
cho arr = [10, 20, 30, 40];
// Longhand
for (let i = 0; i <arr.length; i ++) {
console.log (arr [i]); }
// Viết tắt
// for of loop
for (const val of arr) {
console.log (val); }
// vòng lặp
for in for (const index in arr) {
console.log (`index: $ {index} và value: $ {arr [index]}`); }
Chúng ta cũng có thể lặp qua các thuộc tính của đối tượng bằng cách sử dụng for...in.
let obj = {x: 20, y: 50};
for (khóa const trong obj) {
console.log (obj [key]); }
Tham khảo: Các cách khác nhau để lặp qua các đối tượng và mảng trong JavaScript
cho arr1 = [20, 30];
// Longhand let arr2 = arr1.concat ([60, 80]);
// [20, 30, 60, 80] /
/ Viết tắt let arr2 = [... arr1, 60, 80]; // [20, 30, 60, 80]
Để sao chép sâu một đối tượng nhiều cấp, chúng ta có thể lặp qua từng thuộc tính và kiểm tra xem thuộc tính hiện tại có chứa một đối tượng hay không. Nếu có, sau đó thực hiện một cuộc gọi đệ quy đến cùng một hàm bằng cách chuyển giá trị thuộc tính hiện tại (tức là đối tượng lồng nhau).
Chúng tôi cũng có thể làm điều đó bằng cách sử dụng JSON.stringify()và JSON.parse() nếu đối tượng của chúng tôi không chứa các hàm, không xác định, NaN hoặc Ngày dưới dạng giá trị. Nếu chúng ta có đối tượng mức đơn, tức là không có đối tượng lồng nhau nào, thì chúng ta cũng có thể nhân bản sâu bằng toán tử spread.
let obj = {x: 20, y: {z: 30}};
// Longhand const makeDeepClone = (obj) => {
let newObject = {};
Object.keys (obj) .map (key => {
if (typeof obj [key] === 'object') {
newObject [key] = makeDeepClone (obj [key]);
} else {
newObject [key] = obj [phím]; } });
trả về newObject;
}
const cloneObj = makeDeepClone (obj);
// Viết tắt
const cloneObj = JSON.parse (JSON.stringify (obj));
// Viết tắt cho đối tượng cấp đơn
let obj = {x: 20, y: 'hello'}; const cloneObj = {... obj};
Note: Kỹ thuật viết tắt ( JSON.parse(JSON.stringify(obj))) không hoạt động nếu tài sản đối tượng của bạn chứa function, undefinedhoặc NaNlà giá trị. Bởi vì khi bạn JSON.stringify đối tượng, tài sản chứa function, undefinedhoặc NaNlà giá trị sẽ bị xoá khỏi đối tượng. Vì vậy, hãy sử dụng JSON.parse(JSON.stringify(obj)) khi đối tượng của bạn chỉ chứa chuỗi và số.
Tham khảo: JSON.parse () và JSON.stringify ()
let str = 'jscurious.com';
// Longhand str.charAt (2); // c
// Viết tắt str [2]; // c
Một số kỹ thuật tốc ký này có vẻ không phù hợp để sử dụng trong nhiều project nhưng không tồi nếu bạn biết thêm một số kỹ thuật bổ sung.
Nguồn: Amitav Mishra - Medium