⭐

First, operation method

The basic operations on arrays can be summarized as add, delete, modify, and search. It is important to pay attention to which methods change the original array and which methods do not.

increase

There are four methods of adding objects, the first three of which change the array, and the fourth of which does not.

push()
unshift()
splice()
concat()

push

The push() method adds one or more elements to the end of an array and returns the array’s new length. This method changes the original array.

const arr = [1.2.3]
const length = arr.push(4.5)
console.log(length) / / 5
console.log(arr)    // [1, 2, 3, 4, 5]
Copy the code

unshift

The unshift() method adds one or more elements to the beginning of an array and returns the array’s new length. This method changes the original array.

const arr = [1.2.3]
const length = arr.unshift(4.5)
console.log(length) / / 5
console.log(arr)    // [4, 5, 1, 2, 3]
Copy the code

splice

The splice() method modifies an array by deleting or replacing existing elements or adding new ones in place, and returns the modified contents as an array. This method changes the original array.

We pass in three arguments: the starting subscript, 0 (the number of elements to delete), and the element to insert.

const arr = [1.2.3]
const changed = arr.splice(0.0.4)
console.log(changed) / / []
console.log(arr)     // [4, 1, 2, 3]
Copy the code

You can also insert multiple elements

const arr = [1.2.3]
const changed = arr.splice(0.0.4.5.6)
console.log(changed) / / []
console.log(arr)     // [4, 5, 6, 1, 2, 3]
Copy the code

concat

The concat() method is used to merge two or more arrays, returning a new array. This method does not change the original array.

const arr = [1.2.3]
const arr2 = arr.concat([4.5.6])
console.log(arr2)  // [1, 2, 3, 4, 5, 6]
console.log(arr)   / / [1, 2, 3]
Copy the code

delete

There are four types of deletion methods, the first three of which change the array, and the fourth of which does not change the array.

pop()
shift()
splice()
slice()

pop

The pop() method removes the last element from the array and returns the value of that element. This method changes the original array.

const arr = [1.2.3]
const item = arr.pop()
console.log(item)  / / 3
console.log(arr)   / / [1, 2]
Copy the code

shift

The shift() method removes the first element from the array and returns the value of that element. This method changes the original array.

const arr = [1.2.3]
const item = arr.shift()
console.log(item)  / / 1
console.log(arr)   / / [2, 3]
Copy the code

splice

Pass in two arguments, the starting position subscript and the number of elements to delete. This method changes the original array.

const arr = [1.2.3]
const changed = arr.splice(0.1)
console.log(changed) / / [1]
console.log(arr) / / [2, 3]
Copy the code

Deleting multiple elements

const arr = [1.2.3]
const changed = arr.splice(0.3)
console.log(changed) / / [1, 2, 3]
console.log(arr) / / []
Copy the code

slice

The slice() method is used to create a new array containing one or more elements of the original array. This method does not change the original array.

The new array returned is determined by the parameters begin and end (including begin, but not end).

const arr = [1.2.3.4]
const arr1 = arr.slice(1)  // Only one argument is passed. End defaults to arr.length
console.log(arr1) / / [2, 3, 4]
console.log(arr) // [1, 2, 3, 4]
Copy the code

const arr = [1.2.3.4]
const arr1 = arr.slice(1.2)
console.log(arr1) / / [2]
console.log(arr) // [1, 2, 3, 4]
Copy the code

change

splice

Three arguments are passed in: the starting position subscript, the number of elements to delete, and any number of elements to insert. This method changes the original array.

const arr = [1.2.3]
const changed = arr.splice(0.1.4)
console.log(changed) / / [1]
console.log(arr) / / [4, 2, 3]
Copy the code

check

That is, find an element and return its coordinates or its value. None of the lookup methods change the original array.

indexOf()
includes()
find()

indexOf

The indexOf() method returns the first index in the array where a given element can be found, or -1 if none exists.

const arr = [1.2.3.4.3]
arr.indexOf(3)   // 2 if there are duplicate elements, return the first index found
arr.indexOf(100) // -1
Copy the code

includes

The includes() method is used to determine whether an array contains a specified value, returning true if it does and false otherwise.

const arr = [1.2.3.4.3]
arr.includes(2)   // true
arr.includes(100) // false
Copy the code

find

The find() method returns the value of the first element in the array that satisfies the provided test function. Otherwise return undefined.

The elements in the array are reference types. If you change the elements found, the array will change.

const arr = [
  {
    name: 'lin'.age: 18
  },
  {
    name: 'liu'.age: 25}]const found = arr.find(item= > item.name === 'lin')
console.log(found)
found.age = 20   // Change the element found, the original array will change
console.log(arr)
arr.find(item= > item.name === 'xxx') // undefined
Copy the code

findIndex

The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.

const arr = [
  {
    name: 'lin'.age: 18
  },
  {
    name: 'liu'.age: 25
  }
]

arr.findIndex(item= > item.name === 'lin')  / / 0
arr.findIndex(item= > item.name === 'xxx')  // -1
Copy the code

Second, traversal method

Common ways to iterate over an array are the following, none of which changes the original array.

forEach()
filter()
map()
some()
every()

forEach

The forEach() method performs the given function once on each element of the array. Returns the undefined

const arr = ['a'.'b'.'c']
const res = arr.forEach((item, index, arr) = > { // The res value is undefined
  // do something
})  
Copy the code

filter

The filter() method creates a new array containing all the elements of the test implemented through the provided function. Used to filter array elements.

const arr = [1.2.3.4.5.4.3.2.1]
const res = arr.filter((item, index, array) = > item > 2)
console.log(res) // [3, 4, 5, 4, 3]
Copy the code

map

The map() method runs the passed function on each item of the array, returning an array of the results of each function call.

const arr = [1.2.3]
const res = arr.map((item, index, array) = > item * 2)
console.log(res) / / (2, 4, 6]
Copy the code

some

The some() method runs the passed function on each item of the array, and returns true if one of the functions returns true.

const arr = [1.2.3]
const res = arr.some((item, index, array) = > item > 2)
console.log(res) // true
Copy the code

every

The every() method, which runs the passed function on each item of the array, returns true if it returns true for each function.

const arr = [1.2.3]
const res = arr.every((item, index, array) = > item > 2)
console.log(res) // false
Copy the code

Third, sorting method

Arrays have two methods for reordering elements, both of which change the original array.

sort()
reverse()

sort

The sort() method sorts the elements of an array using an in-place algorithm and returns the array. The default sort order is built when converting elements to strings and then comparing their UTF-16 code unit value sequences.

const arr = [1.30.4.21.100000]
const arr1 = arr.sort()
console.log(arr)  // [1, 100000, 21, 30, 4]
console.log(arr1) // [1, 100000, 21, 30, 4]
Copy the code

The sort method receives a comparison function that determines which value should come first.

The comparison function format is as follows:

function compare(a, b) {
  if (a < b ) {           // By some sort of comparison, a is less than B
    return -1
  }
  if (a > b ) {
    return 1
  }
  // a must be equal to b
  return 0
}
Copy the code

To compare numbers instead of strings, the comparison function can be as simple as a minus b. The following function sorts arrays in ascending order

function compareNumbers(a, b) {
  return a - b
}
Copy the code

Just pass the comparison function as an argument to sort,

const numbers = [4.2.5.1.3]
numbers.sort(function (a, b) {
  return a - b
})
console.log(numbers) // [1, 2, 3, 4, 5]It can also be written as an arrow function:const numbers = [4.2.5.1.3]
numbers.sort((a, b) = > a - b)
console.log(numbers) // [1, 2, 3, 4, 5]
Copy the code

Objects can be sorted by an attribute:

const items = [
  { name: 'Edward'.value: 21 },
  { name: 'Sharpe'.value: 37 },
  { name: 'And'.value: 45 },
  { name: 'The'.value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros'.value: 37}]// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
})

// sort by name
items.sort(function (a, b) {
  const nameA = a.name.toUpperCase() // ignore upper and lowercase
  const nameB = b.name.toUpperCase() // ignore upper and lowercase
  if (nameA < nameB) {
    return -1
  }
  if (nameA > nameB) {
    return 1
  }

  // names must be equal
  return 0
})
Copy the code

reverse

Reversing an array element to return the inverted array changes the original array.

const arr = [1.2.3.4]
const arr1 = arr.reverse()
console.log(arr) // [4, 3, 2, 1]
console.log(arr1) // [4, 3, 2, 1]
Copy the code

Other methods

join

The join() method joins all the elements of an array into a string and returns the string. If the array has only one element, that element is returned without a delimiter.

const arr = [1.2.3.4]
arr.join()     / / 1, 2, 3, 4
arr.join('|')  / / 1 | 2 | 3 | 4

const arr1 = [1]
arr.join()  / / 1
Copy the code

Array.isArray

Array.isarray () is used to check whether the variable isArray

Array.isArray([1.2.3]) // true
Array.isArray({foo: 123}) // false
Copy the code

flat

The Flat () method recurses through the array of numbers at a specified depth and returns all the elements in a new array combined with the elements in the traversed subarray.

const arr1 = [1.2[3.4]]
arr1.flat() // [1, 2, 3, 4]

const arr2 = [1.2[3.4[5.6]]]
arr2.flat() // [1, 2, 3, 4, [5, 6]]

const arr3 = [1.2[3.4[5.6]]]
arr3.flat(2) // [1, 2, 3, 4, 5, 6]

// Use Infinity to expand nested arrays of any depth
const arr4 = [1.2[3.4[5.6[7.8[9.10]]]]]
arr4.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Copy the code

toString

ToString () returns a string representing the specified array and its elements.

const arr = [1.2.'a'.'1a']

console.log(arr.toString()) / / '1, 2, a, 1 a'
Copy the code

reduce

There are too many usages, which is a separate problem.

At the end

This is the 38th day of alyn’s continuous writing, exporting insight technology, goodbye!

The last:

How does JS accurately judge data types?

Next up:

“Front-end Daily Question (13)” describes some uses of the Array Reduce method

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

What are the common methods of arrays in JavaScript?

First, operation method

increase

push

unshift

splice

concat

delete

pop

shift

splice

slice

change

splice

check

indexOf

includes

find

findIndex

Second, traversal method

forEach

filter

map

some

every

Third, sorting method

sort

reverse

Other methods

join

Array.isArray

flat

toString

reduce

What are the common methods of arrays in JavaScript?

First, operation method

increase

push

unshift

splice

concat

delete

pop

shift

splice

slice

change

splice

check

indexOf

includes

find

findIndex

Second, traversal method

forEach

filter

map

some

every

Third, sorting method

sort

reverse

Other methods

join

Array.isArray

flat

toString

reduce

Related Posts

A Brief Analysis of Vue — The difference between Computed and Watch

Vue2.X CKEditor5 installation and Basic Use (2)

React official announcement v18 update