20 tips to improve the speed and efficiency of JavaScript development

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.

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

2. Sum, minimum and maximum values

We should use the reduce method to quickly find basic mathematical operations.

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

Sum

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

Maximum value

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

Minimum value

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

3. Sort arrays of strings, numbers or objects

We have built-in methods sort() and reverse ()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"]

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]

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

4. Filter to virtual values ​​from the array

Like 0, 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]

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

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]

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}

or

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}

8. The ternary operator is cool

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

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

9. Comparison of loop methods

• ##for and for..in get the index by default, but you can use arr[ index].
• for..in also accepts non-digits, so avoid using them.
• forEach, for...of Get the element directly.
forEach can also get the index, but
• for...of cannot.

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"

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

this and argument, they refer to the environment in which they are defined.

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

But this:

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

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

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]

14. Double question mark syntax

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

const baz = 0 ?? 42;
// 输出: 0

15. Remaining and expansion syntax

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

// 输出: 6

and

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

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

16. Default parameters

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

// 输出: 4

17. Convert decimal to binary Or hexadecimal

const num = 10;

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

18. Use destructuring to exchange two numbers

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

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

19. Check the number of palindromes in a single line

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

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]

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!