An introduction to arrays in JavaScript

Ps: I have learned the front end for some time, and found that MANY methods of JS array are not completely mastered, so I wrote this article as a consolidation review.Copy the code

There are two ways to create an array in Javascript:

1. Use the Array constructor

    let arr1 = new Array(a);// Create an empty array with length 0
    let arr2 = new Array(20); // Create an array of length 20 and values empty
    let arr3 = new Array(1.2.3.4);  // [1, 2, 3, 4]
Copy the code

2. Use array literals

    let arr4 = []; / / an empty array
    let arr5 = [1.2]; 
    let arr6 = ['h'.'e'.'y']; // An array of strings
Copy the code

2. Array methods

There are many methods for arrays, including methods on array prototypes and methods that inherit from Object objectsCopy the code

Array methods are divided into the following two categories according to whether the method changes the array itself:

1, change the original array method

1) Push: add one or more elements to the end of array, return value:
$\color{red}{array length changed}$

    let arr = [1.2.3.4]; 
    let len1 = arr.push(5);
    // arr = [1, 2, 3, 4, 5] len1 = 5
    let len2 = arr.push(6.7);
    // arr = [1, 2, 3, 4, 5, 6, 7] len2 = 7
Copy the code

2) pop: delete the last element of the array and reduce the length of the array by 1.
$\color{red}{deleted element}$; If the array is empty, the array is not changed, and the return value is:
$\color{red}{undefined}$

    let arr = [1.2.3.4];
    let ele = arr.pop();
    // arr = [1, 2, 3] ele = 4
Copy the code

3) unshift: Adds one or more elements to the first digit of an array.
$\color{red}{array length changed}$

    let arr = [1.2.3.4];
    let len1 = arr.unshift(0);
    // arr = [0, 1, 2, 3, 4] len1 = 5
    let len2 = arr.unshift(-2, -1);
    // arr = [-1, -2, 0, 1, 2, 3, 4] len2 = 7
Copy the code

Shift: delete the first element of the array and reduce the length of the array by 1
$\color{red}{deleted element}$; If the array is empty, no operation is performed and returns:
$\color{red}{undefined}$

   let arr = [1.2.3];
   let ele = arr.shift();
   // arr = [2, 3] ele = 1
Copy the code

5) Reverse: reverses the order in the array and returns:
$\color{red}{reverse order original array}$

   let arr = [1.2.3];
   let newArr = arr.reverse();
   // arr = [3, 2, 1] newArr = [3, 2, 1]
Copy the code

6) splice: This method adds or removes elements from an array, changes the array, and returns:
$\color{red}{new array of deleted elements}$If there are no deleted elements, return:
$\color{red}{empty array}$

Splice this method takes three arguments: arr.splice(index to truncate, number to truncate, new item to insert) the first parameter is mandatory, the second parameter is optional, and the third parameter is optional

   let arr = [1.2.3.4];
   let newArr1 = arr.splice(0);
   // Add a single argument from bit 0 to the last bit of the array (inclusive)
   // arr = [] newArr1 = [1, 2, 3, 4]
   let newArr2 = arr.splice(0.2);
   // Enter two parameters to capture two digits starting from the 0th bit
   // arr = [3, 4] newArr2 = [1, 2]
   let newArr3 = arr.splice(1.0.5);
   // Enter three arguments, but if the second argument is 0 (that is, no element in the array is deleted), the new element 5 is inserted at the subscript 1 of the array
   // arr = [1, 5, 2, 3, 4] newArr3 = []
   let newArr4 = arr.splice(0.2.5.80);
   // fill in three parameters to truncate the array from the position with subscript 0, and insert elements 5,80 at that position
   // arr = [5, 80, 3, 4] newArr4 = [1, 2]
Copy the code

7) sort: used to sort the array, change the original array. The return value:
$\color{red}{sort array}$

   let arr1 = ["B"."C"."A"];
   let newArr1 = arr1.sort();
   // When no arguments are received, the default sorting is in character coded order
   // newArr1 = ["A", "B", "C"]
   // But the default sort result is not what we expected, so we need to pass in a sort function. The arguments received by sort can also only be functions.
   let arr2 = [3.2.4.1];
   let newArr2 = arr2.sort(fn)
   function fn (a, b) {
   	return a - b; // Ascending sort
    return b - a; // Sort in descending order} if a > b, return a value greater than0When a < b, return a greater than0When a > b, return a value less than0When a < b, return a less than0When, a and B switch positions, that is, sort in ascending orderCopy the code

8) Fill: Fill/replace the value of the specified area of the array with a fixed value. The return value:
$\color{red}{change the original array}$

   let arr1 = [1.2.3.4];
   let newArr1 = arr.fill(6);
   // Replace everything in the array with 6 when filling in only one argument
   // arr1 = [6, 6, 6, 6] newArr1 = [6, 6, 6, 6]
   let arr2 = [1.2.3.4];
   let newArr2 = arr.fill(0.1);
   // Two arguments that replace 0 from 1 to the last element of the array
   // arr2 = [1, 0, 0, 0] newArr2 = [1, 0, 0, 0]
   let arr3 = [1.2.3.4];
   let newArr3 = arr.fill(1.1.3);
   // Replace elements with 1 starting at 1 and ending at 4 (not included)
   // arr3 = [1, 1, 1, 4];
Copy the code

2, do not change the original array method

1) concat: joins two or more arrays and returns:
$\color{red}{new array connected}$

    let arr1 = [1.2.3];
    let arr2 = [4.5};
    let newArr1 = arr1.concat(arr2);
    // newArr1 = [1, 2, 3, 4, 5]
    let arr3 = [6];
    let newArr2 = arr1.concat(arr2, arr3);
    // newArr2 = [1 , 2, 3, 4, 5, 6]
Copy the code

2) Join: Add all elements in the array to a string according to the specified delimiter (default, delimiter), do not change the original array, return value:
$\color{red}{a string}$

   let arr = [1.2.3];
   let newStr1 = arr.join();
   let newStr2 = arr.join('. ');
   // arr = [1, 2, 3]   newStr1 = "1,2,3"  newStr2 = "1.2.3"
Copy the code

3) slice: slice the value of the specified bit from the existing array, do not change the original array, but generate a new subarray, return value:
$\color{red}{new subarray}$.

   let arr = [1.2.3.4];
   let newArr1 = arr.slice(0.2);
   // Two arguments, the first one to truncate from the array digit, the second one to truncate to the array digit index (not included)
   // newArr1 = [1, 2] arr = [1, 2, 3, 4]
   let newArr2 = arr.slice(1);
   // The second argument can be omitted, which by default cuts to the last bit of the array
   // newArr2 = [2, 3, 4]
   let newArr3 = arr.slice(-3, -1);
   // Both arguments can be negative. When the argument is negative, it means that the calculation starts from the end of the array, i.e. -1 is the last element of the array and -2 is the penultimate element of the array.
   // newArr3 = [2, 3]
Copy the code

4) toString: Converts an array to a string. The return value:
$\color{red}{converted string}$

   let arr = [1.2.3];
   let newStr = arr.toString();
   // arr = [1, 2, 3] newStr = "1, 2, 3"
Copy the code

5) includes: checks whether the current array contains the specified value.
$\color{red}{Boolean}$

   let arr = [1.'2'.3];
   let res1 = arr.includes(1.1);
   // Enter two parameters. The second parameter indicates that the search starts from index 1
   // res1 = false
   let res2 = arr.includes(1);
   let res3 = arr.includes(2);
   // Enter only one parameter, indicating that the search starts from index 0
   // res1 = true res = false
Copy the code

6) indexOf: check whether the current array contains the specified value, return value:
$\color{red}{index of the first matching value}$; If no specified value is included, the return value is:
$\color{red}{-1}$

   let arr = [1.2.'3'];
   let res1 = arr.indexOf(1.2);
   // Fill in two parameters, the first parameter indicates the value to be searched, and the second parameter indicates that the search starts from array index 2
   // res1 = -1
   let res2 = arr.indexOf(1);
   let res3 = arr.indexOf(3);
   let res4 = arr.indexOf(2);
   // Enter only one parameter. The second parameter is searched from index 0 by default
   Res2 = 0, res3 = -1, res4 = 1
Copy the code

Array iteration methods: Each of the following methods takes a function as an argument

7) forEach: calls each element of the array and passes each element to the callback function. The return value:
$\color{red}{undefined;$

   let arr = [1.2.3.4];
   let res = arr.forEach( (item, index, arr) = > {
      // item: current element index: optional, current element index arr: optional, current element array
      // You can perform some of the same operations on each element in the array
   }, thisValue)
   // thisValue is normally passed to a function with the "this" value. This parameter is optional. The default value is undefined
   // res = undefiend
Copy the code

8) for… In: Can be used to iterate over a group of numbers or properties of an object.

   let arr = [1.2.3];
   for (let index in arr) {
     // This method iterates over the array index
     // do something
   }
Copy the code

9) for… Of: Can be used to iterate over a group of values.

   let arr = [1.2.3]
   for(let item of arr) {
     // This method iterates over an array of values
     // do something
   }
Copy the code

10) map: Process the elements in the same order as the original array. The return value:
$\color{red}{new array of processed elements}$Note: Nothing is done on an empty array

   let arr = [1.2.3];
   let res = arr.map( (item, index, arr) = > {
      // Receive the same parameters as forEach, except that there is a meaningful return value,
      return item ++;
   }, thisValue )
   // arr = [1,2,3] res = [2,3,4]
Copy the code

11) reduce: Receives a function as an accumulator, each value in the array (from left to right) starts to shrink, and returns the following value:
$\color{red}{total value}$

  let arr = [1.2.3.4];
  let res = arr.reduce( (total, num, index, arr) = > {
     // total: the value passed in initial
     // The other three parameters are the same as forEach
     return total + num;
  }, 0[initial] )
  // res = 10, 1+2+3+4.
Copy the code

12) Filter: Create a new array, the elements of the new array are all the elements in the original array that meet the criteria. The return value:
$\color{red}{new array}$. Nothing is done to an empty array

   let arr = [1.2.3.4];
   let res = arr.filter( (item, index, arr) = > {
      return item > 2;
   }, thisValue)
   // res = [2, 3]
Copy the code