preface

As a front end staff, deal with data that are common, often use some of the array method to do some business logic, while using basic loop statement will also be able to write the same logic, but after mastering these methods can greatly improve the efficiency of our work, the mainest is also can make your own code b instantaneous promotion for several times, Two birds with one stone

Array methods

Now to get to the point, let’s summarize some of the common methods used in arrays:

  1. concat

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

const array1 = ['a'.'b'.'c'];
const array2 = ['d'.'e'.'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
Copy the code
  1. includes

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

const array1 = [1.2.3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat'.'dog'.'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false
Copy the code
  1. isArray

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

Array.isArray([1.2.3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false
Copy the code
  1. every

The every() method tests whether all elements in an array pass the test of a given function. It returns a Boolean value.

const isBelowThreshold = (currentValue) = > currentValue < 40;

const array1 = [1.30.39.29.10.13];

console.log(array1.every(isBelowThreshold));
// expected output: true
Copy the code
  1. some

The some() method tests that at least one element in the array passes the provided function test. It returns a Boolean value.

const array = [1.2.3.4.5];

// checks whether an element is even
const even = (element) = > element % 2= = =0;

console.log(array.some(even));
// expected output: true
Copy the code
  1. filter

The filter() method creates a new array containing all the elements of the test implemented through the provided function

const words = ['spray'.'limit'.'elite'.'exuberant'.'destruction'.'present'];

const result = words.filter(word= > word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Copy the code
  1. reduce

The reduce() method performs a reducer function (in ascending order) that you provide on each element in the array, summarizing its results into a single return value.

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
Copy the code
  1. indexOf

The indexOf() method returns the first index in the array where a given element can be found, or -1 if none exists.

const beasts = ['ant'.'bison'.'camel'.'duck'.'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison'.2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1
Copy the code
  1. find

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

const array1 = [5.12.8.130.44];

const found = array1.find(element= > element > 10);

console.log(found);
// expected output: 12
Copy the code
  1. findIndex

The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.

const array1 = [5.12.8.130.44];

const isLargeNumber = (element) = > element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3
Copy the code
  1. forEach

The forEach() method performs the given function once on each element of the array.

const array1 = ['a'.'b'.'c'];

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

// expected output: "a"
// expected output: "b"
// expected output: "c"
Copy the code
  1. map

The map() method creates a new array with the result that each element in the array is the return value from a call to the provided function.

const array1 = [1.4.9.16];

// pass a function to map
const map1 = array1.map(x= > x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
Copy the code
  1. from

The array.from () method creates a new, shallow-copy Array instance from an array-like or iterable.

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1.2.3].x= > x + x));
// expected output: Array [2, 4, 6]
Copy the code
  1. reverse

The reverse() method reverses the position of the elements in the array and returns the array. The first element of the array becomes the last, and the last element of the array becomes the first. This method changes the original array.

const array1 = ['one'.'two'.'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]
Copy the code
  1. sort

The sort() method sorts the elements of an array using an in-place algorithm and returns the array. The default sort order is to convert elements to strings and then compare their UTF-16 code unit values

const months = ['March'.'Jan'.'Feb'.'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1.30.4.21.100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
Copy the code
  1. push

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

const animals = ['pigs'.'goats'.'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens'.'cats'.'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
Copy the code
  1. pop

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

const plants = ['broccoli'.'cauliflower'.'cabbage'.'kale'.'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]
Copy the code
  1. shift

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

const array1 = [1.2.3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1
Copy the code
  1. unshift

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

const array1 = [1.2.3];

console.log(array1.unshift(4.5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]
Copy the code
  1. slice

The slice() method returns a new array object that is a shallow copy (including begin, but not end) of the array determined by begin and end. The original array will not be changed.

const 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"]

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

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]
Copy the code
  1. splice

The splice() method modifies an array by deleting or replacing existing elements or adding new ones in place, and returns the modified contents as an array. This method changes the original array.

const months = ['Jan'.'March'.'April'.'June'];
months.splice(1.0.'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4.1.'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
Copy the code
  1. join

The join() method joins all the elements of an array (or an array-like object) into a string and returns the string. If the array has only one item, that item is returned without a delimiter.

const elements = ['Fire'.'Air'.'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(' '));
// expected output: "FireAirWater"

console.log(elements.join(The '-'));
// expected output: "Fire-Air-Water"
Copy the code

conclusion

In fact, there are many array methods, here I just summarized some of the more common array methods, in fact, at the beginning of thinking that there are not many, did not expect such a summary really surprised me, for the front end of this aspect I still know too little, continue to study hard