20 Javascript skills to improve our fishing time!

Author: Kapil Raghuwanshi
Translator: Frontend Xiaozhi
Source: dev

If you have dreams and dry goods, search on [Moving the World] attention to this brushing wit who is still doing dishes in the early morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Last month spent 1600 to build a higher configuration Alibaba server to learn node and the corresponding framework, now: Alibaba Cloud Double 11 activity 1 core 2G1M, 69 yuan/1 year, 180 yuan/3 years

convenient and useful method to reduce the number of lines of code, improve our work efficiency, and increase our 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 are a few common skills and methods that I have collected for many years, so that everyone can increase their touch. Fish time.

These methods will definitely help you:

Reduce code lines
Coding Competitions
Increase the time spent fishing

1. Declare and initialize the array

We can initialize the array with a specific size, or initialize the contents of the array by specifying a value. You may use a set of arrays. In fact, two-dimensional arrays can also do the same, 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

We should use the reduce method to quickly find the 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 about numbers or object arrays

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 from the array to imaginary values

Fake values like 0 , undefined , null , false , "" , '' can be easily filtered out by the following techniques.

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 count the frequency of certain special words by creating an object or Map.

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}

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. Ternary operators are 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!"

9. Comparison of cyclic 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 it.
forEach , for...of get the element directly.
forEach can also get the index, but not for...of

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 functions

Arrow function expressions are an alternative to traditional function expressions, but they are restricted and cannot be used in all situations. Because they have a 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
"

13. 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

Remainder and expansion grammar

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

// 输出: 6

with

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 deconstruction to exchange two numbers

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

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

19. Single-line palindrome count check

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

20. Convert Object attributes to attribute 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]

~End, I’m Xiaozhi, see you next time!

code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://dev.to/techygeeky/top-20-javascript-ips-and-tricks-to-increase-your-speed-and-efficiency-283g

comminicate

The article is continuously updated every week, you can search on search for 161832995ce579 [Great Move to the World] Read it for the first time and reply to [Benefits] are multiple front-end videos waiting for you on , this article GitHub 161832995ce580 https://github.com/qq449245884/xiaozhizhi has been included, welcome to Star.