Detailed explanation of relevant knowledge about arrays in JavaScript_JavaScript

Create array

The declaration of arrays in js can be in the following ways:

var arr = [];  // 简写模式
var arr = new Array(); // new一个array对象
var arr = new Array(arrayLength); // new一个确定长度的array对象

It should be noted:

• Although the third method declares the length of the array, the actual length of the array is variable. In other words, even if the length is specified to be 5, elements can still be stored outside the specified length, and the length of the array will also change accordingly.
• In addition, one thing needs to be made clear:
• js is a weakly typed language, that is, the types of elements in the array do not need to be the same.

Give an example of inconsistent element types in an array:

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

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

Array element access

The index value of JavaScript array also starts from 0. We can access the array elements directly through the array name subscript.

The sample code is as follows:

var arr = [1, 2, 3];
console.log(arr[0]);
console.log(arr[1]);

In addition, it is recommended to use the continuous for loop mode for array traversal, and for-in is not recommended. For specific reasons, please refer to: Loop through array in JavaScript

The sample code for traversing an array is as follows:

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

Note:

In the above code, a small optimization is to obtain the size of the array in advance, so that there is no need to query the array size every time it is traversed. For very large arrays, it can improve certain efficiency.

Add array element

There are three methods to add new elements to an array, namely: push, unshift, and splice. Below I will introduce these three methods respectively.
push

push method adds elements to the end of the array. The sample code is as follows:

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

The execution result is:

1
2
3

unshift

The unshift method adds elements to the head of the array. The sample code is as follows:

var arr = [];
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

The execution results are as follows:

3
2
1

splice

The splice method inserts a new element at a specified position in the array, and the previous elements are automatically moved back sequentially. Note that the function prototype of splice is:

array.splice(index, howMany, element...)

howMany indicates the number of elements to be deleted. If you are just adding elements, howMany needs to be set to 0 at this time.

The sample code is as follows:

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

arr.splice(1, 0, 7, 8, 9);

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

The execution results are as follows:

1
7
8
9
2
3
4

Delete array elements

Similar to adding elements to an array, there are three methods for deleting elements in an array: pop, shift and splice. Next, we will explain the usage of these three functions respectively.
pop

The pop method removes the last element in the array. The combination of push and pop can realize the function of an array similar to a stack (first in, last out). The sample code is as follows:

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

while (arr.length != 0) {
  var ele = arr.pop();
  console.log(ele);
}

shift

The shift method removes the first element and the elements in the array are automatically moved forward. (This method definitely corresponds to efficiency issues, and the time complexity is O(n)).

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

while (arr.length != 0) {
  var ele = arr.shift();
  traverseArray(arr);
}

Everyone can consider the results by themselves.
splice

When adding array elements, we talked about splice. There is a howMany parameter in this function prototype, which represents how many elements are deleted starting from index.
The sample code is as follows:

var arr = [1, 2, 3, 4, 5, 6, 7];

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

arr.splice(1, 3);
traverseArray(arr);

The execution result is:

1
5
7

Copying and intercepting arrays

For example, the code is as follows:

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;

At this time, arr2 only saves the address of the arr1 array in the heap memory, and does not re-apply for memory in the heap memory to create an array. So modifications to arr2 will affect arr1 at the same time. So, what if we need to copy an array? This leads to the slice and concat functions that need to be learned.
slice

The slice here is the same as the slice in python syntax, both return slices of arrays. The slice function prototype is:

array.slice(begin, end)

Returns all elements from begin to end. Note that begin is included but end is not included.
The default begin starts from 0 by default. The default end is to the end of the array.

Therefore, we can copy the array through the following code:

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice();
arr2[2] = 10000
function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

traverseArray(arr1);
traverseArray(arr2);

The execution results are as follows:

1
2
3
4
1
2
10000
4

concat

The concat method will create a new array, and then put the elements in the object that calls it (the object pointed to by this) and the elements in the array type parameters of all parameters and the non-array type parameters themselves into this in order New array, and returns the array.

The sample code is as follows:

var alpha = ["a", "b", "c"];
var number = [1, 2, 3]

// 新数组为["a", "b", "c", 1, 2, 3]
var complex = alpha.concat(number);