28 Javascript Array Methods, Developer's Cheat Sheet

Author: Rahul Sharma
Translator: Front-end Xiaozhi Source: dev

If you have dreams and dry goods, you can search for [Great Relocation to the World] on WeChat and pay attention to this Shuwanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

One question in the recent interview is to write at least 15 array methods. The array method is usually used in 6-7. Suddenly, I have to write 15 at once, but I am still a little stuck. I will organize a wave today and review it later. .

Array.map()

map() method creates a new array consisting of the return value of the provided function being called once for each element in the original array.

 const list = [😫, 😫, 😫, 😫];
list.map((⚪️) => 😀); // [😀, 😀, 😀, 😀]

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

Array.filter()

filter() method creates a new array containing all elements of the tests implemented by the provided function.

 const list = [😀, 😫, 😀, 😫];
list.filter((⚪️) => ⚪️ === 😀); // [😀, 😀]

// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

Array.reduce()

reduce() method executes one of the provided reducer functions for each element in the array in order, and each run reducer will use the previous element's calculation result as Parameters are passed in, and their results are finally aggregated into a single return value.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.reduce((⬜️, ⚪️) => ⬜️ + ⚪️); // 😀 + 😫 + 😀 + 😫 + 🤪

// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

Array.reduceRight()

The function of the reduce() reduceRight() method is the same as that of ---04ce82ac61e32b5fe53d47e7dda58628---, except that reduceRight() accumulates the array items from the end of the array forward.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.reduceRight((⬜️, ⚪️) => ⬜️ + ⚪️); // 🤪 + 😫 + 😀 + 😫 + 😀

// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

Array.fill()

fill() method fills an array with a fixed value from the start index to the end index of all elements. Termination index is not included.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.fill(😀); // [😀, 😀, 😀, 😀, 😀]


const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

Array.find()

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

 const list = [😀, 😫, 😀, 😫, 🤪];
list.find((⚪️) => ⚪️ === 😀); // 😀
list.find((⚪️) => ⚪️ === 😝); // undefined


const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

Array.indexOf()

indexOf() method returns the first index in the array at which a given element can be found, or -1 if it does not exist.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.indexOf(😀); // 0
list.indexOf(😡); // -1

// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

Array.lastIndexOf()

 arr.lastIndexOf(searchElement[, fromIndex])

lastIndexOf() method returns the index of the last element in the array (that is, a valid JavaScript value or variable), or -1 if it does not exist. Search forward from the back of the array, starting at fromIndex .

 const list = [😀, 😫, 😀, 😫, 🤪];
list.lastIndexOf(😀); // 3
list.lastIndexOf(😀, 1); // 0

// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

Array.findIndex()

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

 const list = [😀, 😫, 😀, 😫, 🤪];
list.findIndex((⚪️) => ⚪️ === 😀); // 0

// You might be thinking how it's different from `indexOf` 🤔
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

// OR
const array = [{
  id: 😀
}, {
  id: 😫
}, {
  id: 🤪
}];

array.findIndex((element) => element.id === 🤪); // 2

Array.includes()

includes() method is used to judge whether an array contains a specified value. According to the situation, if it contains, it will return true , otherwise it will return false .

 const list = [😀, 😫, 😀, 😫, 🤪];
list.includes(😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

Array.pop()

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 list = [😀, 😫, 😀, 😫, 🤪];
list.pop(); // 🤪
list; // [😀, 😫, 😀, 😫]

// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

Array.push()

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

 const list = [😀, 😫, 😀, 😫, 🤪];
list.push(😡); // 5
list; // [😀, 😫, 😀, 😫, 🤪, 😡]

// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

Array.shift()

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 list = [😀, 😫, 😀, 😫, 🤪];
list.shift(); // 😀
list; // [😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]

Array.unshift()

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 list = [😀, 😫, 😀, 😫, 🤪];
list.unshift(😡); // 6
list; // [😡, 😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

Array.splice()

splice() method modifies the array by deleting or replacing existing elements or adding new elements in place, and returns the modified content in the form of an array. This method changes the original array.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.splice(1, 2); // [😀, 😫]
list; // [😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]

Array.slice()

slice()方法返回一个新的数组对象， begin end的浅拷贝（ begin , excluding end ). The original array will not be altered.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.slice(1, 3); // [😫, 😀]
list; // [😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]

Array.join()

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

 const list = [😀, 😫, 😀, 😫, 🤪];
list.join('〰️'); // "😀〰️😫〰️😀〰️😫〰️🤪"

// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"

Array.reverse()

reverse() method reverses the positions of elements in an 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 list = [😀, 😫, 😀, 😫, 🤪];
list.reverse(); // [🤪, 😫, 😀, 😫, 😀]
list; // [🤪, 😫, 😀, 😫, 😀]

// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

Array.sort()

sort() method sorts the elements of an array with an in-place algorithm and returns an array. The default sort order is constructed when elements are converted to strings and then compared for their sequences of UTF-16 code unit values.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.sort(); // [😀, 😀, 😫, 😫, 🤪]

// This make more sense 🤔
const array = ['D', 'B', 'A', 'C'];
array.sort(); // 😀 ['A', 'B', 'C', 'D']

// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // 😧 [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // 😀 [1, 2, 3, 4, 10]

Array.some()

some() method to test whether at least one element in the array passes the provided function test. It returns a value of type Boolean.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.some((⚪️) => ⚪️ === 😀); // true
list.some((⚪️) => ⚪️ === 😡); // false

// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false

Array.every()

every() method tests whether all elements in an array can pass the test of a specified function. It returns a boolean value.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.every((⚪️) => ⚪️ === 😀); // false

const list = [😀, 😀, 😀, 😀, 😀];
list.every((⚪️) => ⚪️ === 😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false

const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true

Array.from()

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

 const list = 😀😫😀😫🤪;
Array.from(list); // [😀, 😫, 😀, 😫, 🤪]

const set = new Set(['😀', '😫', '😀', '😫', '🤪']);
Array.from(set); // [😀, 😫, 🤪]

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.of()

Array.of() method creates a new array instance with a variable number of arguments, regardless of the number or types of arguments.

The difference between Array.of() and the Array constructor is the handling of integer arguments: Array.of(7) creates an array with a single element of 7, while Array(7) creates an empty array of length 7 ( Note: This refers to an array with 7 empty bits, not an array of 7 undefined ).

 Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.isArray()

Array.isArray() Used to determine if the passed value is an Array.

 Array.isArray([😀, 😫, 😀, 😫, 🤪]); // true
Array.isArray(🤪); // false

// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

Array.at()

at() method takes an integer value and returns the item at that index, positive and negative numbers are allowed. Negative integers count down from the last item in the array.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.at(1); // 😫

// Return from last 🤔
list.at(-1); // 🤪
list.at(-2); // 😫

// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4

Array.copyWithin()

 arr.copyWithin(target[, start[, end]])

copyWithin() method shallowly copies part of an array to another location in the same array and returns it without changing the length of the original array.

 const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(1, 3); // [😀, 😀, 🤪, 😫, 🤪]

const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(0, 3, 4); // [😫, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

If you don't understand, you can read the introduction of MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin

Array.flat()

 var newArray = arr.flat([depth])
// depth 可选:指定要提取嵌套数组的结构深度，默认值为 1。

flat() method will recursively traverse the array at a specified depth, and combine all elements with the elements in the traversed subarrays into a new array returned.

 const list = [😀, 😫, [😀, 😫, 🤪]];
list.flat(Infinity); // [😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

Array.flatMap()

flatMap() method first maps each element using a map function, then compresses the result into a new array. It's almost the same as map concatenating flat with a depth of 1, but flatMap is usually slightly more efficient when combined into one method.

 const list = [😀, 😫, [😀, 😫, 🤪]];
list.flatMap((⚪️) => [⚪️, ⚪️ + ⚪️ ]); // [😀, 😀😀, 😫, 😫😫, 😀, 😀😀, 😫, 😫😫, 🤪, 🤪🤪]

// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]

---

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

Original: https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.