JavaScript array

JavaScript Array

JavaScript Array can contain any data type, and each element is accessed through an index.

To obtain the length of Array, directly access the length attribute:

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

Please note that directly assigning a new value to the length of Array will cause the size of the Array to change:

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]

Array can modify the corresponding element to a new value through the index. Therefore, assigning a value to the index of the Array will directly modify the Array:

var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']

Please note that if the index exceeds the range when assigning through the index, It will also cause changes in the size of the Array:

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

Most other programming languages ​​do not allow direct changes to the size of the array, and out-of-bounds access to the index will report an error. However, JavaScript Array does not have any errors. When writing code, it is not recommended to directly modify the size of the Array. When accessing the index, make sure that the index does not go out of bounds.

indexOf

Similar to String, Array can also search for the position of a specified element through indexOf():

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

Note, numbers 30 and the string '30' are different elements.

slice

slice() is the substring() version of String. It intercepts some elements of Array and then returns a new Array:

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

Note that the start and end parameters of slice() include the start index and do not include the end index.

If you do not pass any parameters to slice(), it will intercept all elements from beginning to end. Using this, we can easily copy an Array:

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

push and pop

push() adds several elements to the end of the Array, and pop() Delete the last element of Array:

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []

unshift and shift

If you want to add several elements to the head of Array, use the unshift() method, shift( ) method deletes the first element of the Array:

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []

sort

sort() can sort the current Array, and it will directly modify the current Array. Element position, when called directly, is sorted according to the default order:

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

Can it be sorted in the order specified by ourselves? Absolutely, we will talk about it in the following functions.

reverse

reverse() removes the elements of the entire Array, that is, reverses:

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

splice

The splice() method is a "universal method" for modifying Array. It can delete several elements starting from the specified index, and then add several elements from that position:

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat

concat() methodConnects the current Array to another Array and returns a new Array:

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

Please note that concat( ) method does not modify the current Array, but returns a new Array.

In fact, the concat() method can receive any number of elements and Array, and automatically split the Array, and then add them all to the new Array:

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

The join() method is a very practical method. It connects each element of the current Array with the specified string, and then returns the connected string:

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

If the element of Array is not a string, it will be automatically converted to a string before concatenation.

Multi-dimensional array

If an element of the array is an Array, a multi-dimensional array can be formed, for example:

var arr = [[1, 2, 3], [400, 500, 600], '-'];

The above Array contains 3 elements, the first two of which are themselves Arrays.