Summary of commonly used array methods in JS-JS Tutorial-php.cn

This time I will bring you a summary of the array methods commonly used in JS. What are the precautions when using data in JS? The following is a practical case, let's take a look.

1. The concat() method is used to merge two or more arrays. This method does not change the existing array, but returns a new array.

Example:

var array1 = ['a', 'b', 'c'];

var array2 = ['d', 'e', ' f'];

console.log(array1.concat(array2));

// ["a", "b", "c", "d", "e" , "f"]

2. The filter() method creates a new array containing all elements of the test implemented by the provided function. (can be used for filtering)

Example:

function isBigEnough(value) {
return value >= 10;
}

var filtered = [12 , 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]

// ES6 way

const isBigEnough = value => value >= 10;

let [...spread]= [12, 5, 8, 130, 44];

let filtered = spread.filter( isBigEnough);

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

Example:

function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44 ].find(isBigEnough); // 130

4. The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Otherwise, -1 is returned.

function isBigEnough(element) {

return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough );

// index of 4th element in the Array is returned,
// so this will result in '3'

5, forEach() method for each element of the array The element executes the provided function once. (Equivalent to for loop in JavaScript)

Example:

const arr = ['a', 'b', 'c'];

arr.forEach(function(element) {

console.log(element);
});

arr.forEach( element => console.log(element));

// a

// b
// c

6. The indexOf() method returns a given value found in the array The first index of the element, or -1 if it does not exist.

Example:

let a = [2, 9, 7, 8, 9];
a.indexOf(2); // 0
a.indexOf(6 ); // -1
a.indexOf(7); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1

if (a.indexOf(3) === -1) {

// element doesn't exist in array
}

7. The map() method creates a new An array whose result is the result of calling a provided function on each element in the array.

Example:

// ES6
let numbers = [1, 5, 10, 15];
let doubles = numbers.map( x => x ** 2);

// doubles is now [1, 25, 100, 225]

// numbers is still [1, 5, 10, 15]

const numbers = [ 2, 4, 8, 10];

let halves = numbers.map(x => x / 2);

let numbers = [1, 4, 9];

let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

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

Example:

let a = [1, 2, 3];
a.length; // 3

a.pop(); // 3

console.log(a); // [1, 2]

a.length; // 2

9, reduce() method for accumulator and array Apply a function to each element in (from left to right), reducing it to a single value.

Example:

const array1 = [1, 2, 3, 4];

const reducer = (accumulator,
currentValue) => ; accumulator +currentValue;// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));

// expected output: 10

// 5 + 1 + 2 + 3 + 4

console.log(array1.reduce(reducer, 5));

// expected output: 15
// filtered is [12, 130, 44 ]

10. Array.isArray() is used to determine whether the passed value is an Array

Example:

Array.isArray([1 , 2, 3]);

// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

11. The Array.from() method creates a new array example from a similar array or iterable object.

Example:

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a" , "b", "c"]

Array.from('foo');

// ["f", "o", "o"]

12. The fill() method fills all elements in an array from the starting index to the ending index with a fixed value.

Example:

var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

Syntax:
arr.fill(value[, start[, end]])
That is (filled value, start value (index), end value (starting from 1))

13, includes( ) method is used to determine whether an array contains a specified value. Depending on the situation, it returns true if it contains, otherwise it returns false.

Example:
let a = [1, 2, 3];

a.includes(2);
// true

a.includes(4);
// false

14. The join() method connects all elements of an array (or an array-like object) into a stringAnd return this string.

Example:
let a = ['Wind', 'Rain', 'Fire'];

console.log(a.join());
// Default is ","
// 'Wind,Rain,Fire'

console.log(a.join(""));
// Separator === empty String ""
// "WindRainFire"

console.log(a.join("-"));
// Delimiter "-"
// 'Wind- Rain-Fire'

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

Example:
var numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers);
// [1, 2, 3, 4]

numbers.push(5, 6, 7);

console.log(numbers);
// [1, 2, 3, 4, 5, 6, 7]

16. The reduceRight() method accepts a function as an accumulator (accumulator) and each value of the array (from right to left). Reduce to a single value. The opposite direction of execution of Array.prototype.reduce()

Example:
let flattened = [
[0, 1],
[2, 3],
[4, 5]
].reduceRight((a, b) => {
return a.concat(b);
}, []);

// flattened is [4, 5, 2, 3, 0, 1]

17. The shift() method deletes the first element from the array and returns the value of the element. This method changes the length of the array.

Example:
let a = [1, 2, 3];
let b = a.shift();

console.log(a);
// [2, 3]

console.log(b);
// 1

18. The slice() method returns a sequence from start to end Shallow copies a portion of the selected array (not including the end) to a new array object. The original array is not modified.

Example:
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals .slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison" , "camel", "duck", "elephant"]

19. The some() method tests whether certain elements in the array pass the test implemented by the provided function.

Example:
const isBiggerThan10 = (element, index, array) => {
return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);
// false

[12, 5, 8, 1, 4].some(isBiggerThan10);
// true

20. The sort() method sorts the elements of the array using an in-place algorithm and returns the array. sort Sorting is not necessarily stable. The default sort order is based on string Unicode code points.

Example:
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort();
// ['apples', 'bananas', 'cherries']

21. The splice() method changes the contents of an array by removing existing elements and/or adding new elements.

Example:
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, ' drum'); // Insert 'drum' at index 2
// myFish becomes ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // Delete an item from index 2 (that is, the item 'drum')
// myFish becomes ["angel", "clown", "mandarin" ", "sturgeon"]

Syntax:
array.splice(start)

array.splice(start, deleteCount)

array.splice(start, deleteCount , item1, item2, ...)

Parameters:
start
Specify the starting position of modification (counting from 0). If the length of the array is exceeded, content is added from the end of the array; if it is a negative value, it indicates the number starting from the end of the array (counting from 1); if only the start parameter is used without deleteCount, item, such as :array.splice(start), means to delete the elements of [start, end].
deleteCount optional
Integer, indicating the number of array elements to be removed. If deleteCount is 0, the element is not removed. In this case, at least one new element should be added. If deleteCount is greater than the total number of elements after start, all elements after start will be deleted (including the start position).
If deleteCount is omitted, it is equivalent to (arr.length - start).
item1, item2, ... optional
The elements to be added to the array, starting from the start position. If not specified, splice() will only remove array elements.
The splice method uses the deleteCount parameter to control whether to delete or add:
The start parameter is required and indicates the starting position (counting from 0), such as: start=0 starts from the first one; start>= array. length-1 means starting from the last one.
①. Delete the [start, end] elements from the start position.
array.splice(start)
②. Delete the elements [start, Count] starting from the start position.
array.splice(start, deleteCount)
③. Add item1, item2, ... elements starting from the start position.
array.splice(start, 0, item1, item2, ...)

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

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

Example:

let a = [1, 2, 3];
a.unshift(4, 5);

console.log( a);
// [4, 5, 1, 2, 3]

24. The substring() method is used to extract the subscript between two specified subscripts in the string. characters between.
Example:
var str="Hello world!";
document.write(str.substring(3)+"
");// lo world!
document.write(str.substring(3,7));//lo w

Syntax:
string.substring(from, to)

Parameters
from
Required. A nonnegative integer that specifies the position of the first character of the substring to be extracted in the string Object.
to
Optional. A non-negative integer that is one more position in the string Object than the last character of the substring to be extracted.
If this parameter is omitted, the returned substring will go to the end of the string.

25. The substr() method can extract the specified number of characters starting from the start subscript in the string.
Example
var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3) ,7));p//lo worl
Syntax:
stringObject.substr(start,length)

Parameters:
start
Required. The starting index of the substring to be extracted. Must be a numeric value. If negative, this parameter declares the position from the end of the string. That is, -1 refers to the last character in the string, -2 refers to the second to last character, and so on.
length
Optional. The number of characters in the substring. Must be a numeric value. If this parameter is omitted, the string from the beginning to the end of stringObject is returned.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!