Introduction to Javascript Array Basics_Basic Knowledge

Javascript is a magical language, and its arrays are equally unique. We get rid of the dross, extract the essence, and summarize the commonly used best practices. If there are any errors, please point them out.

Javascript array is an array-like object that has the characteristics of an object. When the property names are small, contiguous integers, an array should be used; otherwise, an object should be used.

Array source

All arrays are constructed from Array. Let’s test the constructor property.

var arr = [];
arr.constructor === Array; // true
arr.constructor === Array.prototype.constructor; // true

Create array

//数组字面量方式
var arr1 = [1, 2, 3]; // [1,2,3]

//构造函数方式
var arr2 = new Array();    // [] 空数组
var arr3 = new Array('9');   // ["9"] 一个字符串元素
var arr4 = new Array(9);    // [] 数组长度length为9
var arr5 = new Array([9]);   // [[9]] 相当于二维数组
var arr6 = new Array(1, 2, 3); // [1, 2, 3]
var arr7 = new Array(1, function f(){}, {o : 6}, null,undefined,true);
// 数组可以存储任意混合数据类型

Due to the way arr4 works, when only one numeric parameter is passed to the Array constructor, the constructor will return an empty array with the length attribute set. Therefore, it is recommended to use the array literal method, which is short and concise.

Detect whether the object is an array

var arr1 = [1, 2, 3];
typeof(arr1); // object

It is well known that typeof does not detect types correctly.

arr1 instanceof Array; //true

The instanceof method has no problem within a web page. Once other web pages are nested, there will be two global scopes, and there will be problems in the detection when calling each other.

Array.isArray(arr1); // true

Array.isArray() is a new method in ECMAScript5 and has no defects. The only problem is that the IE8 browser does not support it, and the IE9 browser does not support it in strict mode.

Object.prototype.toString.apply(arr1).slice(8, -1); // Array

The last way is the best way to detect the type.

Array length

The length of the array is also its attribute. Increasing the length will not cause an out-of-bounds error.
The length value is equal to the largest integer attribute name of the array plus 1.

var arr1 = [];
arr1[9] = 1; // 长度为10，只包含一个元素的数组

Set a small value to delete attributes whose names are greater than or equal to length.
If the length value is set to 0, it is equivalent to clearing the array.

var arr2 = [1, 2, 3, 4, 5];
arr2.length = 3; // [1, 2, 3]
arr2.length = 0; // []

Array traversal

To traverse an array, do not use a for in loop to traverse the array, because for in will traverse all properties on the prototype chain, but we don’t need so many. It is recommended to use for loop.

var arr1 = [1, 2, 3];
arr1.test = 9;

//for in 方式
for(var prop in arr1){
  cosole.log(prop, arr1[prop]);
}
// 输出如下
// 0 1
// 1 2
// 2 3
// test 9

//for循环方式
for(var i = 0, len = arr1.length; i < len; i++){
  console.log(arr1[i]);
}
//输出如下
// 1
// 2
// 3

We see that the for in method has an extra test value, which can be eliminated using the hasOwnProperty function, but that will be much slower than the for loop method.
Caching the array length is a necessary step, and there is a performance overhead for each access (the latest browsers have optimized this aspect).

Summary

A brief introduction to the basic knowledge of Array. At this point, you can have a more comprehensive understanding of Array. The next article introduces the Array method.

Although there are many aspects of Javascript that are not easy to understand, over a long period of study, I have slowly fallen in love with it (because there are no girls for me to love now).