How to use array.at () of javascript

This article mainly introduces the javascript array.at () how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this javascript array.at () article, let's take a look at it.

1. Limitations of square bracket syntax

Accessing array elements through an index generally uses square brackets array [index]:

Const fruits = ['orange',' apple', 'banana',' grape']; const item = fruits [1]; item; / / = > 'apple'

The expression array [index] evaluates to an array item located in index, which is also called a property accessor.

In most cases, square bracket syntax is a good way to access items through a positive index (> = 0), and its syntax is simple and readable.

But sometimes we want to access the element from the end, not from the beginning. For example, access the last element of the array:

Const fruits = ['orange',' apple', 'banana',' grape']; const lastItem = fruits [fruits.length-1]; lastItem; / / = > 'grape'

Fruits [fruits.length-1] is the way to access the last element of the array, where fruits.length-1 is the index of the last element.

The problem is that the square bracket accessor does not allow you to access items directly from the end of the array, nor does it accept negative subscripts.

Fortunately, a new proposal (phase 3 up to January 2021) introduces the at () method into arrays (as well as typed arrays and strings) and addresses many of the limitations of square bracket accessors.

2.array.at () method

Simply put, array.at (index) accesses the element at the index parameter.

If the index parameter is a positive integer > = 0, the method returns the item at that index.

Const fruits = ['orange',' apple', 'banana',' grape']; const item = fruits.at (1); item; / / = > 'apple'

If the index parameter is greater than or equal to the length of the array, the method returns undefined, as with regular accessors:

Const fruits = ['orange',' apple', 'banana',' grape']; const item = fruits.at; item; / / = > undefined

What's really amazing is that when you use a negative subscript to the array.at () method, the element is accessed from the end of the array.

Const lastItem = fruits.at (- 1); lastItem; / / = > 'grape'

Here is a more detailed example of the array.at () method:

Const vegetables = ['potatoe',' tomatoe', 'onion']; vegetables.at (0); / / = >' potatoe' vegetables.at (1); / / = > 'tomatoe' vegetables.at (2); / / = >' onion' vegetables.at (3); / / = > undefined vegetables.at (- 1); / / = > 'onion' vegetables.at (- 2); / / = >' tomatoe' vegetables.at (- 3); / / > 'potatoe' vegetables.at (- 4); / / = > undefined

If negIndex is less than 0, then array.at (negIndex) accesses the same element as array.length + negIndex, as shown below:

Const fruits = ['orange',' apple', 'banana',' grape']; const negIndex =-2; fruits.at (negIndex); / / = > 'banana' fruits [fruits.length + negIndex]; / / >' banana'

3. Summary

Square bracket syntax in JS is a common and good way to access items through an index. Just put the index expression in square brackets array [index] and get the array item at that index.

However, it is not convenient to access an item from the end with a regular accessor because it does not accept negative indexes. So, for example, to access the last element of an array, you must use a workaround expression

Const lastItem = array [array.length-1]

Fortunately, the new array method array.at (index) allows us to access array elements through indexes in the same way as regular accessors. Also, array.at (index) accepts a negative index, in which case the method fetches the element from the end:

Const lastItem = array.at (- 1)

Just introduce array.prototype.at polyfill into our application and you can use the array.at () method.

This is the end of the article on "how to use array.at () of javascript". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use array.at () of javascript". If you want to learn more, you are welcome to follow the industry information channel.