In programming languages, arrays (Array) are a very common function; they are a special variable that can be used to store multiple numeric values at the same time. However, when it comes to JavaScript, there are many other things to explore.
In this article, we will discuss three less common features of JavaScript arrays.
1. Add custom properties to the array
When searching for definitions about JavaScript arrays online, you will find that almost everyone has the same definition of arrays: an object.
In fact, everything we process with JavaScript can be considered an object. There are two types of data in JavaScript, the basic type is the object type, but the basic type is basically included in the object type.
Arrays, functions, and Date are all predefined objects in JavaScript, and they all contain methods, properties and their respective standardized syntax.
JavaScript arrays have the following three different properties:
1) The index of the array is also its attribute
2) Built-in properties
3) You can add custom properties yourself
The first two attributes are well known to everyone. You may use them every day, but I still want to say a few more words here, and then let’s talk about how to add custom attributes to arrays.
Take the index as a property
JavaScript arrays can use square bracket syntax, such as var ary = ["orange","apple","lychee"];.
The index of an array element is basically a property, and the names of its properties are always non-negative integers.
The index element pair of an array is similar to a key value pair of an object. Indexes are unique features of array objects, unlike other built-in properties, which can be configured individually through square brackets, such as ary[3] = "peach";.
Built-in properties
Arrays have built-in properties such as array.length. This length property contains an integer value that represents the length of the array.
Generally speaking, built-in properties can often be found in predefined JavaScript objects such as arrays. Built-in properties are combined with built-in methods, which can customize ordinary objects to meet different needs.
When accessing built-in properties, you can use two syntaxes: object.key or object["key"]. That is, when you get the length of the array, you can write it as ary["length"].
Create custom properties for array objects
Now let's talk about how to add custom properties to an array. An array is a predefined object that stores different kinds of values in different indexes.
Normally, we don't need to add custom attributes to arrays; for this reason, when we first learned JavaScript, no one told us that we could add attributes to arrays. In fact, if you want to add key value pairs to the array like you treat a general object, you can also use a general object to achieve your goal. However, this is not to say that there are no special cases at all, in some cases you can take advantage of the fact that an array is also an object and add one or more custom properties to it.
For example, you can add a custom property to the array that recognizes the element "kind" or "class". For details, please refer to the example below:
var ary = ["orange","apple","lychee"];ary.itemClass = "fruits";console.log(ary + " are " + ary.itemClass);
Please note that the custom properties you add to the array are countable, that is, they can be selected by loops such as for...in.
2. Loop in array elements
You might say, "I've known this for a long time." That's right, you already know how to index array elements. But you may feel that the statement "looping in array elements" is a bit abstract because what we really loop is the index of the array.
Since array indexes are all composed of non-negative integers, we usually start from 0 until the entire length of the array to iterate over the integer value, and then use that iterated value to obtain the array element according to the specific index.
However, since ECMAScript6 appears, we can no longer care about indexes and loop directly in array values, and this operation can be done using a for...of loop.
In an array, the for...of loop can loop the array elements according to the order of the index. In other words, it can control the iteration of the index and obtain an existing array value based on the given index. This loop is very practical if you just want to loop through all array elements and use them.
var ary = ["orange","apple","lychee"];for (let item of ary){ console.log(item);}For comparison, with the regular for loop, we get the indices instead of the values as output. var ary = ["orange","apple","lychee"];for (var item = 0; item < ary.length; item++){ console.log(item);}3. The number of elements is not equal to their length
Generally speaking, when we talk about array length, we think that its length is either the number of array values or the length we set for the array manually. But in fact, the length of the array depends on the largest existing index inside it.
Length is a very flexible property. Whether you have adjusted the length of the array or not, as long as you keep adding new values to the array, its length will also increase.
var ary = [];ary.length = 3;console.log(ary.length);ary[5] = "abcd";console.log(ary.length);
In the example above, you can see that I specified only one value to the index 5 of the array, and then the length became 6. Now, if you think you add a value to index 5 and the array will automatically create index 0-4, then your speculation will be wrong. There is no index 0-4 that should exist in the array. You can use the in operator to view it.
var ary = [];ary.length = 3;console.log(ary.length);ary[5] = "abcd";console.log(ary.length);console.log(0 in ary);
The above ary array is made into a sparse array by us. The index of this array will not be continuously created, and there is air between the indexes. The opposite of the sparse array is a dense array. The index of dense arrays is continuously created, with the number of elements equal to their length.
The length property of an array can also be used to shorten numbers, ensuring that the maximum number of indexes in the array is always smaller than the array itself, because by default, the value of length will always be greater than the highest number of indexes.
In the example below, you can see that I used the way to reduce the length of the ary array to community the elements in index 5.
var ary = [];ary.length = 3;console.log(ary.length);ary[5] = "abcd";console.log(ary.length);ary.length = 2;console.log(ary.length);console.log(ary[5]);
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.