Common built-in array methods in JavaScript

Common built-in array methods in JavaScript

useful array methods

Note took from:

Freeman, Adam. Pro React 16. Berkeley, CA: Apress, 2019. https://doi.org/10.1007/978-1-4842-4451-7.

Method Description
concat(otherArray) This method returns a new array that concatenates the array on which it has been called with the array specified as the argument. Multiple arrays can be specified.
join(separator) This method joins all the elements in the array to form a string. The argument specifies the character used to delimit the items.
pop() This method removes and returns the last item in the array.
shift() This method removes and returns the first item in the array.
push(item) This method appends the specified item to the end of the array.
unshift(item) This method inserts a new item at the start of the array.
reverse() This method returns a new array that contains the items in reverse order.
slice(start, end) This method returns a section of the array.
sort() This method sorts the array. An optional comparison function can be used to perform custom comparisons.
splice(index, count) This method removes count items from the array, starting at the specified index. The removed items are returned as the result of the method.
every(test) This method calls the test function for each item in the array and returns true if the function returns true for all of the items and false otherwise.
some(test) This method returns true if calling the test function for each item in the array returns true at least once.
filter(test) This method returns a new array containing the items for which the test function returns true.
find(test) This method returns the first item in the array for which the test function returns true.
findIndex(test) This method returns the index of the first item in the array for which the test function returns true.
forEach(callback) This method invokes the callback function for each item in the array, as described in the previous section.
includes(value) This method returns true if the array contains the specified value.
map(callback) This method returns a new array containing the result of invoking the callback function for every item in the array.
reduce(callback) This method returns the accumulated value produced by invoking the callback function for every item in the array.

Since many of the methods in the table return a new array, these methods can be chained together to process data. For example:

let products = [
  { name: "Hat", price: 24.5, stock: 10 },
  { name: "Kayak", price: 289.2, stock: 4 },
  { name: "Soccer Ball", price: 10.5, stock: 7 },
  { name: "Running Shoes", price: 233, stock: 0 }
]

let totalValue = products.filter(item => item.stock > 0)
  .reduce((total, item) => total + item.stock * item.price , 0)

console.log(`Total value: $${totalValue.toFixed(2)}`);
Total value: $1475.30
Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.41 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple template language that Jekyll uses to process pages for your site. With Liquid you can output complex contents without additional plugins.

Practising closures in JavaScript

JavaScript Notes

2018.12.17

Practising closures in JavaScript

JavaScript is a very function-oriented language. As we know, functions are first class objects and can be easily assigned to variables, passed as arguments, returned from another function invocation, or stored into data structures. A function can access variable outside of it. But what happens when an outer variable changes? Does a function get the most recent value or the one that existed when the function was created? Also, what happens when a function invoked in another place - does it get access to the outer variables of the new place?

Hands on IBM Cloud Functions with CLI

Tools

2020.10.20

Hands on IBM Cloud Functions with CLI

IBM Cloud CLI allows complete management of the Cloud Functions system. You can use the Cloud Functions CLI plugin-in to manage your code snippets in actions, create triggers, and rules to enable your actions to respond to events, and bundle actions into packages.