Javascript high-order techniques [array]

Keywords: Javascript Algorithm quick sort

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

> (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];

> (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];

> 458
> 120
> -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';
})[ 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

[ 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 => => `
// Export module
module.exports = data => `
  <html lang="en">
  </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

Similarly, CSS and other types of markup languages can be used in this way without relying on third-party packages

Posted by cirko on Fri, 03 Dec 2021 08:29:32 -0800