20 tips to improve the speed and efficiency of JavaScript development-JS Tutorial-php.cn

Improving the speed and efficiency of JavaScript development is a very important place in daily development. This article will introduce you to some convenient and practical methods and tips for daily tasks, reduce the number of lines of code, and improve work efficiency. Increase fishing time.

20 tips to improve the speed and efficiency of JavaScript development

In our daily tasks, we need to write functions such as sorting, searching, finding unique values, passing parameters, exchanging values, etc., so here I will share my work There are several common tips and methods that have been collected over the years to allow everyone to increase the time they spend fishing. [Related recommendations:javascript learning tutorial]

These methods will definitely help you:

Reduce lines of code
Coding Competitions
Increase the time to catch fish

1. Declare and initialize the array

We can use You can initialize the array with a specific size, or you can initialize the array content by specifying a value. You may be using a set of arrays. In fact, you can also do this with a two-dimensional array, as shown below:

const array = Array(5).fill(''); // 输出 (5) ["", "", "", "", ""] const matrix = Array(5).fill(0).map(() => Array(5).fill(0)) // 输出 (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

Copy after login

2. Sum, minimum and maximum values

We should use thereducemethod to quickly find basic mathematical operations.

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

Copy after login

Sum

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

Copy after login

Maximum value

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

Copy after login

Minimum value

array.reduce((a,b) => a
        
         Copy after login

3. Sort arrays of strings, numbers or objects

We have built-in methodssort()andreverse ()To sort strings, but what if it is a number or object array

String array sorting

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

Copy after login

Number array sorting

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

Copy after login

Object array sorting

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)); // 输出 (3) [{…}, {…}, {…}] 0: {first_name: "Pig", last_name: "Bodine"} 1: {first_name: "Lazslo", last_name: "Jamf"} 2: {first_name: "Pirate", last_name: "Prentice"} length: 3

Copy after login

4. Filter to virtual values from the array

Like0,undefined,null,false,"",''Such false values can be easily filtered out using the following trick.

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

Copy after login

5. Use logical operators to handle situations that require conditional judgment

function doSomething(arg1){ arg1 = arg1 || 10; // 如果arg1没有值，则取默认值 10 } let foo = 10; foo === 10 && doSomething(); // 如果 foo 等于 10，刚执行 doSomething(); // 输出: 10 foo === 5 || doSomething(); // is the same thing as if (foo != 5) then doSomething(); // Output: 10

Copy after login

6. Remove duplicate values

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]

Copy after login

7. Create a counter object or Map

In most cases, you can create a counter object or Map To count the frequency of certain special words.

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

Copy after login

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); } } // 输出 Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

Copy after login

8. The ternary operator is cool

function Fever(temp) { return temp > 97 ? 'Visit Doctor!' : temp < 97 ? 'Go Out and Play!!' : temp === 97 ? 'Take Some Rest!': 'Go Out and Play!';; } // 输出 Fever(97): "Take Some Rest!" Fever(100): "Visit Doctor!"

Copy after login

9. Comparison of loop methods

##forandfor..inget the index by default, but you can usearr[ index].
for..inalso accepts non-digits, so avoid using them.
forEach,for...ofGet the element directly.
for...ofcannot.

10. Merge two objects

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}; // 合并多个对象 gender: "Male" name: "Kapil Raghuwanshi" primary: "Mani Primary School" programming: "Extreme" secondary: "Lass Secondary School" sleeping: "Pro" swimming: "Average"

Copy after login

11. Arrow function

Arrow function expressions are an alternative to traditional function expressions, but are limited and cannot be used in all situations. Because they have lexical scope (parent scope) and do not have their own

thisandargument, they refer to the environment in which they are defined.

const person = { name: 'Kapil', sayName() { return this.name; } } person.sayName(); // 输出 "Kapil"

Copy after login

But this:

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

Copy after login

12. Optional chain

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

Copy after login

13. Shuffle an array

Use the built-in

Math.random()method.

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

Copy after login

14. Double question mark syntax

const foo = null ?? 'my school'; // 输出: "my school" const baz = 0 ?? 42; // 输出: 0

Copy after login

15. Remaining and expansion syntax

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

Copy after login

and

const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; lyrics; // 输出: (5) ["head", "shoulders", "knees", "and", "toes"]

Copy after login

16. Default parameters

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

Copy after login

17. Convert decimal to binary Or hexadecimal

const num = 10; num.toString(2); // 输出: "1010" num.toString(16); // 输出: "a" num.toString(8); // 输出: "12"

Copy after login

18. Use destructuring to exchange two numbers

let a = 5; let b = 8; [a,b] = [b,a] [a,b] // 输出 (2) [8, 5]

Copy after login

19. Check the number of palindromes in a single line

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

Copy after login

20. Convert Object properties to property arrays

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]

Copy after login

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of 20 tips to improve the speed and efficiency of JavaScript development. For more information, please follow other related articles on the PHP Chinese website!