Some useful JavaScript array methods that you may not know about

In JavaScript, an array is a special data structure that can be used to store different types of elements. As one of the most frequently-used data structures we developers use, this article introduces some built-in arrays that you may not know much about, but you must know about, to help you increase your development efficiency and get data processing done quickly.

concat()

This method is used to concatenate two or more arrays. It does not change an existing array and returns a new array after concatenating multiple arrays.

const myArray = [1.2.3.4.5];
const myArray2 = [10.20.30.40.50];
myArray.concat(myArray2);
/ / -- -- -- -- -- -- -- > output: [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
Copy the code

from()

The from() method is used to return an array from an object with a length attribute or an iterable object. Return true if the object is an array, false otherwise.

Usage: Array.from(object, mapFunction, ThisValue object the object to be converted into an array (required) mapFunction the function to be called for each element in the array (optional) thisValue mapFunction (mapFunction) this object (optional)

const myString = "XPOET";
Array.from(myString);
// -------> output: ["X", "P", "O", "E", "T"]

const mySet = new Set(["a"."a"."b"."c"]);
Array.from(mySet);
// -------> output: ["a", "b", "c"]

Array.from([1.2.3].(x) = > x * 10);
-------> output: [10, 20, 30]
Copy the code

reverse()

This method is used to reverse the order of the elements in the array so that the first element is the last and the last element is the first.

const myArray = ["e"."d"."c"."b"."a"];
myArray.reverse();
// -------> output: ["a", "b", "c", "d", "e"]
Copy the code

forEach()

This method is used to loop through each element in the array and pass the element to the callback function.

ForEach () does not execute on empty arrays.

const myArray = [
  { id: 1.name: "Job" },
  { id: 2.name: "Alan" },
  { id: 3.name: "Lily"},]; myArray.forEach((element) = > console.log(element.name));
// -------> output: Job
// Alan
// Lily
Copy the code

find()

Finds and returns the elements in the array that match the criteria. If more than one element is eligible, only the first element is returned. If there is no qualified element, undefined is returned.

Find () does not execute on empty arrays; Do not change the original value of the array.

const myArray = [
  { id: 1.name: "John" },
  { id: 2.name: "Ali" },
  { id: 3.name: "Mass"},]; myArray.find((element) = > element.id === 2);
// -------> output: {id: 3, name: "Ali"}

myArray.find((element) = > element.id === 5);
// -------> output: undefined
Copy the code

findIndex()

Finds and returns the index of the element in the array that matches the criteria. If more than one element is eligible, only the index of the first element is returned. If there are no eligible elements, -1 is returned.

FindIndex () does not execute on empty arrays; Does not change the original value of the array.

const myArray = [
  { id: 1.name: "John" },
  { id: 2.name: "Ali" },
  { id: 3.name: "Mass"},]; myArray.findIndex((element) = > element.id === 3);
// -------> output: 2

myArray.findIndex((element) = > element.id === 7);
// -------> Output: -1
Copy the code

filter()

Filter out all the elements in the array and return a new array. If there are no matching elements in the array, an empty array is returned.

Filter () does not change the original value of the array.

const myArray = [
  { id: 1.name: "John" },
  { id: 2.name: "Ali" },
  { id: 3.name: "Mass" },
  { id: 4.name: "Mass"},]; myArray.filter((element) = > element.name === "Mass");
/ / -- -- -- -- -- -- -- > output: [{id: 3, name: "Mass"}, {id: 4, name: "Mass"}]
Copy the code

includes()

This method is used to determine whether the array contains the specified value, returning true if so and false otherwise.

const myArray = ["A"."B"."C".1.2.3.4.5];
myArray.includes(3);
// -------> output: true

myArray.includes(8);
// -------> output: false

myArray.includes("A");
// -------> output: true
Copy the code

some()

Checks if there are any elements in the array that match the condition, and returns true if there is one element that matches the condition, and false otherwise.

Some () does not execute on empty arrays; Do not change the original value of the array.

const myArray = ["a"."b"."c"."d"."e"];
myArray.some((item) = > item === "d");
// -------> output: true

myArray.some((item) = > item === "h");
// -------> output: false
Copy the code

every()

Checks whether each element in the array matches, returning true if so and false if not.

const myArray = ["a"."b"."c"."d"."e"];
myArray.every((item) = > item === "d");
// -------> output: false

const myArray2 = ["a"."a"."a"."a"."a"];
myArray2.every((item) = > item === "a");
// -------> output: true
Copy the code

sort()

This method sorts the elements of an array and returns the sorted array.

const myArray = [5.4.3.2.1];

/ / ascending
myArray.sort((a, b) = > a - b);
// -------> output: [1, 2, 3, 4, 5]

/ / descending
myArray.sort((a, b) = > b - a);
// -------> output: [5, 4, 3, 2, 1]
Copy the code

map()

Loop over each element in the array and return a new array with the value of the original array element.

Map () does not execute on empty arrays; It doesn’t change the original array.

const myArray = [5.4.3.2.1];
myArray.map((x) = > x * x);
// -------> output: [25, 16, 9, 4, 1]
Copy the code

fill()

This method replaces an element in an array with a fixed value (the fixed value can be letters, numbers, strings, arrays, and so on) and returns the new array.

Syntax: fill(value, start, end) value Parameter 1: fixed value Start parameter 2: index to start replacement end parameter 3: index to end replacement

const myArray = [1.2.3.4.5];
myArray.fill("A".1.3);
// -------> output: [1, "A", "A", 4, 5]
Copy the code

reduce()

The reduce() method takes a function as an accumulator, and each value in the array (from left to right) starts to shrink and eventually evaluates to a value.

Grammar: Reduce (function(Total, currentValue, currentIndex, Array), initialValue) Total CurrentValue Current element (required) currentIndex Index of the current element (optional) Array Array object to which the current element belongs (optional)

const myArray = [1.2.3.4.5];
myArray.reduce((total, value) = > total * value);
// 1 * 2 * 3 * 4 * 5
// -------> output: 120
Copy the code

flat()

The flat() method is used to flatten arrays, that is, to reduce the dimensions of the multi-dimensional array in the array, and finally return the new array.

Flat (depth) depth indicates the depth to be reduced (optional, default is 1)

const myArray = [1.2[3.4.5["A"."B"."C"]]];
myArray.flat();
// -------> output: [[1, 2, 3, 4, 5, ["A", "B", "C"]

myArray.flat(2);
// -------> output: [1, 2, 3, 4, 5, "A", "B", "C"]

// Pass Infinity to expand all the depths of the array, i.e., multidimensional array -> one-dimensional array
myArray.flat(Infinity);
// -------> output: [1, 2, 3, 4, 5, "A", "B", "C"]
Copy the code

flatMap()

This method applies the function to each element of the array and then compresses the result into a new array. This method combines flat() and map().

const myArray = [[1], [2], [3], [4], [5]];
myArray.flatMap((arr) = > arr * 10);
-------> output: [10, 20, 30, 40, 50]

// Equivalent to:
myArray.flat().map((arr) = > arr * 10);
-------> output: [10, 20, 30, 40, 50]
Copy the code

❤️ if it helps you, please like the author ~