20 JS skills to help you improve work efficiency and never be an overtime worker again!

This article will share with you 20 JavaScript tips and tricks to improve code efficiency. I hope it will be helpful to you as a front-end person who does not work overtime.

In our daily tasks we write functions like sorting, searching, finding unique values, passing parameters, exchanging values ​​etc. so here I have listed my A list of shorthand tips!

JavaScript is really a great language that is worth learning and using. For a given problem, there can be more than one way to arrive at the same solution. In this article, we will only discuss the fastest ones.

These methods will definitely help you:

• Reduce the number of LOC (lines of code),
• Coding Competition,
• Hackathon
• or other time-limited tasks.

Most of these JavaScript Hacks use ECMAScript6(ES2015) and later technologies, although the latest version is ECMAScript11(ES2020).

==Note==: All tips below have been tested on Google Chrome's console.

1. Declare and initialize the array

We can initialize an array 0 of a specific size using a default value (such as "", null or ). You may already be using these for 1D arrays, but how do you initialize a 2D array/matrix?

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. Find the sum, minimum and maximum value

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

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

• and

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

• Maximum

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

• Minimum

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

3. Sort strings, numbers or object arrays

We have built-in methods sort() and reverse() for Sort strings, but what about arrays of numbers or objects?

Let’s look at ascending and descending sorting techniques for numbers and objects.

• Sort string array

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

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

• Sort number array

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 sort

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 out false values ​​from the array

Falsy values ​​like 0, undefined, null, false, "", '' can be easily omitted by

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

5. Conditions using logical operators

If you want to reduce nested if...else or switch cases, you can simply use the basic logical operators AND/OR.

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// 如果尚未设置，则将 arg1 设置为 10 作为默认值
return arg1;
}

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

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

6. Remove duplicate values

You may have used indexOf() with a for loop that returns the first found index or newer includes() Returns boolean true/false from an array to find/remove duplicates. This is where we have two faster methods.

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)];
// 输出: [5, 4, 7, 8, 9, 2]

7. Create a counter object or map

Most of the time, you need to solve the problem by creating a counter object or map that has variables as keys is tracked and its frequency/occurrence is tracked as a value.

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}

and

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

You can avoid using the ternary operator to nest conditions if…elseif… elseif.

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

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

9. Compared to the old version, the for loop is faster

• ##forandfor..inThe index is given to you by default, but you can use arr[index].
• for..in also accepts non-numbers, so avoid it.
• forEach,for...ofGet the element directly.
• forEach can also give you an index, but for...of cannot.
• for and for...of The holes in the array are considered, but the other 2 are not.

10. Merge 2 objects

Usually we need to merge multiple objects in daily tasks.

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 functions

Arrow function expressions are compact alternatives to traditional function expressions, but have limitations and cannot be used in all situations. Since they have lexical scope (the parent scope) and have no scope of their own

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

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

But

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

12. Optional chaining

Optional chaining ?. Stops evaluation if the value comes before ?. Is undefined or null and returns

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

13. Scramble the 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]
// Call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Null coalescing operator

The null coalescing operator (??) is a logical operator, when its left operand is empty or undefined Returns its right-hand operand if , otherwise returns its left-hand operand.

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

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

15. Rest & Spread 运算符

那些神秘的3点...可以休息或传播！?

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

// 输出: 6

和

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

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

16. 默认参数

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

// 输出: 4

17. 将十进制转换为二进制或十六进制

在解决问题的同时，我们可以使用一些内置的方法，例如.toPrecision()或.toFixed()来实现许多帮助功能。

const num = 10;

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

18. 使用解构简单交换两值

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

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

19. 单行回文检查

嗯，这不是一个整体的速记技巧，但它会让你清楚地了解如何使用弦乐。

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

20.将Object属性转成属性数组

使用Object.entries(),Object.keys()和Object.values()
const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// 输出
(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]

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of 20 JS skills to help you improve work efficiency and never be an overtime worker again!. For more information, please follow other related articles on the PHP Chinese website!