Detailed Example of JavaScript Array Methods

Introduction
Creating an Array

Creation Method
Detailed explanation

Methods

join()
push() and pop()
shift() and unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf() and lastIndexOf()
forEach()
map()
filter()
fill() (new in ES6)
every()
some()
includes() (ES7)
reduce() and reduceRight()
toLocaleString() and toString()
find() and findIndex()
copyWithin() (ES6)
flat() and flatMap() (ES6)
entries(), keys() and values() (ES6)

Introduction

illustrate

This article introduces JavaScript array methods with examples.

Method Introduction

join(): concatenates each item in the array into a string using the specified delimiter

push(): Adds a new element to the end of an array

pop(): remove the last item in an array

shift(): Remove the first item of an array

unshift(): Add a new element to the first position of an array

slice(): Find some elements according to the conditions

splice(): add, delete, and modify an array

fill(): This method can fill one or more elements in an array with a specific value.

filter(): "Filter" function

concat(): used to concatenate two or more arrays

indexOf(): Detects the index of the first occurrence of the current value in the array

lastIndexOf(): Detects the index of the last occurrence of the current value in the array

every(): Determines whether each item in the array meets the condition

some(): Checks whether there is an item in the array that meets the conditions

includes(): Determines whether an array contains a specified value

sort(): Sorts the elements of an array

reverse(): reverse the order of an array

forEach(): loop through each item in an array (ES5 and below)

map(): loop through each item in an array (ES6)

copyWithin(): Used to copy elements from a specified position in an array to another specified position in the array

find(): Returns the matching value

findIndex(): Returns the index of the matching position

toLocaleString(), toString(): Convert an array to a string

flat(), flatMap(): Flattening an array

entries(), keys(), values(): traverse the array

Creating an Array

Creation Method

JavaScript has a total of 11 methods to create arrays:

[1, 3, 5];
new Array(3);
Array(3);
 
Array.apply(null, new Array(3))
Array.apply(null, Array(3));
Array.apply(null, {length: 3});
 
//ES6 writing Array.of(1, 2);
Array.from({length: 3});
Array(3).fill(2);
Array(...Array(3));
[...Array(3)]

Example

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
<script>
    let arr1 = [1, 3, 5];
    let arr2 = new Array(3);
    let arr3 = Array(3);
 
    let arr4 = Array.apply(null, new Array(3))
    let arr5 = Array.apply(null, Array(3));
    let arr6 = Array.apply(null, {length: 3});
 
    //ES6 notation let arr7 = Array.of(1, 2);
    let arr8 = Array.from({length: 3});
    let arr9 = Array(3).fill(2);
    let arr10 = Array(...Array(3));
    let arr11 = [...Array(3)]
 
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);
    console.log(arr5);
    console.log(arr6);
    console.log(arr7);
    console.log(arr8);
    console.log(arr9);
    console.log(arr10);
    console.log(arr11);
</script>
</body>
</html>

Brief results:

Detailed results:

visible:

The following two methods cannot create elements and indexes, only length attributes

new Array(3);
Array(3);

Other methods can create elements, indexes, and length attributes.

Impact on traversal

The effect on forEach, for ... in, and for ... of is the same: arrays with no elements are skipped and only values with elements (including undefined) are traversed.

Detailed explanation

The principle of Array.apply(null, {length: 2})

This article introduces the principle of Array.apply(null, {length: 2}).

var arrayLike = {length: 2}

↓↓

Array.apply(null, arrayLike)

↓↓

Array(arrayLike[0], arrayLike[1]) // Pass the value of each element in an empty array to the Array() method one by one

↓↓

Array(undefined, undefined) // The value of each element in an empty array is undefined

//Final output [undefined, undefined]

Mapping transformation

If you want to further transform the array, you can pass a mapping function as the second argument to the Array.from() method. This function converts each value of the array object to the target form and stores it in the corresponding position of the target array.

function arga(...args) {  
     return Array.from(args, value => value + 1);
}
 
let arr = arga('arr', 26, 'pop');
console.log(arr);//['arr1',27,'pop1']

If your mapping function needs to work on an object, you can manually pass a third argument to the Array.from() method to specify the this value inside the mapping function.

const helper = {
  diff: 1,
  add(value) {
    return value + this.diff;
  }
}
 
function translate() {
 //arguments is an array-like object corresponding to the arguments passed to the function return Array.from(arguments, helper.add, helper); 
}
 
let arr = translate('liu', 26, 'man');
console.log(arr); // ["liu1", 27, "man1"]

Methods

join()

The join() method is used to convert all elements in an array into a string.

Elements are separated by the specified delimiter. By default, commas are used as separators.

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3] (the original array remains unchanged)

The join() method can be used to repeat a string. Just pass in the string and the number of repetitions, and the repeated string will be returned. The function is as follows:

function repeatString(str, n) {
    //An empty array of length n+1 is concatenated into a string using string, which becomes a repetition of n strings return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi

push() and pop()

The push() method adds elements to an array from the end of the array. One or more elements can be added.

The pop() method is used to remove the last element of an array and return the removed element.

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

shift() and unshift()

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

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

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

sort()

The sort() method is used to sort the elements of an array.

The sort order can be alphabetical or numeric, and in ascending or descending order.

The default sort order is ascending alphabetical order.

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51] (the element array is changed)

To solve the above problem, the sort() method can receive a comparison function as a parameter so that we can specify which value comes before which value.

The comparison function takes two arguments and returns a negative number if the first argument should come before the second, 0 if the two arguments are equal, or a positive number if the first argument should come after the second. Here is a simple comparison function:

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
           return 1;
    } else {
        return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

If you need to use a comparison function to produce a descending sort result, just swap the values returned by the comparison function:

function compare(value1, value2) {
    if (value1 < value2) {
        return 1;
    } else if (value1 > value2) {
        return -1;
    } else {
        return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]

reverse()

The reverse() method is used to reverse the order of elements in an array.
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13] (the original array changes)

concat()

The concat() method is used to concatenate two or more arrays.

This method does not mutate the existing array, but simply returns a copy of the concatenated array.

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7] (the original array is not modified)

From the above test results, we can find that: if the input is not an array, the parameters are directly added to the end of the array. If the input is an array, each item in the array is added to the array. But what if a two-dimensional array is passed in?

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

slice()

slice(): Returns a new array consisting of items from the specified start index to the end index in the original array.

The slice() method can accept one or two parameters, the starting and ending positions of the items to be returned.

With only one argument, the slice() method returns all items starting from the position specified by the argument to the end of the current array.

If there are two arguments, this method returns the items between the start and end positions, but not including the end position.

When a negative number appears, the number at that position is replaced by the negative number plus the length of the array (6).

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2); //equivalent to arr.slice(1,4)
var arrCopy4 = arr.slice(-4,-1); // equivalent to arr.slice(2,5)
console.log(arr); //[1, 3, 5, 7, 9, 11] (the original array remains unchanged)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

splice()

splice(): A very powerful array method that has many uses and can be used to delete, insert, and replace.

1. Delete the element and return the deleted element

You can delete any number of items by specifying only two parameters: the position of the first item to be deleted and the number of items to be deleted. For example, splice(0,2) removes the first two items in the array.

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]

2. Add an element to the specified index

You can insert any number of items into a specified position by providing three parameters: the starting position, 0 (the number of items to remove), and the items to insert. For example, splice(2,0,4,6) will insert 4 and 6 starting at position 2 in the current array.

var array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35); //[]
 
console.log(array1); // [22, 12, 35, 3, 31, 12]

3. Replace the element at the specified index position

You can insert any number of items at a specified position and delete any number of items at the same time by specifying only three parameters: the starting position, the number of items to delete, and the arbitrary number of items to insert. The number of items inserted does not have to be equal to the number of items deleted. For example, splice (2,1,4,6) will delete the item at position 2 in the current array and then insert 4 and 6 starting at position 2.

const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8); //[3]
 
console.log(array1); // [22, 8, 31, 12]

indexOf() and lastIndexOf()

Takes two arguments: the item to search for and (optionally) an index indicating where to start the search.

indexOf(): Searches backwards from the beginning of the array (position 0).

lastIndexOf: Search forward from the end of the array.

Both methods return the position of the item being searched for in the array, or -1 if it is not found. The strict equality operator is used when comparing the first argument to each item in the array.

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

forEach()

forEach(): Loops through an array, running a given function on each item in the array. This method has no return value. Parameters are all function types and are passed by default.

The parameters are: the array content to be traversed; the corresponding array index, the array itself

var arr = [11, 22, 33, 44, 55];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});

The output is:

11|0|true
22|1|true
33|2|true
44|3|true
55|4|true

map()

The map() method returns a new array whose elements are the values processed by calling the function on the elements of the original array.

The map() method processes the elements in the original array in the order they were placed.

This method does not change the original array.

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

filter()

filter(): "Filter" function, each item in the array runs the given function and returns an array that meets the filtering conditions.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]

fill() (new in ES6)

The fill() method fills one or more elements in an array with a specific value. When passed a single argument, the method fills the entire array with the value of that argument.

let arr = [1, 2, 3, 'cc', 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];

If you do not want to change all the elements in the array, but only a portion of them, you can use the optional start position and end position parameters (excluding the element at the end position).

3 parameters: fill value, start position parameter, end position parameter (excluding the element at the end position)

let arr = [1, 2, 3, 'arr', 5];
 
arr.fill(1, 2);
console.log(arr); //[1,2,1,1,1]
 
arr.fill(0, 1, 3);
console.log(arr); //[1,0,0,1,1];

every()

every(): Determines whether each item in the array meets the conditions. Only when all items meet the conditions will true be returned.

var arr = [1, 2, 3, 4, 5];
 
var arr2 = arr.every(function(x) {
    return x < 10;
});
console.log(arr2); //true
 
var arr3 = arr.every(function(x) {
    return x < 3;
});
console.log(arr3); // false

some()

some(): Determines whether there are items in the array that meet the conditions. As long as there is one item that meets the conditions, it will return true.

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
    return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
    return x < 1;
});
console.log(arr3); // false

includes() (ES7)

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

There are two parameters, the first one is the (required) element value to be found, and the second one is the (optional) position to start searching for the element.

const array1 = [22, 3, 31, 12, 'arr'];
const includes = array1.includes(31);
console.log(includes); // true
 
const includes1 = array1.includes(31, 3); // Start from index 3 and find if 31 exists console.log(includes1); // false

Note that includes use the === operator to compare values, with one exception: NaN is considered equal to itself.

let values = [1, NaN, 2];
console.log(values.indexOf(NaN)); //-1
console.log(values.includes(NaN)); //true

reduce() and reduceRight()

Both methods implement iterating over all items of the array (i.e. the accumulator) and then building a final return value.

The reduce() method starts from the first item of the array and traverses to the end one by one.

reduceRight() starts from the last item in the array and traverses forward to the first item.

4 parameters: previous value, current value, index of the item, and array object.

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
},10); //The array is initially added with an initial value of 10, and the default value of 0 is optional
console.log(sum); //25

toLocaleString() and toString()

Convert an array to a string

const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();
 
console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12

find() and findIndex()

Both the find() and findIndex() methods accept two parameters: a callback function and an optional value used to specify this inside the callback function.

The callback function can accept three parameters: an element of the array, the index position corresponding to the element, and the array itself.

The callback function should return true when the given element meets the conditions you defined, and both the find() and findIndex() methods will stop searching when the callback function returns true for the first time.

The difference between the two is that the find() method returns the matching value, while findIndex() returns the index of the matching position.

let arr = [1, 2, 3, 'arr', 5, 1, 9];
 
console.log(arr.find((value, keys, arr) => {
    return value > 2;
})); // 3 returns the matching value console.log(arr.findIndex((value, keys, arr) => {
    return value > 2;
})); // 2 Returns the index of the matching position

copyWithin() (ES6)

The copyWithin() method is used to copy elements from a specified position in an array to another specified position in the array.

This method will change the existing array

//Copy the first two elements of an array to the last two positions of the array let arr = [1, 2, 3, 'arr', 5];
 
arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

By default, the copyWithin() method always copies to the end of the array, but you can provide an optional parameter to limit how many elements will be overwritten. This third parameter specifies the position at which copying stops (not including the position itself).

let arr = [1, 2, 3, 'arr', 5, 9, 17];
 
//Paste from index 3 //Copy from index 0 //Stop copying at index 3 arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

flat() and flatMap() (ES6)

The flat() method recursively traverses an array to a specified depth and merges all elements with the elements in the traversed subarray into a new array and returns it.

This method returns a new array and has no effect on the original data.

Parameter: Specifies the structure depth of the nested array to be extracted. The default value is 1.

const arr1 = [0, 1, 2, [3, 4]];
 
console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]
 
const arr2 = [0, 1, 2, [[[3, 4]]]];
 
console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]
 
//Using Infinity, you can expand nested arrays of any depth var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
// Flatten the empty items in the array. If there are vacancies in the original array, the flat() method will skip the vacancies var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

The flatMap() method executes a function on each member of the original array, which is equivalent to executing Array.prototype.map(), and then executing the flat() method on the array of return values.

This method returns a new array without changing the original array.

// Equivalent to [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

entries(), keys() and values() (ES6)

entries(), keys() and values() – used to iterate over an array. They all return an iterator object that can be iterated using a for...of loop.

The difference is that keys() is a traversal of key names, values() is a traversal of key values, and entries() is a traversal of key-value pairs.

for (let index of ['a', 'b'].keys()) {  
    console.log(index);  
}  
// 0  
// 1  
 
for (let elem of ['a', 'b'].values()) {  
    console.log(elem);  
}  
// 'a'  
// 'b'  
 
for (let [index, elem] of ['a', 'b'].entries()) {  
    console.log(index, elem);  
}  
// 0 "a"  
// 1 "b"

If you do not use the for...of loop, you can manually call the next method of the traversal object to traverse.

let letter = ['a', 'b', 'c'];  
let entries = letter.entries();  
console.log(entries.next().value); // [0, 'a']  
console.log(entries.next().value); // [1, 'b']  
console.log(entries.next().value); // [2, 'c']

The above is the details of the detailed explanation of JavaScript array method examples. For more information about JavaScript array methods, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Complete list of javascript array methods
JS one-dimensional array converted to three-dimensional array method
Detailed explanation of JS array methods
Detailed explanation of common methods of JavaScript arrays
js array fill() filling method
Let's learn about javascript array methods

<<: What you need to know about responsive design

>>: Implementation code of html floating prompt box function

Table of contents

Introduction

Creating an Array

Creation Method

Detailed explanation

Methods

join()

push() and pop()

shift() and unshift()

sort()

reverse()

concat()

slice()

splice()

indexOf() and lastIndexOf()

forEach()

map()

filter()

fill() (new in ES6)

every()

some()

includes() (ES7)

reduce() and reduceRight()

toLocaleString() and toString()

find() and findIndex()

copyWithin() (ES6)

flat() and flatMap() (ES6)

entries(), keys() and values() (ES6)

Recommend