preface

Recently, when writing business code, I suddenly found that the method memory of JS array is a little fuzzy, so I organized this article to review the methods of JS array, and classified them.

The stack method

ECMAScript gives arrays several methods (push(), pop()) that make them look like another data structure —– stacks.

    let stack = new Array(a);// First we create an array
    stack.push(1); / / into the stack
    stack.push(2);

    console.log(stack.toString()); / / 1, 2
    stack.push(2);  
    stack.push(4);
    let a = stack.pop(); / / out of the stack
    console.log(stack.toString()); / / 1,2,2
Copy the code

Queue method

We can also use shift() and pop() methods to simulate the implementation of queue data structures.

    let queue = new Array(a); queue.push(1);
    queue.push(2);
    queue.push(3);
    console.log(queue); //  [1, 2, 3]
    let b = queue.shift(); // Fetch the first item of the array
    console.log(b, queue);  / / 1 [2, 3]
    // Unshift does the opposite of shift as the name implies, inserting at the end of the array
    queue.unshift(4);
    console.log(queue); / / [4, 2, 3]
Copy the code

Sorting method

Introduces two array methods: Reverse () and sort(), both of which modify groups of elements and return the result.

  • Reverse () : Reverses the array.
  • Sort () : Sort the array in ascending order by default, passing in a comparator.
    let arr = [1.2.4.5.7.3.6];
    let reverseArr = arr.reverse();
    console.log(arr, reverseArr);  // [6, 3, 7, 5, 4, 2, 1] ，[6, 3, 7, 5, 4, 2, 1]
    let sortArr = arr.sort((a, b) = > a - b);  // Pass in a comparator
    console.log(arr, sortArr); [1, 2, 3, 4, 5, 6, 7], [1, 2, 3, 4, 5, 6, 7]
Copy the code

Operation method

  • Concat (): You can create a new array based on all the elements of an existing array
  • Slice (): Used to create a new array containing one or more elements of the original array. This operation does not affect the original array
  • Splice (): The main purpose is to insert elements in the middle of an array (it can delete, insert, and replace elements)
    let concatArr1 = ['a'.'b'];
    let concatArr2 = concatArr1.concat('c'['d'.'e']);
    console.log(concatArr1, concatArr2); // ["a", "b"],["a", "b", "c", "d", "e"]
    // slice(a,b): slice elements from a to B
    let sliceArr = concatArr2.slice(1.3);
    console.log(sliceArr); // ["b", "c"]
    // Two arguments: the location of the first element to be deleted and the number of elements to be deleted
    let spliceRes = concatArr2.splice(1.1);
    console.log(spliceRes, concatArr2);  // ["b"],["a", "c", "d", "e"]
    let spliceRes2 = concatArr2.splice(1.1.'b');
    console.log(spliceRes2, concatArr2);  // ["c"] ,["a", "b", "d", "e"]
Copy the code

Search and location methods

Here are three strictly equal search methods: indexOf(), lastIndexOf(), and includes(), each of which takes two arguments: the element to look for & an optional starting search address

    let indexArr = [1.3.2.5.6.7.2.1];
    console.log(indexArr.indexOf(2));  // 2 Returns the index of the matching item
    console.log(indexArr.lastIndexOf(2)); // 6 Returns the index of the matching item
    console.log(indexArr.includes(6)); // true whether to contain the specified element
    console.log(indexArr.includes(12)); // false 
Copy the code

Next, find() and findIndex(), which pass in a function that returns true, indicating that a match has been hit. Once a match is found, the search does not continue

    let people = [
        { name: 'a'.age: 21 },
        { name: 'b'.age: 22 },
        { name: 'c'.age: 25},];console.log(people.find((item, index, array) = > item.age > 21)); // {name: "b", age: 22}
    console.log(
        people.findIndex((item, index, array) = > item.age > 21) / / 1
    );
Copy the code

An iterative approach

Each of these methods passes a function and does not affect the original array

  • Every (): This method returns true if each item returns true
  • Filter (): The items that return true are returned as arrays
  • ForEach (): Runs the passed function on each item of the array, with no return value
  • Map (): Returns an array of the results of each function call
  • Some (): This method returns true if one of the functions returns true
   let numbers = [1.3.5.1.6.2.6.7.8.9];
   let everyRes = numbers.every((item, index, array) = > item > 2);
   console.log(everyRes); // false

   let someRes = numbers.some((item, index, array) = > item > 2);
   console.log(someRes); // true

   let filterRes = numbers.filter((item, index, arr) = > item > 4);
   console.log(filterRes); // [5, 6, 6, 7, 8, 9]

   let mapRes = numbers.map((item, index, array) = > item * 2);
   console.log(mapRes); // [2, 6, 10, 2, 12, 4, 12, 14, 16, 18]

   numbers.forEach((item, index, array) = > {
     // Perform some operations here
   });
Copy the code

Merge method

This introduces two methods: reduce() and reduceRight(), both of which iterate over all the items in the array and build a final return value based on this, both of which take two parameters: the merge function that runs for each item, the initial value of the merge value (pre) (optional), and the function that is passed in takes four parameters: The last merge value, the current item, the index of the current item, and the array itself.

    let sum = numbers.reduce((pre, cur, index, array) = > pre + cur);
    console.log(sum); / / 48
    let sum1 = numbers.reduce((pre, cur, index, array) = > pre + cur, 1);
    console.log(sum1); / / 49
Copy the code

The last

All of the methods in the array have been covered by this point. There have been many articles about these methods, and the main purpose of this article is to review them for myself. There is no end to learning. While you are constantly learning cutting-edge technologies, you should always review the basics