🚀

This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

In the next article, we will explore the contents of JS arrays in detail. This article will cover the “Reverse and sort apis”, and the portal in the last article

reverse()

Function: invert the array as the name indicates, and the result is the inverted array (the original array is inverted).

Syntax: Inverted array = array.reverse ();

var arr = ['a'.'b'.'c'.'d'.'e'.'f'];
var result = arr.reverse(); 
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
​
/ / the result
arr =["f"."e"."d"."c"."b"."a"]
result =["f"."e"."d"."c"."b"."a"]
Copy the code

The sort () method

Sort is probably familiar to all of us, like in many languages, it’s an API for sorting, but it’s a little bit the same, but it’s a little bit different, so I’m going to talk about it.

Sort () : sort the elements of an array from smallest to largest (default: ascending).

With no arguments (in lexicographical order)

If you use the sort() method without a parameter, the default sort is Unicode, ascending.

String sort

let arr1 = ['e'.'b'.'d'.'a'.'f'.'c'];
​
let result = arr1.sort(); // Sort the array arr1
​
console.log('arr1 =' + JSON.stringify(arr1));
console.log('result =' + JSON.stringify(result));
​
/ / the result
arr1 =["a"."b"."c"."d"."e"."f"]
result =["a"."b"."c"."d"."e"."f"]
Copy the code

Digital sort

let arr2 = [5.2.11.3.4.1];
let result = arr2.sort(); // Sort the array arR2
console.log('arr2 =' + JSON.stringify(arr2));
console.log('result =' + JSON.stringify(result));
​
/ / the result
arr2 =[1.11.2.3.4.5]
result =[1.11.2.3.4.5]
Copy the code

In the above results, you will find that the numbers are not in order of size. No, of course not. Going back to the above definition, the JS sort is Unicode coded, and is lexicographical by default. So how do you sort by number? How do you do that? Keep reading.

When a parameter is used, the collation rule is customized

If we take a parameter in the sort() method, what are the parameters? What does it do?

We pass a callback function as an argument to sort() to specify the collation (just as we often write CMP functions to specify collation when writing C/C++). Two parameters need to be defined in the callback function. The browser will call the callback function using the elements of the array as arguments, respectively. So how do you prioritize? Don’t worry. Let’s talk slowly.

We determine the order of the elements based on the return value of the callback function:

• If a value greater than zero is returned, the elements are swapped
• If a value less than 0 is returned, the element position remains unchanged
• If a value equal to zero is returned, the two elements are considered equal and the positions are not swapped

If you just read the text, it might not be easy to understand, but let’s take a look at the following example, and you will certainly understand.

Digital ascending

Rough version

var arr = [5.2.11.3.4.1];
// Customize collation
var result = arr.sort(function (a, b) {
    if (a > b) {
        // If a is greater than B, switch the positions of A and B
        return 1;
    } else if (a < b) {
        // If a is less than b, the position is unchanged
        return -1;
    } else {
        // If a is equal to b, then the position is the same
        return 0; }});console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
/ / the result
arr = [1.2.3.4.5.11];
result = [1.2.3.4.5.11];
Copy the code

But we find that the above code is too verbose, and can be simplified as follows:

Simplified :(bubble sort)

let arr = [5.2.11.3.4.1];
// Customize collation
let result = arr.sort(function (a, b) {
    return a - b; // Arrange in ascending order
    // return b - a; // Arrange in descending order
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
Copy the code

The code above can also be written in ES6 form, changing function to arrow function, as follows.

ES6 :(arrow function)

let arr = [5.2.11.3.4.1];
// Customize collation
let result = arr.sort((a, b) = > {
    return a - b; // Arrange in ascending order
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
​
/ / optimization
let result = arr.sort((a, b) = > a - b);
Copy the code

The ES6 optimized version of the arrow function is the one we use the most in real-world development.

To keep the code simple and elegant, we will try to use the arrow function from ES6 whenever functions are involved in the following code.