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變?yōu)閇1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr變?yōu)閇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現(xiàn)在變?yōu)閇'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變?yōu)閇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結(jié)束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 從索引3開始到結(jié)束: ['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(); // 連續(xù)pop 3次
arr; // []
arr.pop(); // 空數(shù)組繼續(xù)pop不會報(bào)錯(cuò)，而是返回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(); // 連續(xù)shift 3次
arr; // []
arr.shift(); // 空數(shù)組繼續(xù)shift不會報(bào)錯(cuò)，而是返回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個(gè)元素,然后再添加兩個(gè)元素:
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'); // 返回[],因?yàn)闆]有刪除任何元素
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.