Array method Encyclopedia

Array method

1.Array.from()

from() is used to convert the class array structure into an array instance and return a new array

// The string is split into a single character array
console.log(Array.from("Matt")); // ["M", "a", "t", "t"]

// Array.from() performs a shallow copy of an existing array
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1); 
console.log(a1); // [1, 2, 3, 4] 
alert(a1 === a2); // false

// from() can also convert custom objects with the necessary attributes
const arrayLikeObject = { 
 0: 1, 
 1: 2, 
 2: 3, 
 3: 4, 
 length: 4 
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

//Array.from() also receives a second optional mapping function parameter. This function can directly enhance the value of the new array without calling array from(). Create an intermediate array like map (). You can also receive a third optional parameter that specifies the value of this in the mapping function. However, this overridden this value does not apply in the arrow function.
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x**2); 
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16] 
console.log(a3); // [1, 4, 9, 16] 

2.Array.of()

of() is used to convert a set of parameters into an array instance and return a new array

//Array.of() can convert a set of parameters into an array. This method is used to replace the array prototype. slice. Call (arguments), an extremely clumsy way to convert arguments objects into arrays:
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
console.log(Array.of(undefined)); // [undefined]

3,entries()

entries() returns the iterator of the index / value pair

const a = ["foo", "bar", "baz", "qux"];

const aEntries = Array.from(a.entries());

console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

//The deconstruction of ES6 can easily split key / value pairs in a loop:
for (const [idx, element] of ["foo", "bar", "baz", "qux"].entries()) { 
 console.log(idx); 
 console.log(element); 
}
// 0 
// foo 
// 1 
// bar 
// 2 
// baz 
// 3 
// qux

4,fill()

fill() fills the array and supports three parameters

Parameter 1: fill value;

Parameter 2: start index (start from the first index of the array, do not write, start from the first by default, and support negative numbers);

Parameter 3: end index (end from the first index of the array, do not write, default to the last end, and support negative numbers);

Note: the start negative number here must be less than the end negative number. Returning the changed array will change the original array.

const zeroes = [0, 0, 0, 0, 0]; 
// Fill the entire array with 5
zeroes.fill(5); 
console.log(zeroes); // [5, 5, 5, 5, 5] 
zeroes.fill(0); // Reset
// Fill elements with index greater than or equal to 3 with 6
zeroes.fill(6, 3); 
console.log(zeroes); // [0, 0, 0, 6, 6] 
zeroes.fill(0); // Reset
// Fill elements with an index greater than or equal to 1 and less than 3 with 7
zeroes.fill(7, 1, 3); 
console.log(zeroes); // [0, 7, 7, 0, 0]; 
zeroes.fill(0); // Reset
// Fill elements with an index greater than or equal to 1 and less than 4 with 8
// (-4 + zeroes.length = 1) 
// (-1 + zeroes.length = 4) 
zeroes.fill(8, -4, -1); 
console.log(zeroes); // [0, 8, 8, 8, 0];

5,copyWithin()

copyWithin() will copy part of the contents of the array according to the specified range, that is, copy the array elements to another position in the array and overwrite the existing values. The length of the array will not change and the original array will be modified. The returned modified array also has three parameters.

Parameter 1: the index position to which the element is copied;

Parameter 2: start index (start from the first index of the array, do not write, start from the first by default, and support negative numbers);

Parameter 3: end index (end from the first index of the array, do not write, default to the last end, and support negative numbers);

let ints, 
 reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
reset(); 
// Copy the contents starting from index 0 from ints and insert them at the beginning of index 5
// Stops when the source or destination index reaches the array boundary
ints.copyWithin(5); 
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4] 
reset(); 
// Copy the contents starting with index 5 from ints and insert them at the beginning of index 0
ints.copyWithin(0, 5); 
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset(); 
// Copy contents from index 0 to index 3 in ints
// Insert at the beginning of index 4
ints.copyWithin(4, 0, 3); 
alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9] 
reset(); 
// The JavaScript engine completely copies the values in the range before interpolation
// Therefore, there is no risk of rewriting during replication
ints.copyWithin(2, 0, 6); 
alert(ints); // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9] 
reset(); 
// The negative index value is supported, which is the same as the process of fill() calculating the positive index relative to the end of the array
ints.copyWithin(-4, -7, -3); 
alert(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

6,join()

The join() element will be separated by the specified delimiter. The default separator is a comma (,).

let colors = ["red", "green", "blue"]; 
alert(colors.join(",")); // red,green,blue 
alert(colors.join("||")); // red||green||blue

7. push() and pop()

The push() method takes any number of parameters and adds them to the end of the array, returning the latest length of the array. pop() method

Used to delete the last item of the array, reduce the length value of the array, and return the deleted item.

let colors = new Array(); // Create an array
let count = colors.push("red", "green"); // Push in two items
console.log(count); // 2 

count = colors.push("black"); // Push in another item
console.log(count); // 3 

let item = colors.pop(); // Get the last item
console.log(item); // black 
console.log(colors.length); // 2

8. shift() and unshift()

The shift() method removes the first item of the array, changes the length of the array, and returns the deleted item. This method will change the original array,

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

let colors = new Array(); // Create an array
let count = colors.push("red", "green"); // Push in two items
console.log(count); // 2 
count = colors.push("black"); // Push in another item
console.log(count); // 3 
let item = colors.shift(); // Get the first item
console.log(item); // red 
console.log(colors.length); // 2

let colors1 = new Array(); // Create an array
let count1 = colors1.unshift("red", "green"); // Push two items from the beginning of the array
console.log(count1); // 2 
count1 = colors1.unshift("black"); // Push in another item
console.log(count1); // 3 
let item1 = colors1.pop(); // Get the last item
console.log(item1); // green 
console.log(colors1.length); // 2

10. reverse() and sort()

The reverse() method is to sort the array in descending order (i.e. reverse order): for example

var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); // 5,4,3,2,1

The sort() method, in contrast to the reverse() method, sorts the array in ascending order, with the smallest in the front and the largest in the back

var arr=[2,3,1,4,5];
arr.sort();
console.log(arr); // 1,2,3,4,5
let arr1= [0, 1, 5, 10, 15]; 
values.sort();
console.log(arr1); // 0,1,10,15,5

It can be seen from the above example that the sort() method can only sort by single digits. It is not ideal when there are ten digits or more. This is because the sort() implicitly converts each item of the array into a String value for comparison (even pure numbers will be converted into a String type for comparison). Therefore, the sort() method can pass a parameter, This parameter can be a function to determine which is at the top

var arr2 = [0,1,5,15,10];
arr2.sort((a,b)=>a<b?-1:a>b?1:0);
console.log(arr2); //0,1,5,10,15

In the function passed in, if the first value should be in front of the second value, return - 1; if the first value should be behind the second value, return 1; The above example is in ascending order. If you need to arrange in descending order, just exchange the judgment conditions and return values in turn.

11,concat()

concat() method is to splice the original array and parameters (the parameters here can be single or an array), splice these parameters at the end of the original array, and finally return with a new array without changing the original array.

var arr = [1,2,3]; 
var arr1=arr.concat(4,[5,6]);
console.log(arr1); //1,2,3,4,5,6

In the above example, the passed in array is split in turn. Sometimes if you don't want to split, you need to add a value to the passed in array: symbol isConcatSpreadable=false. This value prevents the concat() method from splitting the incoming array.

var arr = [1,2,3];
var arr1 = [4,5]; 
var arr2 = [6,7];
arr1[Symbol.isConcatSpreadable]= true;
arr2[Symbol.isConcatSpreadable]= false;
var arr3=arr.concat(arr1);
var arr4 = arr.concat(arr2);
console.log(arr3); //1,2,3,4,5
console.log(arr4); //1,2,3,[6,7]

12,slice()

slice() method is a method to intercept an array. This method has two parameters. The first is the start index, that is, from the corresponding index of the array, and the second is the end index, that is, to the end of the corresponding index of the array. If a parameter is passed, it will be intercepted from the start index of the array to the end. Negative parameters are supported, but the first parameter should be less than the second parameter, This method does not change the original array

var arr = [1,2,3,4,5];
console.log(arr.slice(1)); // 2,3,4,5
console.log(arr.slice(1,3)); // 2,3
console.log(arr.slice(-3,-1)); // 3,4

13,splice()

The splice() method can delete, insert and replace (the most powerful method). It has three parameters, which will change the original array

Delete: receive two parameters, the first is the start index of the array to be deleted, and the second is the end index of the array to be deleted

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,1);
var arr2 = arr.splice(2);
console.log(arr1); // 3
console.log(arr2);  //4,5
console.log(arr); // 1,2

Insert: three parameters are received. The first parameter is the index to insert from the array, the second parameter is 0 by default, and the third parameter is of any type

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,0,'ha-ha');
console.log(arr1); // []
console.log(arr); // 1, 2, 'ha ha', 3, 4, 5

Replace: receive three parameters, the first is the index to be replaced from the array, the second is the quantity to be replaced, and the third parameter is an arbitrary type parameter

var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,2,"ha-ha","ha-ha");
console.log(arr1); // 3,4 ----- return the array to be replaced
console.log(arr); // 1, 2, 'ha ha', 'ha ha', 5 ----- the original array after replacement

14. indexOf(), lastIndexOf(), and includes()

indexOf(), lastIndexOf() and includes() methods are used to find out whether the array contains corresponding items.

  • indexOf() searches from front to back. By default, it receives two parameters. The first parameter is the corresponding value to be searched, and the second parameter is the start index (that is, from which position in the array to start searching). If it is found, it returns the corresponding index, and if it is not found, it returns - 1

    var arr = [1,2,3,4,5,4,3,2,1];
    // When passing a parameter, the method starts from the first item of the array by default
    var index = arr.indexOf(2);
    var index1 = arr.indexOf(2,4);
    console.log(index); // 1
    console.log(index1); // 7
    
    
  • lastIndexOf() finds from the back to the front. By default, it receives two parameters. The first parameter is the corresponding value to be found, and the second parameter is the start index (that is, from which position in the array to find it). If it is found, it returns the corresponding index, and if it is not found, it returns - 1

    var arr = [0,1,2,3,4,5,6,7,8,9];
    var index = arr.lastIndexOf(2);
    var index1 = arr.lastIndexOf(6,8);
    console.log(index); // 2
    console.log(index1); // 6
    // If the start position of the second parameter is earlier and the corresponding item to be found is later, it will not be found and - 1 will be returned
    console.log(arr.lastIndexOf(6,4)); // -1
    
    
  • includes() finds from the front to the back. By default, it receives two parameters. The first parameter is the corresponding value to find, and the second parameter is the start index (that is, from which position in the array to find). If it is found, it returns true, and if it is not found, it returns false

    var arr = [1,2,3,4,5,6,7,8,9];
    var isShow = arr.includes(4);
    var isShow1 = arr.includes(6,2);
    var isShow2= arr.includes(10);
    console.log(isShow); // true
    console.log(isShow1); // true
    console.log(isShow2); // false
    
    

15. find() and findIndex()

find() finds the elements that meet the conditions, returns the corresponding elements if they meet the conditions, and returns undefined if there are no elements that meet the conditions

/*
* item Each item of the array
* index The subscript of each item of the array
* arr Array currently being cycled
*/ 
var arr = [1,2,3,4,5];
var a = arr.find((item,index,arr)=>item===4);
var b = arr.find((item,index,arr)=>item===6);
console.log(a); // 4
console.log(b); // undefined

findIndex() finds the elements that meet the conditions. If the conditions are met, the subscript of the elements that meet the conditions is returned, and - 1 is not returned

/*
* item Each item of the array
* index The subscript of each item of the array
* arr Array currently being cycled
*/ 
var arr = [1,2,3,4,5];
var a = arr.findIndex((item,index,arr)=>item===4);
var b = arr.findIndex((item,index,arr)=>item===6);
console.log(a); // 3
console.log(b); // -1

16. Array loop method

  • every() circularly compares each item in the array. Only when each item meets the conditions will it return true. If one item does not meet the conditions, it will return false

    var arr = [true,true,true,false,true];
    var arr1 = [true,true,true,true];
    var a = arr.every((item,index,arr)=>item);
    var b = arr1.every((item,index,arr)=>item);
    console.log(a); // false
    console.log(b); // true
    
    
  • some() circularly compares each item in the array. If one item of the array meets the conditions, it returns true, and if all items do not meet the conditions, it returns false

    var arr = [true,true,true,false,true];
    var arr1 = [false,false,false,false];
    var a = arr.some((item,index,arr)=>item);
    var b = arr1.some((item,index,arr)=>item);
    console.log(a); // true
    console.log(b); // false
    
    
  • filter() loops through each item in the array, filters the qualified array and returns it as a new array

    var arr = [1,2,3,4,5,1,2,3];
    var arr1 = arr.filter((item,index,arr)=>item>3);
    console.log(arr1); // [4,5]
    
    
  • map() loops through each item in the array, returning a new array

    var arr = [1,2,3,4,5];
    var arr1 = arr.map((item,index,arr)=>item*2);
    console.log(arr1); // [2,4,6,8,10]
    
    
  • forEach() loops through each item of the array, which is equivalent to traversing the array like for, and there is no return value

    var arr = [1,2,3,4,5];
    arr.forEach((item,index,arr)=>{
    	// Perform some operations
    })
    
    

17. reduce() and reducereight()

The reduce() and reduceRight() methods are the same. They stack each item of the array. The reduce() method stacks from the first to the last, and reduceRight() stacks from the last to the first. The results are the same

var arr = [1,2,3,4,5];
var a = arr.reduce((num,item,index,arr)=>num+item);
var b = arr.reduceRight((num,item,index,arr)=>num+item);
console.log(a); // 15
console.log(b); // 15

Array detection method

val instanceof Array

Array.isArray(val)

Summarize the deficiencies, and please give your advice.

Keywords: Javascript Front-end TypeScript

Added by nykoelle on Thu, 13 Jan 2022 03:56:11 +0200