javascript practical writing summary

To Boolean type

!!'a'

With two negations, you can cast to Boolean type.

 

Transfer Number type

  // String Convert to Number
  console.log(+'45');
  // Date output timestamp
  console.log(+new Date);

 

parseInt

~~, which also converts strings to numeric types. Round down.

  // ~~Convert string to numeric type, round down
  console.log(~~3.14159); //3
  console.log(~~'5.678'); //5
  console.log(-2.33 | 0 );  //-2
  console.log(2.33 >> 0 ); //2

The principle is that ~ is an operation called bitwise negation, which will return the inverse of the value. Two negations are the original number. |Is a bit operator. If one of the two bits is 1, the result will be 1. Otherwise, it will be 0. >>Operator performs a signed shift right operation. All binary operations. The reason is that the number in JavaScript is of double type, which needs to be converted to int when operating in place.

 

Hex

Hexadecimal operation. It's actually a Array.prototype.toString(16) Usage of
It must be the color of CSS to see the word.

It can be random

console.log((~~(Math.random()*(1<<24))).toString(16)); 

«
Shift left operation, shift the value binary to the left
Explain the above 1 < < 24 operation
In fact, 1 moves 24 bits left. 000000000000000000000001 moved 24 bits to the left and became 100000000000000000000

 

Short circuit expression, discard if else

Reverse example:

if () { 
// ... 
} else if () { 
// ... 
} else { 
// ... 
}

Use|and & & to simplify if else. Sometimes the if else pattern can be simplified by using the!! operator. For example:

let a = b || 1;//b It's true, a=b;b False, a=1; 
let c = b && 1;//b It's true, c=1;b False, c=b; 
// use!!Symbol 
let isValid = !!(value && value !== 'error');

Another undefined

let data = void 0; // undefined

 

Keep the decimal point of the specified number of digits

let num = 2.443242342; 
num = num.toFixed(4); //"2.4432"

Note that the toFixed() method returns a string rather than a number.

 

Single line write a rating component

let rate1 = 1; 
let star1 = "★★★★★☆☆☆☆☆".slice(5 - rate1, 10 - rate1);//"★☆☆☆☆"
console.log(star1);
let rate2 = 2; 
let star2 = "★★★★★☆☆☆☆☆".slice(5 - rate2, 10 - rate2);//"★★☆☆☆"
console.log(star2);
let rate3 = 3; 
let star3 = "★★★★★☆☆☆☆☆".slice(5 - rate3, 10 - rate3);//"★★★☆☆"
console.log(star3);
let rate4 = 4; 
let star4 = "★★★★★☆☆☆☆☆".slice(5 - rate4, 10 - rate4);//"★★★★☆"
console.log(star4);
let rate5 = 5; 
let star5 = "★★★★★☆☆☆☆☆".slice(5 - rate5, 10 - rate5);//"★★★★★"
console.log(star5);

 

Money formatting

let cash = '1234567890'
let num = cash.replace(/\B(?=(\d{3})+(?!\d))/g, ',');//"1,234,567,890" 
console.log(num);

//Irregular elegant implementation 
function formatCash(str) { 
 return str.split('').reverse().reduce((prev, next, index) => { 
 return ((index % 3) ? next : (next + ',')) + prev 
 }) 
} 
let num2 = formatCash(cash);//"1,234,567,890"
console.log(num2);

 

Deep copy of standard JSON

let a = { 
 a1: 1, 
 b1: { c: 1, d: 2 } 
}; 
let b=JSON.parse(JSON.stringify(a)); 
console.log(b);//{a1: 1, b1: {...}}

 

Array de duplication

Using Set to remove weight and compare cattle in ES6

let array=[1, "1", 2, 1, 1, 3]; 
//Extended operator(...)Internal use for...of loop 
let arr1 = [...new Set(array)];//(4) [1, "1", 2, 3]
console.log(arr1);

//utilize Array.from take Set Structure to array 
let arr2 = Array.from(new Set(array));//(4) [1, "1", 2, 3]
console.log(arr2);

 

Get the maximum and minimum values in the array

Math.max Method can find the maximum number of given parameters.

console.log(Math.max('1','2','3.1','3.2'));//3.2 
console.log(Math.min(1,0,-1));//-1

But if it's an array, it can't be called like this. The apply method is used. Function.apply() is an OOP feature of JS, which is generally used to simulate the purpose of inheriting and extending this. All functions have the method of "apply" (scope chain, parameter). When the scope chain is null, it defaults to the above. The "parameter" of this function receives an array.

let arr = ['1','2','3.1','3.2',0,-1]; 
//use apply method 
console.log(Math.max.apply(null, arr));//3.2 
console.log(Math.min.apply(Math, arr));//-1 
//Using extended operators 
console.log(Math.max(...arr));//3.2 
console.log(Math.min(...arr));//-1

 

IIFE

(function(arg) {
 // do something
})(arg)

The practical value is to prevent the overall pollution.

 

Event

Write a counter

By creating a closure, encapsulate the times in it, and then return the function.

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  </head>
  <body>
    <button class="foo">click me</button>
  </body>
</html>

<script>

let foo = document.querySelector('.foo')
foo.addEventListener('click', (function() {
 var times = 0
 return function() {
  times++
  console.log(times)
 }
})(), false)

</script>

Tags: Javascript JSON

Posted on Mon, 01 Jun 2020 02:00:15 -0700 by sazzie