20 mẹo và thủ thuật JavaScript hàng đầu để tăng tốc độ và hiệu quả của bạn

20 mẹo và thủ thuật JavaScript hàng đầu để tăng tốc độ và hiệu quả của bạn

Các kỹ thuật tiện lợi và hữu ích để giảm bớt các dòng code và tăng tốc độ cho việc lập trình!

Trong các công việc hàng ngày, chúng ta phải viết các hàm như sắp xếp, tìm kiếm, tìm giá trị duy nhất, truyền tham số, hoán đổi giá trị, v.v., vì vậy ở đây tôi trình bày danh sách các kỹ thuật viết tắt của mình để viết tất cả chúng dưới dạng Pro!

JavaScript thực sự là một ngôn ngữ tuyệt vời để học và làm việc. Và có thể có nhiều cách tiếp cận để đạt được cùng một giải pháp cho vấn đề đã cho. Trong bài viết này, chúng tôi sẽ chỉ thảo luận về những cái nhanh nhất.🚀

Những cách tiếp cận này chắc chắn sẽ giúp bạn:

• Giảm số lượng LOC (dòng code),
• Các cuộc thi code,
• Hackathons hoặc
• Các nhiệm vụ ràng buộc về thời gian khác.⏱

Hầu hết JavaScript Hacks này sử dụng các kỹ thuật từ ECMAScript6 (ES2015) trở đi, mặc dù phiên bản mới nhất là ECMAScript11 (ES2020).

Lưu ý: Tất cả các thủ thuật dưới đây đã được thử nghiệm trên Bảng điều khiển của Google Chrome.

Tìm hiểu thêm về khóa học javascript tại Techmaster

1. Khai báo và Khởi tạo Mảng

Chúng ta có thể khởi tạo mảng có kích thước cụ thể với các giá trị mặc định như "", null hoặc 0. Bạn có thể đã sử dụng chúng cho mảng 1-D nhưng khởi tạo mảng / ma trận 2-D thì sao?

const array = Array(5).fill('');
// Output
(5) ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0));
// Output
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5

2. Tìm tổng, giá trị nhỏ nhất và lớn nhất

Chúng ta nên sử dụng phương thức reduce này để tìm nhanh các phép toán cơ bản.

const array  = [5,4,7,8,9,2];

Tổng

array.reduce((a,b) => a+b);
// Output: 35

Max

array.reduce((a,b)=>a>b?a:b);
// Output: 9

Min

array.reduce((a,b)=>a<b?a:b);
// Output: 2

3. Sắp xếp Mảng Chuỗi, Số hoặc Đối tượng

Chúng tôi có các phương thức sẵn có sort() và reverse() để sắp xếp các chuỗi nhưng còn số hoặc mảng đối tượng thì sao?

Chúng ta hãy kiểm tra các thủ thuật sắp xếp cho Số lượng và Đối tượng theo thứ tự Tăng và Giảm.

Sắp xếp chuỗi mảng

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Output
(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// Output
(4) ["Steve", "Musk", "Kapil", "Joe"]

Sắp xếp số mảng

const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b)=>a-b);
// Output
(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b)=>b-a);
// Output
(6) [100, 40, 25, 10, 5, 1]

Sắp xếp mảng đối tượng

const objectArr = [
    { first_name: 'Lazslo', last_name: 'Jamf'     },
    { first_name: 'Pig',    last_name: 'Bodine'   },
    { first_name: 'Pirate', last_name: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Output
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3

4. Có bao giờ cần lọc các giá trị sai ra khỏi một mảng không?

Giá trị Falsy như 0, undefined, null, false, "", ''có thể được bỏ qua một cách dễ dàng thông qua thủ thuật dưới đây:

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// Output
(3) [3, 6, 7]

5. Sử dụng các toán tử logic cho các điều kiện khác nhau

Nếu bạn muốn giảm các trường hợp if..else hoặc switch...case, bạn có thể chỉ cần chơi với các toán tử logic cơ bản AND/OR.

function doSomething(arg1){
    arg1 = arg1 || 10;
// set arg1 to 10 as a default if it’s not already set
return arg1;
}

let foo = 10;
foo === 10 && doSomething();
// is the same thing as if (foo == 10) then doSomething();
// Output: 10

foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// Output: 10

6. Loại bỏ các giá trị trùng lặp

Bạn có thể đã sử dụng indexOf() với vòng lặp for trả về chỉ mục được tìm thấy đầu tiên hoặc chỉ mục mới hơn includes(), trả về boolean true / false từ mảng để tìm ra / loại bỏ các bản sao. Đây là 2 cách tiếp cận nhanh hơn của chúng tôi.

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
or
const nonUnique = [...new Set(array)];
// Output: [5, 4, 7, 8, 9, 2]

7. Tạo đối tượng hoặc bản đồ bộ đếm

Hầu hết thời gian giải quyết vấn đề bằng cách tạo đối tượng bộ đếm hoặc bản đồ theo dõi các biến dưới dạng khóa với tần suất / số lần xuất hiện của chúng dưới dạng giá trị.

let string = 'kapilalipak';

const table={};
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// Output
{k: 2, a: 3, p: 2, i: 2, l: 2}

và

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {
      countMap.set(string[i], 1);
    }
  }
// Output
Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. Phép toán ba ngôi rất thú vị

Bạn có thể tránh lồng ghép có điều kiện if..elseif..elseif bằng các toán tử ba ngôi.

function Fever(temp) {
return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Feel Better!'
      : temp === 97 ? 'Take Some Rest!'
      : 'Go Out and Play!';
}

// Output
Fever(97): "Take Some Rest!"
Fever(100): "Visit Doctor!"

9. Vòng lặp for nhanh hơn so với các vòng lặp kế thừa

• for và for..in cho phép bạn lập index theo mặc định, nhưng bạn có thể sử dụng arr [index].
• for..in chấp nhận không phải là số, vì vậy hãy tránh nó.
• forEach, for...of giúp bạn có thành phần trực tiếp.
• forEach cũng có thể giúp bạn lập index nhưng for /of lại không thể.
• for và for...of xem xét các lỗ hổng trong mảng nhưng khác 2 thì không.

10. Hợp nhất 2 đối tượng

Thường thì chúng ta cần hợp nhất nhiều đối tượng trong các công việc hàng ngày của mình.

const user = {
 name: 'Kapil Raghuwanshi',
 gender: 'Male'
 };
const college = {
 primary: 'Mani Primary School',
 secondary: 'Lass Secondary School'
 };
const skills = {
 programming: 'Extreme',
 swimming: 'Average',
 sleeping: 'Pro'
 };

const summary = {...user, ...college, ...skills};

// Output
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"

11. Hàm mũi tên

Biểu thức hàm mũi tên là một thay thế nhỏ gọn cho biểu thức hàm truyền thống, nhưng bị hạn chế và không thể sử dụng trong mọi trường hợp. Vì chúng có phạm vi từ vựng (phạm vi gốc) chứ không có phạm vi riêng this và arguments do đó chúng đề cập đến môi trường mà chúng được xác định.

const person = {
name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// Output
"Kapil"
nhưng
const person = {
name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// Output
""

12. Chuỗi tùy chọn

Chuỗi tùy chọn ?. dừng đánh giá nếu giá trị trước đó ?. là không xác định hoặc null và trả về không xác định.

const user = {
  employee: {
    name: "Kapil"
  }
};
user.employee?.name;
// Output: "Kapil"
user.employ?.name;
// Output: undefined
user.employ.name
// Output: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

13. Trộn một mảng

Sử dụng phương thức Math.random() sẵn có .

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(()=>{
    return Math.random() - 0.5;
});
// Output
(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
Call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Nhà điều hành Nullish Coalescing

Toán tử kết hợp nullish (??) là một toán tử logic trả về toán hạng bên phải của nó khi toán hạng bên trái của nó là null hoặc không xác định, và nếu không trả về toán hạng bên trái của nó.

const foo = null ?? 'my school';
// Output: "my school"

const baz = 0 ?? 42;
// Output: 0

15. Toán tử Rest & Spread

3 dấu chấm bí ẩn đó … có thể nghỉ ngơi hoặc lan rộng!

function myFun(a,  b, ...manyMoreArgs) {
   return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");

// Output: 6

và

const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];

lyrics;
// Output:
(5) ["head", "shoulders", "knees", "and", "toes"]

16. Các tham số mặc định

const search = (arr, low=0,high=arr.length-1) => {
    return high;
}
search([1,2,3,4,5]);

// Output: 4

17. Chuyển đổi thập phân sang nhị phân hoặc Hexa

Chúng ta có thể sử dụng một số phương pháp có sẵn như .toPrecision()hoặc .toFixed()để đạt được nhiều trợ giúp cho các hàm trong khi giải quyết vấn đề.

const num = 10;

num.toString(2);
// Output: "1010"
num.toString(16);
// Output: "a"
num.toString(8);
// Output: "12"

18. Trao đổi đơn giản 2 giá trị bằng cách sử dụng Hủy bỏ

let a = 5;
let b = 8;
[a,b] = [b,a]

[a,b]
// Output
(2) [8, 5]

19. Kiểm tra lớp lót đơn Palindrome

Về tổng thể, đây không phải là một thủ thuật tốc ký nhưng nó sẽ cho bạn ý tưởng rõ ràng để chơi với string.

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Output: true

20. Biến các thuộc tính Đối tượng thành một Mảng các thuộc tính

Sử dụng Object.entries(), Object.keys() và Object.values()

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// Output
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3) ["a", "b", "c"]

Object.values(obj);
(3) [1, 2, 3]

Vì vậy, đó là các hướng dẫn hiện tại!

Nếu bạn biết thêm một vài cách hack như trên, đừng ngại chia sẻ ở phần bình luận bên dưới, để chúng ta cùng tìm hiểu nhé.

Nếu bạn thực sự học được điều gì đó mới với bài viết này hoặc nó thực sự khiến nhà phát triển của bạn làm việc nhanh hơn trước, hãy thích nó, lưu nó và chia sẻ nó với đồng nghiệp của bạn.

Bài viết gốc tại đây