The most complete Array object properties and methods used

The Array object

• In Javascript, an Array object is used to construct an Array, a high-order object in a class list that can store multiple values in a single variable.

Array common methods

1.Array.from()

• You can convert an array-like object or an iterable to an array

Array.from('hello');//['h','e','l','l','o'];

Array.from('hello'.i= >i.toUpperCase());//['H','E','L','L','O']

Array.from([1.2.3.4].i= >i*2) / /,4,6,8 [2]
Copy the code

2.Array.of()

• Creates a new array instance with a variable number of arguments, regardless of the number or type of arguments

Array.of(111); / / [111]
Array.of(1.2.3); / / [1, 2, 3]
Copy the code

3.Array.isArray()

• Checks whether the value passed is an array

Array.isArray([1.2.3]); // true
Array.isArray({name:'lisi'}); // false
Array.isArray('123');//false
Array.isArray(undefined);// false
Array.isArray(NaN);// false
Copy the code

Array.prototype Common method

1.concat()

• Used to merge two or more arrays. This method does not change an existing array, but returns a new one

let arr1 = [1.2.3];
let arr2 = ['a'.'b'.'c'];
let arr3 = [[12],[bb],[{a:10}]].let newArr = arr1.concat(arr2,arr3);
console.log(newArr); / / [1, 2, 3, 'a', 'b', 'c', [12], [bb], [{10} a:]]
Copy the code

2.join()

• Concatenate all the elements of an array (or array-like object) into a string and return the string, if the array has only one item, that item is returned without delimiters

const list = ['1'.'2'.'3'];
console.log(list.join());/ / '1, 2, 3'
console.log(list.join(The '-'));/ / 1-2-3
console.log(list.join(' '));'123'

Copy the code

3.push()

• Adding one or more elements to the end of an array returns the new array length, changing the array

let list = [1.2.3];
let len = list.push('a'.'b'.'c');
console.log(arr);/ / [1, 2, 3, 'a', 'b', 'c']
console.log(len); / / 6

// Merge multiple arrays
let arr1 = [1.2.3];
let arr2 = ['a'.'b'.'c'];
let arr3 = ['1'.'2'.'3'];
console.log(arr.push(... arr2,... arr3));/ / [1, 2, 3, 'a', 'b', 'c', '1', '2', '3']
Copy the code

4.pop()

• Removes the last element from the array and returns the value of that element, changing the length of the array

let arr = [1.2.3];
console.log(arr,arr.pop());/ / [1, 2], and 3
Copy the code

5.shift()

• Removes the first element from the array and returns the value of that element, changing the array length

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

6.unshift()

• Adds an array or elements to the front of an array and returns the new length of the array, changing the array

let arr = [1.2.3];
arr.unshift('a');
arr.unshift('b'.'c');
arr.unshift('d')
console.log(arr);/ / / 'd', 'b', 'c', 'a', 1, 2, 3]
Copy the code

7.reverse()

• Reverses the position of the elements in the array and returns the array, changing the original array

let arr = [1.2.3.4];
let reArr = arr.reverse();
console.log(reArr,arr); / /,3,2,1 [4]
Copy the code

8.sort()

• Sort the elements of an array using the in place algorithm and return the array. The default sort order is built by converting the elements to strings and then comparing their UTF-16 unit value sequences

let arr = [3.2.4.5.1];
arr.sort((a,b) = > a-b);
console.log(arr);/ / [1, 2, 3, 4, 5]
Copy the code

9.slice();

• Array interception returns a new array object that is a shallow copy of the original array determined by begin and end.

let list = [1.2.3.4.5.6.7];
console.log(list.slice()); / /,2,3,4,5,6,7 [1]
console.log(list.slice(2)); / /,4,5,6,7 [3]
console.log(list.slice(-2.4)); / / []
console.log(list.slice(2, -4)); / / [3]
Copy the code

10.splcie()

• Modifying an array by deleting or replacing existing elements or adding new ones in place, and returning the modified contents as an array, alters the original array;

let arr = [1.2.3.4.5];
// Insert elements 'a','b','c' from the third digit
let arr1 = arr.splice(3.0.'a'.'b'.'c');
console.log(arr1); / / [1, 2, 3, 'a', 'b', 'c', 4, 5)

// Delete all subsequent elements starting with the second element
let arr2 =arr.splice(2);
console.log(arr2);/ / [1, 2]

// From the second element, delete all subsequent elements, and insert 'a', 'b'
let arr3 = arr.splice(2,arr.length, 'a'.'b');
console.log(arr3);/ / [1, 2, 'a', 'b']

// Insert 'a', 'c' from the last digit
let arr4 = arr.splice(-arr.length, arr.length, 'a'.'b');
console.log(arr4); // ['a','c']
Copy the code

11.indexOf();

• This method returns the first index in the array where a given element can be found, or -1 if none exists;

var array = [1.'ha ha'.3.'haha'.5];
array.indexOf('ha ha');      // 1 search for 'ha' from the first, return 'ha' index 1
array.indexOf(7);           // select * from '7' where '7' = '1'
array.indexOf(1.1);        // start with 1 and return -1
array.indexOf(1.0)         // the index of 1 is 0
array.indexOf(5.2);        // return 5 as index 4
array.indexOf('haha', -3);  // 3 Search for "haha" from the third from the bottom and return "haha" with index 3
array.indexOf(1, -3);       // start with 1 from the third from the bottom, return -1
Copy the code

12.lastIndexOf()

• Returns the last index of the specified element in the array, or -1 if none exists.

var array = [1.'ha ha'.3.'haha'.5];
array.lastIndexOf('ha ha');         //  1
array.lastIndexOf(7);              // -1
array.lastIndexOf(3.4);          //  2
array.lastIndexOf(3.3);          //  3
array.lastIndexOf('haha', -2);  //  3
array.lastIndexOf(3, -4);        // -1
array.lastIndexOf(3, -1);        //  2


// Find all elements
var indices = [];
var arr = ['a'.'b'.'a'.'c'.'a'.'d'];
var element = 'a';
var idx = arr.lastIndexOf(element);
while(idx ! = -1) {
  indices.push(idx);
  idx = (idx > 0 ? arr.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices); / / (4, 2, 0]
Copy the code

13. Map (), reduce(), reduceRight(), filter(), some(), every(), forEach(), find(), findIndex()

See the previous chapter for the basics of ES6 deconstruction, array and object traversal summary

14.fill()

• Fills an array with a fixed value from the start index to the end index to all elements, excluding the end index

[1.2.3].fill(4);               / / (4, 4, 4]
[1.2.3].fill(4.1);            / / [1, 4, 4]
[1.2.3].fill(4.1.2);         / / [1, 4, 3)
[1.2.3].fill(4.1.1);         / / [1, 2, 3]
[1.2.3].fill(4.3.3);         / / [1, 2, 3]
[1.2.3].fill(4, -3, -2);       / / [4, 2, 3]
[1.2.3].fill(4.NaN.NaN);     / / [1, 2, 3]
[1.2.3].fill(4.3.5);         / / [1, 2, 3]
Array(3).fill(4);                / / (4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) / / / {}, {}, {};
// Note that if fill takes a reference type, it will result in a single reference type being executed
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
Copy the code

15.flat()

• Recursively traverses the array of numbers at a depth that can be specified, and returns a new array of all elements with bits traversed into the subarray

// Array flattening
var arr1 = [1.2[3.4]];
arr1.flat(); // [1, 2, 3, 4]

var arr2 = [1.2[3.4[5.6]]];
arr2.flat();// [1, 2, 3, 4, [5, 6]]

var arr3 = [1.2[3.4[5.6]]];
arr3.flat(2);// [1, 2, 3, 4, 5, 6]

// Use Infinity to 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]

var arr5 = [1.2.4.5];
arr5.flat();// [1, 2, 4, 5]
Copy the code

16.flatMap()

• Use the mapping function to map each element and then compress the result into a new array, which is the same as the flat with the depth value of 1 attached to the map.

// Basically the same as map
var arr1 = [1.2.3.4];
arr1.map(x= > [x * 2]); [[2], [4], [6], [8]]

arr1.flatMap(x= > [x * 2]);// [2, 4, 6, 8]

arr1.flatMap(x= > [[x * 2]]);[[2], [4], [6], [8]]
Copy the code

17.toLocaleString()

• Returns a string representing the elements of an array that are converted to a string using their toLocaleString methods

const array1 = [1.'a'.new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });

console.log(localeString);//"1,a,12/21/1997, 2:12:00 PM"

Copy the code

18.includes()

• Used to determine whether an array contains a specified value, depending on the case: true if it does, false otherwise

1.2.3].includes(4);     // false
[1.2.3].includes(3.3);  // false
[1.2.3].includes(3, -1); // true
[1.2.NaN].includes(NaN); // true

// fromIndex is greater than or equal to the array length
var arr = ['a'.'b'.'c'];
arr.includes('c'.3);   // false
arr.includes('c'.100); // false
Copy the code

19.copyWith()

• Shallowly copies part of an array to another location in the same array and returns it without changing the length of the original array

[1.2.3.4.5].copyWithin(-2);// [1, 2, 3, 1, 2]
[1.2.3.4.5].copyWithin(0.3);// [4, 5, 3, 4, 5]
[1.2.3.4.5].copyWithin(0.3.4);// [4, 2, 3, 4, 5]
[1.2.3.4.5].copyWithin(-2, -3, -1);// [1, 2, 3, 3, 4]
[].copyWithin.call({length: 5.3: 1}, 0.3);// {0: 1, 3: 1, length: 5}
Copy the code

20.toString()

• Returns a string representing the specified array and its elements.

const array1 = [1.2.'a'.'1a'];

console.log(array1.toString());/ / "1, 2, a, 1 a." "
Copy the code