Javascript high-order techniques [array]
1. Fastest generation of list of [1,2,3,..., n]
It is very fast to generate numbers by using the subscript index of the list
Array(10).fill(true).map((x,i)=>i+1); > (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
It can also be seen that Array(n).fill(1) can be used to quickly build a list with length n;
Similarly, odd and even sequences can be constructed in this way, and many regular sequences based on natural numbers can be generated in this way
2. Disrupt list
When using sort method to quickly sort, a random quantity is introduced... Hehe
const list = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; list.sort(()=>Math.random()-0.5) > (8) [120, 122205, 458, 400, 5, -215, -85411, 228]
3. List aggregation
Array.prototype.reduce is an algorithm for summarizing lists (inputting multiple elements and outputting a value), such as summation of numeric lists:
list.reduce((sum, curr)=>sum+curr,0)
4. List traversal replaces circular statements
In functional programming, Array foreach, map, filter, some, every and find can be used to replace the traditional for loop and while loop, which is not only more elegant, but also improves a certain efficiency;
5. The fastest way to construct a circular linked list
Execute list.push(list.shift()) each time; Then visit the list[0] and directly realize the circular linked list without additional code. Handsome!
const list = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; list.push(list.shift()); list[0]; > 458 list.push(list.shift()); list[0]; > 120 list.push(list.shift()); list[0]; > -215
Again, you don't have to judge the end of the index and change it to 0
6. Dictionary key value pairs replace switch statements
Replacing switch and if else statements with dictionaries is also one of the concepts of functional programming
const day = 'Monday';
({
'Monday':()=>{},
'Wednesday':()=>{},
'Friday':()=>{},
'default':()=>{},
})[ day || 'default' ];
7. ES6,7,8,9,10,11 a ton of sugar
Needless to say, ecmascript has too many coquettish syntax candy. Maybe this is why the front-end community loves JS. Go to MDN and find it yourself
8. JS self righteous truth and false
Truth refers to a value whose converted value is true in the context of a Boolean value.
All values are true unless they are defined as false (i.e. except false, 0, "", null, undefined and NaN).
The example of true value in JS is as follows (it will be converted to true, and the code segment after if will be executed):
if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
False (virtual value) is a value that has been determined to be convertible to 'false' in the Boolean context.
Use Type Conversion to convert a value to a Boolean value in the context where a Boolean value is required, such as in a conditional statement or a loop statement
Example of false value in JavaScript (convert false value to false through if code segment):
if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all)
However, I do not recommend using logic or and logic to judge truth and false in the production environment, because sometimes people think that 0 is meaningful and [] is meaningless. However, in JS, the judgment of the truth of 0 and [] is opposite
9. Using Set to duplicate the list
[...new Set([42, 'foo', 42, 'foo', true, true])] > (3) [42, "foo", true]
10. Custom toJSON method (fuck prototype)
Assign some constructors of the standard library to toJSON method, so that custom JSON can be generated when JSON.stringify, rather than empty, which will be very useful when http transmission
Date.prototype.toJSON = function () {
return this.getTime();
}
Function.prototype.toJSON = function () {
return this.toString();
}
RegExp.prototype.toJSON = function () {
return this.toString();
}
JSON.stringify([new Date(),Array, /.*/]);
> "[1559795757062,"function Array() { [native code] }","/.*/"]"
11. dom data binding using getter s and setter s
Portal: getter, setter;
12. Using template string to implement html and css template engine
const unfold = list => list.map(li => `
<li>${li.name}</li>`).join('');
// Export module
module.exports = data => `
<html lang="en">
<head>
<title>${data.title}</title>
</head>
<body>
<h1>${data.h1}</h1>
<ul>${unfold(data.list)}</ul>
</body>
</html> `;
The node module above is the HTML template engine, which can perfectly replace various products on the market, including ejs,php,jsp and Vue scaffold. The happiest thing is that you don't have to learn their syntax and use ES6
You can customize your favorite syntax by using the template string