Comprehensive array of common JS built-in functions (with detailed cases included)

Preface

In order to consolidate the knowledge learned, the author tried to start publishing some study note blogs to facilitate future review. Of course, it would also be great if it could help some newbies learn new technologies. The author is a rookie. If there are recording errors in the article, readers and friends are welcome to criticize and correct them.
(The reference source code of the blog can be found in the resources on my homepage. If you have any questions during the learning process, you are welcome to ask me in the comment area)

discover treasure

A few days ago I discovered a giant artificial intelligence learning website. It is easy to understand and humorous. I couldn’t help but share it with everyone. 【Treasure Entrance】.

JavaScript arrays provide many built-in functions for performing various operations such as adding, removing, finding, iterating, and transforming array elements. Some commonly used array functions include push(), pop(), shift(), unshift(), concat(), forEach(), map(), filter(), reduce(), etc.

1. every() detects whether each element of the array element meets the conditions

1. Example

Check whether all elements of the array ages are greater than 18:

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}

function myFunction() {
    
    
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

The output is:

false

2. Definition and usage

The every() method is used to detect whether all elements of the array meet the specified conditions (provided through the function)

The every() method detects all elements in an array using the specified function:

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测

如果所有元素都满足条件，则返回 true

Note: every() does not detect empty arrays

Note: every() does not change the original array

3. Grammar

array.every(function(currentValue,index,arr), thisValue)

4. Parameter description

5. Technical details

Return value: Boolean - returns true if all elements pass the test, false otherwise

2. filter() detects array elements and returns an array of all elements that meet the conditions

1. Example

Return all elements in the array ages that are greater than 18:

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}

function myFunction() {
    
    
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

The output is:

32,33,40

2. Definition and usage

The filter() method creates a new array. The elements in the new array are determined by checking all elements in the specified array that meet the conditions.

Note: filter() does not detect empty arrays

Note: filter() does not change the original array

3. Grammar

array.filter(function(currentValue,index,arr), thisValue)

4. Parameter description

5. Technical details

Return value: Returns an array containing all elements that meet the conditions. If there are no elements that meet the conditions, an empty array is returned.

3. find() returns array elements that meet the conditions passed in to the test (function)

1. Example

Get the value of the first element in the array whose value is 18 or greater:

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    
    
  return age >= 18;
}

function myFunction() {
    
    
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

2. Definition and usage

The ​find()​ method returns the value of the first element in the array that passes the test (provided as a function)

The ​find()​ method executes a function once for each element present in the array:

如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）

否则返回 undefined

Note: ​find()​ does not execute this function on empty arrays

Note: ​find()​ does not change the original array

3. Grammar

array.find(function(currentValue, index, arr), thisValue)

4. Parameter values

5. technical details

1. Return value: If any element in the array passes the test, return the array element value, otherwise return undefined

2. JavaScript version: ECMAScript 6

4. map() processes each element of the array through the specified function and returns the processed array

1. Example

Returns an array whose elements are the square roots of the original array:

var numbers = [4, 9, 16, 25];

function myFunction() {
    
    
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

The output is:

2,3,4,5

2. Definition and usage

The map() method returns a new array. The elements in the array are the values ​​of the original array elements after calling the function.

The map() method processes elements sequentially in the order of the original array elements.

Note: map() does not detect empty arrays

Note: map() does not change the original array

3. Grammar

array.map(function(currentValue,index,arr), thisValue)

4. Parameter description

5. slice() selects a part of the array and returns a new array

1. Example

Read elements in an array:

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);

citrus result output:

Orange,Lemon

2. Definition and usage

The slice() method returns selected elements from an existing array

The slice() method extracts a portion of a string and returns the extracted portion as a new string.

Note: slice() method does not change the original array

3. Grammar

array.slice(start, end)

4. Parameter values

5. Return value

Array Returns a new array containing the elements in arrayObject from start to end (exclusive).

6. splice() adds or removes elements from an array

1. Example

Add new elements to the array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");

fruits output results:

Banana,Orange,Lemon,Kiwi,Apple,Mango

2. Definition and usage

The splice() method is used to insert, delete or replace elements of an array

Note: This method will change the original array!

3. Grammar

array.splice(index,howmany,item1,.....,itemX)

4. Parameter values

5. Return value

Array If an element is deleted from arrayObject, an array containing the deleted element is returned.

7. shift() deletes the first element of the array

1. Example

Remove elements from an array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()

fruits result output:

Orange,Apple,Mango

2. Definition and usage

The shift() method is used to remove the first element of the array and return the value of the first element

Note: This method changes the length of the array

Tip: To remove elements at the end of an array, use the pop() method

3. Grammar

array.shift()

4. Return value

Any type (*) The original value of the first element of the array (removed element)

*: The array element can be a string, number, array, Boolean, or other object type

8. unshift() adds one or more elements to the beginning of the array and returns the new length

1. Example

Add a new item to the beginning of the array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

fruits will output:

Lemon,Pineapple,Banana,Orange,Apple,Mango

2. Definition and usage

The unshift() method adds one or more elements to the beginning of the array and returns the new length.

Note: This method will change the number of arrays.

Tip: To add a new item to the end of an array, use the push() method.

3. Grammar

array.unshift(item1,item2, ..., itemX)

4. Parameter values

9. pop() deletes the last element of the array and returns the deleted element

1. Example

Remove last array element

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

fruits result output:

Banana,Orange,Apple

2. Definition and usage

The pop() method is used to delete the last element of the array and return the deleted element

Note: This method changes the length of the array

Tip: To remove the first element of an array, use the shift() method

3. Grammar

array.pop()

4. Return value

All types* The removed array item

*Array elements can be a string, number, array, Boolean, or other object type

10. push() adds one or more elements to the end of the array and returns the new length

1. Example

Add new elements to the array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")

fruits result output:

Banana,Orange,Apple,Mango,Kiwi

2. Definition and usage

The push() method adds one or more elements to the end of the array and returns the new length

NOTE: New elements will be added at the end of the array

Note: This method changes the length of the array

Tip: To add elements at the beginning of the array, please use the unshift() method

3. Grammar

array.push(item1, item2, ..., itemX)

4. Parameter values

5. Return value

Number array new length

Summarize

You are welcome to leave messages, exchange comments and make criticisms. If the article is helpful to you or you think the author's writing is good, you can click to follow, like, collect and support it.
(The reference source code of the blog can be found in the resources on my homepage. If you have any questions during the learning process, you are welcome to ask me in the comment area)