Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

3.3 New Methods of the Array Object

The built-in Array object has a number of new methods that we can use to interact with Arrays. In this lesson I'll show you some of the most useful additions.

3.3 New Methods of the Array Object

Hi, folks. In this lesson we're going to look at the new methods the ES6 brings to the built-in array objects. Mostly these are instance methods that we can call on arrays that we create ourselves. But there are two static methods that we invoke directly on the array objects, the of method and the from method. Let's take a quick look at these two first. The of method is an alternative to the array constructor. We can pass it any number of arguments, and these arguments will become individual items in the new array. As you can see, arguments of any type are accepted by the of method. The main difference between of and the array constructor is with integers. If you pass a number to the array constructor, an array with that many elements is created, all of which will be undefined. Whereas, if you pass a number to the of method, that number will become an element in the array that gets returned, the same as any other type of argument, like a string, or an array, or an object. The from method is used to create an array from an array-like object. For example, we could we could create a true array from the arguments array like object within a function. The array returns by the from method is a true array instance, and inherits all of the regular methods you'd expect, like four each. Let's take a look at the new instance methods now. First of all, let's create a new array that we can use in the next few examples. So we have a simple array containing two objects. Each object has a name property and a super hero name property. The values of all of these properties are simple strings. A new method we have for determining whether an array contains a given item is the find method. This method returns the value that was searched for from the array if the item is found or undefined if it isn't found. We use it with the call back function that is used to test each item in the array. The find method is called on the array instance. The callback function we passed this method is invoked for each item in the array. And is automatically passed to the current item as the first argument. The index is also passed as the second argument, and the array being searched as the third argument. Although, in this example only the first argument is used. The call back function should return true is the array item is the one we're looking for, or false if it is not. As soon as the call back returns true, the method will return the current array item. If true is not returned from the call back, the method returns undefined. We can also optionally set the this object inside the callback function by passing an object as the second argument to the find method. Another new method that we have at our disposal is the find index method. This method works in a very similar way to find. We pass it a call back function which is invoked for each item in the array, and should return true if the item exists. In this case, however, the index of the item is returned rather than the item itself. If the call back function returns false for each item in the array, minus one is returned instead. In this case we see zero because the object with the superhero name of Spiderman, is the first item in the test array. As well as finding items or there indices, we also have some new methods for manipulating the content of arrays. One such method is the copy within method. With this method, we can copy one or more of the existing elements in the array to a new position within the array, overwriting any values that may exist at that index already. This method requires at least two parameters. The first is the index to start copying the elements to, and the second is the index to start copying from. We can optionally provide a third argument that specifies the index to stop copying at. But if this isn't supplied, the method will copy to the end of the array. All arguments are coerce to numbers and truncated to integers. In this case, the method will overwrite the second item in the array, Batman, because we specified one as the first argument. The second argument specifies the item to be copied should start at the first item in the array. So our array will end up with two Spiderman objects. We can't use this method to add new items to the array by specifying an index greater than the array's length as the first argument. This method is mutable, so the Superhero array itself is changed rather than a copy of it being created. There were also several other array methods that return iterators. Iterators are a new concept in ES6 and we'll look at these in more detail later in the course. So in this lesson we learned about some the new methods that ES6 adds to the array object. We saw that we can easily create arrays using either the, of or from methods. We also saw how to use the find and find index methods to find a specific item in an array or its index. We also looked at the copy within method to see how to manipulate the contents of an array. Thanks for watching.

Back to the top