Javascript skills

Reference links: mp.weixin.qq.com/s/BPhaavjnU…

  1. Declare and initialize arrays

We can initialize the array with a specific size, or we can initialize the contents of the array by specifying a value. You might use an array, but you can also do this for a two-dimensional array, as follows:

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
Copy the code
  1. Summation, minimum and maximum

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);
// Output: 35

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

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

3. Sort arrays of strings, numbers, or objects

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

// Sort the string array
const stringArr = ["Joe"."Kapil"."Steve"."Musk"]
stringArr.sort();
/ / output
(4) ["Joe"."Kapil"."Musk"."Steve"]

stringArr.reverse();
/ / output
(4) ["Steve"."Musk"."Kapil"."Joe"]
Copy the code
// Sort an array of numbers
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]
Copy the code
// Sort an array of objects
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
Copy the code

4. Filter virtual values from the array

False values like 0, undefined, null, false, “”, “” can be easily filtered out using the following techniques

const array = [3.0.6.7.' '.false];
array.filter(Boolean);


/ / output
(3) [3.6.7]
Copy the code
  1. Use logical operators to handle cases that require conditional judgment
function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// If arg1 has no value, the default value is 10
}

let foo = 10;  
foo === 10 && doSomething(); 
// If foo equals 10, doSomething() is executed;
// Output: 10

foo === 5 || doSomething();
// is the same thing as if (foo ! = 5) then doSomething();
// Output: 10
Copy the code
  1. Remove duplicate value
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 the code
  1. Create a counter object or Map

In most cases, you can create an object or Map to count the frequency of a particular word.

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}
Copy the code

or

const countMap = new Map(a);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}
Copy the code
  1. Ternary operators are cool
function Fever(temp) {
    return temp > 97 ? 'Visit Doctor! '
      : temp < 97 ? 'Go Out and Play!! '
      : temp === 97 ? 'Take Some Rest! ';
}

/ / output
Fever(97) :"Take Some Rest!" 
Fever(100) :"Visit Doctor!"
Copy the code
  1. Comparison of cyclic methods
for 和 for. In gets the index by default, but you can use arr[index].for. In also accepts non-numbers, so avoid using it. forEach,for. Of directly gets the element. ForEach can also get indexes, butfor. Of not.Copy the code
  1. Merging 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' 
 };

constsummary = {... user, ... college, ... skills};// Merge multiple objects
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"
Copy the code
  1. Arrow function

Arrow function expressions are an alternative to traditional function expressions, but they are limited and cannot be used in all cases. Because they have lexical scope (parent scope) and do not have their own this and argument, they refer to the environment that defines them.

const person = {
name: 'Kapil'.sayName() {
    return this.name;
    }
}
person.sayName();
/ / output
"Kapil"
Copy the code

But use the arrow function

const person = {
name: 'Kapil'.sayName : () = > {
    return this.name;
    }
}
person.sayName();
// Output
"
Copy the code
  1. Optional link chain
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
Copy the code

Shuffle an array

Utilize the built-in math.random () method.

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]
/ / output
(9) [4.1.7.5.3.8.2.9.6]
Copy the code

Double question mark grammar

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

const baz = 0 ?? 42;
// Output: 0
Copy the code

16. Default parameters

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

// Output: 4
Copy the code
  1. Convert decimal to binary or hexadecimal
const num = 10;

num.toString(2);
// Output: "1010"
num.toString(16);
// output: "a"
num.toString(8);
// output: "12"
Copy the code
  1. Use deconstruction to swap two numbers
let a = 5;
let b = 8;
[a,b] = [b,a]

[a,b]
/ / output
(2) [8.5]
Copy the code
  1. Single line palindrome check
function checkPalindrome(str) {
  return str == str.split(' ').reverse().join(' ');
}
checkPalindrome('naman');
// Output: true
Copy the code

20. Convert the Object property to an array of properties

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 the code