ES core syntax (2)

Array array

An array is a set of values arranged in order. When storing values, the array adds an index value to each element. The entire array is represented by [].

var arr = [1,2,3,4];

The above code creates an array, which includes four elements. Each element is assigned an index by default. It can be viewed by printing.

console.log(arr);

/* Output results:
	0: 1
	1: 2
	2: 3
	3: 4
	length: 4
*/

In addition to adding array elements at the beginning of array creation, you can also add elements after creating the array.

For example:

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

It should be noted that when creating an array in the above way, the index of the array should adopt a continuous digital index, otherwise it will form a vacancy.

For example:

var arr = [];
arr[0] = 1;
// A vacancy will be formed in the middle, and the value is undefined when taking the value
arr[10] = 2;

Any type of data can be placed in the array, for example:

var arr = [
  {a: 1},
  [1, 2, 3],
  function() {return true;}
];

arr[0] // Object {a: 1}
arr[1] // [1, 2, 3]
arr[2] // function (){return true;}

If the array is still stored in the array, a multidimensional array is formed.

For example:

var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4

You should know that in JavaScript, you can view the type of data through typeof. When you view the type of the array through typeof, you will get the result object.

console.log(typeof([])) // object

In js, an array is a special object. Relative to an object, the key name of an array is a set of integers sorted by order (0,1,2,3...).

You can obtain the key of the array through the Object.keys() method.

var arr = ['a', 'b', 'c'];

Object.keys(arr)
// ["0", "1", "2"]

Because the key names of array members are fixed (the default is always 0, 1, 2...), the array does not specify a key name for each element, but each member of the object must specify a key name. JavaScript language stipulates that the key names of objects are all strings, so the key names of arrays are actually strings. The reason why it can be read with numeric value is that the key name of non string will be converted to string.

var arr = ['a', 'b', 'c'];

arr['0'] // 'a'
arr[0] // 'a

Object has two methods to read members: point structure (object.key) and square bracket structure (object[key]). However, point structures cannot be used for numeric key names.

var arr = [1, 2, 3];
arr.0 // SyntaxError

In the above code, the writing of arr.0 is illegal because a single value cannot be used as an identifier. Therefore, array members can only be represented by square brackets arr[0] (square brackets are operators and can accept numeric values).

In the array, there is a length attribute, which can return the number of array members.

var arr = [1,2,3,4];
console.log(arr.length); // 4

As long as it is an array, it must have a length attribute. This property is a dynamic value equal to the maximum integer in the key name plus 1.

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr[1000] = 'e';
arr.length // 1001

The above code shows that the numeric keys of the array do not need to be continuous, and the value of the length attribute is always 1 greater than the largest integer key. In addition, this also shows that the array is a dynamic data structure, and the members of the array can be increased or decreased at any time.

The length attribute is writable. If you artificially set a value less than the current number of members, the number of members of the array will be automatically reduced to the value set by length.

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

The above code shows that when the length attribute of the array is set to 2 (that is, the maximum integer key can only be 1), the integer key 2 (value c) is no longer in the array and is automatically deleted.

An effective way to empty an array is to set the length property to 0.

var arr = [ 'a', 'b', 'c' ];

arr.length = 0;
arr // []

If the length is artificially set to be greater than the current number of elements, the number of members of the array will increase to this value, and the new positions are empty.

var a = ['a'];

a.length = 3;
a[1] // undefined

The above code indicates that when the length attribute is set to be greater than the number of arrays, the new positions will be read and returned undefined.

If you artificially set length to an illegal value, JavaScript will report an error.

// Set negative value
[].length = -1
// RangeError: Invalid array length

// The number of array elements is greater than or equal to the 32nd power of 2
[].length = Math.pow(2, 32)
// RangeError: Invalid array length

// Set string
[].length = 'abc'
// RangeError: Invalid array length

It is worth noting that since an array is essentially an object, you can add attributes to the array, but this does not affect the value of the length attribute.

var a = [];

a['p'] = 'abc';
a.length // 0

a[2.1] = 'abc';
a.length // 0

The above code sets the key of the array to string and decimal respectively, and the result does not affect the length attribute. Because the value of the length attribute is equal to the maximum number key plus 1, and the array has no integer key, the length attribute remains 0.

If the key name of the array is to add a value out of range, the key name will be automatically converted to a string.

var arr = [];
arr[-1] = 'a';
arr[Math.pow(2, 32)] = 'b';

arr.length // 0
arr[-1] // "a"
arr[4294967296] // "b"

In the above code, we added two illegal numeric keys to the array arr, and the length attribute did not change. These numeric keys become string key names. The reason why the last two lines get the value is that when taking the key value, the numeric key name will be changed to string by default.

for..in loop through array

The for...in loop can traverse not only the object, but also the array. After all, the array is only a special object.

var a = [1, 2, 3];

for (var i in a) {
  console.log(a[i]);
}
// 1
// 2
// 3

However, for...in traverses not only all numeric keys of the array, but also non numeric keys.

var a = [1, 2, 3];
a.foo = true;

for (var key in a) {
  console.log(key);
}
// 0
// 1
// 2
// foo

When traversing the array, the above code also traverses the non integer key foo. Therefore, it is not recommended to use for...in to traverse arrays.

Array traversal can consider using a for loop or a while loop.

var a = [1, 2, 3];

// for loop
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while Loop 
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

var l = a.length;
while (l--) {
  console.log(a[l]);
}

When the index values of the created array are discontinuous, the empty bits of the array will be formed. Or when you delete an array element through delete, the array will also form a vacancy and will not affect the length.

When traversing the array, the empty bits will also be traversed, and the result is undefined.