Keep these 18 array manipulation apis in mind for efficient development

This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Change the array: push(), unshift(), pop(), shift(), reverse(), splice(), sort()

Append push(value) to end of array

If we add value to the end of the array, the return value is the length of the updated array, which changes the original array

// Base
let a = [1.2.3.4.5]
let result = a.push(1)
console.log(result)    / / 6
console.log(a)         // [1, 2, 3, 4, 5, 1]

// More
result = a.push('a'.'b')      // Multiple values can be added at once
console.log(result)            / / 8
console.log(a)                 // [1, 2, 3, 4, 5, 1, 'a', 'b']
Copy the code

Unshift (value)

Add value to the beginning of the array and return the updated length of the array, changing the array

// Base
let a = [1.2.3.4.5]
let result = a.unshift(1)
console.log(result)        / / 6
console.log(a)             // [1, 1, 2, 3, 4, 5]

// More
result = a.unshift('a'.'b')  // Multiple values can be added at once
console.log(result)           / / 8
console.log(a)                // ['a', 'b', 1, 1, 2, 3, 4, 5]
Copy the code

Delete the end element pop()

Deleting the last element in an array returns the deleted element, which changes the array

// Base
let a = [5]
let result = a.pop()
console.log(result)  / / 5
console.log(a)       / / []

// More
result = a.pop()     // When the array is empty, the pop() method returns undefined
console.log(result)  // undefined
console.log(a)       / / []
Copy the code

Remove the first element shift()

Deleting the first element in an array returns the deleted element, which changes the array

// Base
let a = [5]
let result = a.shift()
console.log(result)  / / 5
console.log(a)       / / []

// More
result = a.shift()     // If the array is empty, shift() returns undefined
console.log(result)    // undefined
console.log(a)         / / []
Copy the code

Array to string join(value)

Concatenate an array into a string using value. The return value is the concatenated string, leaving the array unchanged

// Base
let a = [1.2.3.4.5]
let result = a.join()
console.log(result)   / / 1, 2, 3, 4, 5
result = a.join(' ')
console.log(result)   / / 12345
result = a.join(', ')
console.log(result)   / / 1, 2, 3, 4, 5
result = a.join('&')
console.log(result)   / / 1 & 2 & 3 & 4 & 5

// More
let obj = {
    toString: function () {
        console.log(The toString() method is called! ')
        return 'a'
    },
    toValue: function () {
        console.log('The toValue() method is called! ')
        return 'b'
    }
}
result = a.join(obj)  // When we use an object, we call the object's own toString method. We override toString here
// The toString() method is called
console.log(result)  // 1a2a3a4a5
console.log(a)       // [1, 2, 3, 4, 5]

The opposite of the join() method in the array is the split() method of the string
console.log(result.split('a'))  // ["1", "2", "3", "4", "5"]
Copy the code

Reverse array ()

Invert the array. The return value is the inverted array, which changes the original array

// Base
let a = [1.2.3.4.5]
let result = a.reverse()
console.log(result)   // [5, 4,3,2,1]
console.log(a)        // [5, 4,3,2,1]

// More
a = [1[2.3], [4.5]]
result = a.reverse()
console.log(result)   // [[4, 5], [2, 3], 1]
console.log(a)        // [[4, 5], [2, 3], 1]
// You can see that the inversion here is only the first level based on the array, which is shallow

// A simple deep inversion needs to be implemented recursively
const deepReverse = (array) = > {
  let temp = array.reverse()
  temp.forEach(v= > {
    if (Object.prototype.toString.call(v) === '[object Array]') {
      deepReverse(v)
    }
  })
  return temp
}
a = [1[2.3], [4.5]]
result = deepReverse(a)
console.log(result)  // [[5, 4], [3, 2], 1]
Copy the code

Get subarray Slice (star,end)

Gets a subarray containing the index star to end, without end, and returns the subarray without changing the original array

// Base
let a = [1.2.3.4.5]
let result = a.slice(2.4)
console.log(result)  / / [3, 4]
console.log(a)       // [1, 2, 3, 4, 5]

// More
console.log(a.slice(1))       // if [2, 3, 4, 5] has only one parameter and is not less than 0, then the index is truncated to the end of the array
console.log(a.slice(-1))      / / [5] there is only one parameter, and less than zero, from the bottom | start | intercept to the end of the array
console.log(a.slice(-1.1))   // [] reverse interception, invalid, return empty array
console.log(a.slice(1, -1))   // [2, 3, 4] [2, 3, 4
console.log(a.slice(-1, -2))  // [] reverse interception, invalid, return empty array
console.log(a.slice(-2, -1))  // [4] The last digit is intercepted to the last digit
Copy the code

Take a segment/insert the array splice

splice(index, count, value1,value2,….) Insert value1, value2, etc. into the array. The return value is the deleted array, and the original array value is changed

// Base
let a = [1.2.3.4.5]
let result = a.splice(1.2.0)
console.log(result)  / / [2, 3]
console.log(a)  // [1, 0, 4, 5]

// More
a = [1.2.3.4.5]
console.log(a.splice(-2))  / / [4, 5] when parameters for a single and less than zero, intercepts from reciprocal | index | to the end of the array
console.log(a)             / / [1, 2, 3]

a = [1.2.3.4.5]
console.log(a.splice(-1))  / / [5] when parameters for a single and less than zero, intercepts from reciprocal | index | to the end of the array
console.log(a)             // [1, 2, 3, 4]

a = [1.2.3.4.5]
console.log(a.splice(0))  // [1, 2, 3, 4, 5] When the argument is single and not less than 0, the index bit is truncated to the end of the array
console.log(a)            / / []

a = [1.2.3.4.5]
console.log(a.splice(1))  // [2, 3, 4, 5] When the argument is single and not less than 0, the index bit is truncated to the end of the array
console.log(a)            / / [1]

a = [1.2.3.4.5]
console.log(a.splice(-1.2))   // [5] Select two elements from the last digit
console.log(a)                 // [1, 2, 3, 4]

a = [1.2.3.4.5]
console.log(a.splice(0.2.'a'.'b'.'c'))  / / [1, 2]
console.log(a)  // ['a', 'b', 'c', 3, 4, 5]
Copy the code

Sort () by ASCII

Sort an array by comparing the size of the ASCII code rather than the numeric value. Return the sorted array, changing the original array

// Base
let a = [31.22.27.1.9]
let result = a.sort()
console.log(result)  // [1, 22, 27, 31, 9]
console.log(a)  // [1, 22, 27, 31, 9]

// More
a = ['c'.'ac'.'ab'.'A1'.'1c'.13.12.'13'.'12'.'3'.'2'.'1b'.'1a'.1.'aa'.'a'.3.'b'.2]
a.sort()
console.log(a) // [1, 12, "12", 13, "13", "1a", "1b", "1c", "2", 2, "3", 3, "A1", "a", "aa", "ab", "ac", "b", "c"]
// Sort sorts by the ASCII code value of each character, not by the size of the value.
// Compare the ASCII values of the first digit. If the ASCII values of the first digit are the same, compare the ASCII values of the second digit, and so on
/ / ASCII codes (http://tool.oschina.net/commons?type=4 + K)
a = [31.22.27.1.9]
a.sort((a, b) = > {
  return a - b
})
console.log(a)  // [1, 9, 22, 27, 31] in positive order of numeric size

a = [31.22.27.1.9]
a.sort((a, b) = > {
  return b - a
})
console.log(a)  // [31, 27, 22, 9, 1] in reverse order of numeric size
Copy the code

Array toString toString()

Change the array to a comma-concatenated string. Return the concatenated string without changing the array

Js // Base let a = [1, 2,3,4,5] let result = a.tostring () console.log(result) // 1,2,3,4,5 console.log(a) // [1, 2,3,4,5] // in addition to the toString() method, the String() method can also convert arrays to strings result = String(a) console.log(result) // 1,2,3,4,5Copy the code

Find index lastIndexOf(value) in reverse order

If value is found, return the first matched index. If value is not found, return -1, do not change the original array

```js
// Base
let a = [1, 2, 3, 2, 5]
let result = a.lastIndexOf(2)
console.log(result)  // 3
console.log(a)  // [1, 2, 3, 4, 5]

result = a.lastIndexOf(6)
console.log(result)  // -1
console.log(a)  // [1, 2, 3, 4, 5]
``` 
Copy the code

Concatenate into a new array concat(value)

Concatenate an array or value into a new array, returning the new array without changing the original array

```js // Base let a = [1, 2], b = [3, 4], c = 5 let result = a.concat(b, c) console.log(result) // [1, 2, 3, 4, 5] console.log(a) // [1, 2] // More b = [3, [4]] result = a.concat(b, c) console.log(result) // [1, 2, 3, [4], 5] Concat cannot flatline console.log(a) // [1, 2] 'Copy the code

Traversal array forEach()

To iterate over an array, run the given function on each item in the array. The default arguments are: iterate over the contents of the array, the index, and the array itself, and return no value

```js var arr = [1, 2, 3, 4, 5] arr.forEach(function (item, index, A) {the console. The log (item + '|' + index + '|' + (a = = = true))}) / / output is:  // 1|0|true // 2|1|true // 3|2|true // 4|3|true // 5|4|true ```Copy the code

Array mapping map()

Run the given function on each item in the array. The return value is the array of results after running the function, without changing the original array

```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.map(function (item, index, a) {
  return item * item
})
console.log(arr1)  // [1, 4, 9, 16, 25]
```
Copy the code

Array filter()

To filter, run a given function on each item in an array and return an array of values that meet the criteria, leaving the original array unchanged

```js
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr1 = arr.filter(function (item, index, a) {
  return index % 3 === 0 || item >= 8
})
console.log(arr1)  // [1, 4, 7, 8, 9, 10]
```
Copy the code

Do all elements satisfy the condition every()

Check whether each item in the array satisfies the condition, and return true only if all of the conditions are satisfied

```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.every(function (item, index, a) {
  return item < 10
})
console.log(arr1)  // true
var arr2 = arr.every(function (item, index, a) {
  return item < 3
})
console.log(arr2)  // false
```
Copy the code

One of these satisfies some()

Checks if there are any items in the array that satisfy the condition, and returns true if any of the items satisfy the condition

```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.some(function (item, index, a) {
  return item < 3
})
console.log(arr1)  // true
var arr2 = arr.some(function (item, index, a) {
  return item < 1
})
console.log(arr2)  // false
```
Copy the code

Includes (value)

Look for value in the array, return true if found, false if not

```js
const array1 = [1, 2, 3];

console.log(array1.includes(2));   // true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));  //  true

console.log(pets.includes('at'));   // false

```
Copy the code