Array is often used in the front-end work, but the array method is very many, many students do not know how to use the array method. So here I use what I learned to give you a summary of the common array methods!!

Change the original array

Pop () is 1, the Array.

Deletes the last element of an array. The return value is the deleted element

let arr = [1, 2, 3] let newArr = arr.pop() console.log(arr); //[ 1, 2 ] console.log(newArr); //3 Copy codeCopy the code
2, array.shift ()

Deletes the first element of an array. The return value is the deleted element

let arr = [1, 2, 3] let newArr = arr.shift() console.log(arr); //[ 2, 3 ] console.log(newArr); //1 copies the codeCopy the code

The Shift and POP methods require no arguments and can only delete one element at a time.

3, array.push ()

Add one or more new elements to the end of the array, and return the length of the new array

let arr = ['hello'] let newArr = arr.push('world', '!! ' ) console.log(arr); //[ 'hello', 'world' '!!' ] console.log(newArr); 3 Copy codeCopy the code
4, Array. The unshift ()

Returns the length of the new array by adding one or more new elements to the beginning of the array

let arr = ['world', '!!'] let newArr = arr.unshift('hello') console.log(arr); //[ 'hello', 'world', '!!' ] console.log(newArr); 3 Copy codeCopy the code
5, array.splice ()

Array.splice(index,length,item1,… ItemX) adds or removes elements from an array

parameter describe
index Mandatory. The index number of the starting position must be a number.
length Optional. Specify how many elements should be deleted. It has to be a number, but it can be a zero.
item1,…. itemX Optional. The new element to add to the array

Add, delete If the length is 0, it is added. No return value

let fruits = ["Banana", "Orange"]; let frs = fruits.splice(2, 0, "Lemon"); console.log(fruits); //[ 'Banana', 'Orange', 'Lemon'] console.log(frs); //[] Copy codeCopy the code

Replace, the index subscript existing elements, to add elements to the index subscript, that is, replace. The return value is the element to be replaced

let fruits = ["Banana", "Orange"]; let frs = fruits.splice(1, 1, "Lemon"); console.log(fruits); //[ 'Banana', 'Lemon'] console.log(frs); //['Orange'] copies the codeCopy the code

Delete, the return value is the deleted element

let fruits = ["Banana", "Orange"]; let frs = fruits.splice(1, 1); console.log(fruits); //[ 'Banana'] console.log(frs); //['Orange'] copies the codeCopy the code
6, Array. Sort ()

Sort the array.

English letters, in alphabetical order;

let letter = ['a', 'c', 'f', 'd', 'b', 'e'] letter.sort() console.log(letter); //['a', 'b', 'c', 'd', 'e', 'f'] copies the codeCopy the code

Chinese, sorted by UTF-16.

Number sort, can use a- B method for ascending sort, use B – A method for descending sort

Let arr = [4,10, 5, 7]; arr.sort((a,b)=>{ return a-b }); console.log(arr); //[4,5,7,10] copies the codeCopy the code
Let arr = [4,10, 5, 7]; arr.sort((a,b)=>{ return b-a }); console.log(arr); //[10,7,5,4] copies the codeCopy the code
7, Array. Reverse ()

Reverse the order of the elements in an array.

Common: Sort the array by sort (), then reverse ().

let letter = ['a', 'b', 'c', 'd'] letter.reverse() console.log(letter); ['d', 'c', 'b', 'a'] copies the codeCopy the code

2. Do not change the original array

1, array.toString ()

Convert an array to a string

let arr = ['hello', 'world'] let newArr = arr.toString() console.log(arr); //[ 'hello', 'world' ] console.log(newArr); //hello,world copies the codeCopy the code
2, array.foreach ()

Through the array

Arr. forEach(callback(currentValue [, index [, array]])[, thisArg]Copy the code

Callbacks are not executed for empty arrays. The most common method is to pass in item, which gets all the elements in the array, and index, which gets the index of the elements in the array. (Item (value) and index can be named by themselves, and many front-end engineers use these words by default in code semantics, taking elements and indexes.)

parameter describe
currentValue Yes, the current element in the array being processed.
index Optional, index value of the current element
array : Optional array object to which the current element belongs
thisArg Optional, used as the value of this when the callback function is executed. 
const array = ['a', 'b', 'c']; Array.foreach ((item, index) => {console.log(item) console.log(index)}Copy the code
3, array.map ()

The array_process () function returns a new element for each element in the array.

Empty arrays are not checked, just like forEach. If there is no return, newArr returns undefined

Arr. Map (function callback(currentValue[, index[, array]]{}Copy the code

CurrentValue: Mandatory. The current element in the array being processed.

Index: Optional. The index of the current element in the array

Array: Optional. The array object to which the current element belongs

const array = [6, 7, 8]; let newArr = array.map(item => { return item * 2 }) console.log(array); // [6, 7, 7] console.log(newArr); //[12, 14, 16] copy the codeCopy the code
4, array.filter ()

Filter array (array filter), create a new array that passes the test

Callback (Element [, index[, array]])[, thisArg]Copy the code
let ages = [32, 33, 16, 40]; let newAge = ages.filter(item => { return item >= 18; }) console.log(newAge); //[32, 33, 40] copy codeCopy the code
5, array.indexof ()

The return value is the index position of the first element found in the array; If none is found, -1 is returned

Arr.indexof (searchElement[, fromIndex]) copies the codeCopy the code

SearchElement: The element to find

FromIndex: Optional, starting the search. -1 indicates starting the search from the last element.

let array = [2, 5, 9]; array.indexOf(2); // 0 array.indexOf(2, -3); // 0 Copies the codeCopy the code
6, array.find ()

Returns the value of the first array element that passes the test — good for precision searching, performance-optimized elements

const arr = [
    {name:"Jim",age:"20"},
    {name:"Lily",age:"18"}
    ]
arr.find((item)=>{
    return item.age == '18'
})
//{name:"Lily",age:"18"}
Copy the code