3 things you didn’t know about JavaScript arrays

In programming languages, array (Array) is a very commonly used function; it is a special variable that can be used to store multiple values ​​at the same time. However, there is much more to explore about the power of arrays when it comes to JavaScript.

In this article, we will discuss three not-so-common functions of JavaScript arrays.

1. Add custom attributes to arrays

When searching for the definition of JavaScript arrays on the Internet, you will find that almost everyone has the same definition of arrays. Same thing: an object.

In fact, everything we process with JavaScript can be regarded as an object. There are two data types in JavaScript, basic types and object types, but basic types are basically included in object types.

Arrays, functions, and Date are all predefined objects in JavaScript, and they all contain methods, properties, and their own standardized syntax.

JavaScript arrays have the following three different properties:

1 The index of the array is also its property

2 Built-in properties

3 You can add your own Define attributes

The first two attributes are well-known to everyone, and you may use them every day, but I still want to say a few more words here, and then talk about how to add custom attributes to an array.

Use index as attribute

JavaScript arrays can use square bracket syntax, such as var ary = ["orange","apple","lychee"];.

The index of an array element is basically an attribute, and the name of its attribute is always a non-negative integer.

The index element pair of an array is similar to the key-value pair of an object. Indexes are a unique property of array objects, unlike other built-in properties, they can be configured individually via square brackets, such as ary[3] = "peach";.

Built-in properties

Arrays have built-in properties, such as array.length. The length attribute contains an integer value representing the length of the array.

Generally, built-in properties can often be found in predefined JavaScript objects such as arrays. Built-in properties and built-in methods are combined to customize ordinary objects to meet different needs.

When accessing built-in properties, you can use two syntaxes: object.key or object["key"]. In other words, when getting the length of an array, you can write ary["length"].

Creating custom properties for array objects

Now let’s talk about how to add custom properties to arrays. An array is a predefined object that stores different kinds of values ​​in different indices.

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 an array in the same way as a regular object, you can also use a regular object for that purpose. 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 an object and add one or more custom properties to it.

For example, you can add a custom attribute to the array that identifies the "kind" or "class" of the element. Please see the example below for details:

 var ary = ["orange","apple","lychee"];

ary.itemClass = "fruits";

console.log(ary + " are " + ary.itemClass);

Please note that the custom attributes you add to the array are all countable, that is to say, it can be selected by for...in and other loops.

2. Looping through array elements

You may say: "I've known this for a long time." Yes, you already know how to index array elements. But you may feel that the statement "looping through array elements" is a bit abstract, because what we really loop through is the index of the array.

Since array indexes are composed of non-negative integers, usually we will start from 0 until the full length of the array, iterate the integer value, and then use the iterated value to get an array element based on a specific index.

However, since the emergence of ECMAScript6, we can no longer care about the index and directly loop through the array value, and this operation can be completed using a for...of loop.

In an array, the for...of loop can loop through 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 according to the given index. This loop is useful 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 its length

Generally, when we talk about the length of an array, we think that its length is either the number of array values, or It is the length we set manually for the array. But in fact, the length of the array depends on the largest existing index inside it.

长度是一个非常灵活的属性。无论你是否曾实现调整了数组的长度，只要你不断的给数组添加新的值，它的长度也会随之增长。

 var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);

在上面的例子中，你可以看到我给数组的索引5只指定了一个值，之后长度变成了6。现在，如果你觉得给index 5添加一个值，数组就会自动创建索引0-4，那么你的推测就出现了错误。数组中并没有应经存在的索引0-4。你可以使用in operator来查看。

 var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);

console.log(0 in ary);

上面的ary数组被我们成为稀疏数组（sparse array），这个数组的索引不会持续的被创建，而且索引之间有空气。sparse数组的对立面为密集数组（dense array）。密集数组的索引会被持续的创建，其元素的数量等于其长度。

数组的长度属性也可以用来缩短数字，确保数组中索引的最大数量永远小于数组本身，因为在默认情况下，长度的数值永远会大于索引数量的最高值。

在下面的例子中，你可以看到，我利用减少ary数组长度的方式，社区了索引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]);

 以上就是关于JavaScript数组，你所不知道的3件事的内容，更多相关内容请关注PHP中文网（www.php.cn）！