【JavaScript】JS的Array的用法总结

Array的长度相关问题

可以直接获取Array的长度属性：

var arr = [1,2,3];
var len = arr.length; // 直接计算得到3

很有意思的是，Array是一个动态变化的数据结构，一般来说只是读取类的属性值，但是在JS中修改Array的length的值，变化时直接反应在原数据上的。即：扩大时新的值为undefined。缩小时，原来的数据被放弃。基于这个，可以引申到：如果直接通过下标访问到越界数据，并不会报错，而是会扩大数组范围，没有填充数据的位置数据是undefined。

var arr = [1,2,3,'A','B'];
arr.length; // 5
arr.length = 4; // 'B'这个数据就没了
arr[5] = 4; //  变为[1, 2, 3, "A", undefined × 1, 4]

只有越界赋值时才会扩大数组，并用undefined填充，仅仅是越界访问只会得到undefined，但不会扩大数组。因为只有写操作时才会修改数组。

indexOf

这个直接就是获取指定元素的下标值，注意对比和字符串的indexOf的使用对比即可。

slice操作：类比到字符串的`substring`操作

截取Array的部分元素，返回新的数组.

var arr = [1,2,3,4,5];
arr.slice(1,3); // 从下标1开始到下标2结束，不含下标3
arr.slice(2); // 从下标2开始到结束
arr.slice(); // 不给参数就是从头到尾

有必要强调一下下标的范围问题：一般来说老外的调性是左闭右开–[a,b)[a,b)[a,b)，就是左边的下标包含，右边的下标不包含，基于什么逻辑来这么设定，并不是很清楚。

push和pop操作

push : 向末尾添加一个或多个元素
pop : 删除末尾的一个元素

我们会有一种栈的数据结构的感觉。

var arr = [1,2,3];
arr.push(4,5); // [1, 2, 3, 4, 5]
arr.pop(); // 弹出5

可以这么类比：将Array的尾部当做栈首理解，那么push和pop操作就是成对的对栈的操作。只是Array没有top操作。如果需要还是通过arr[arr.length - 1]来获取的。

`sort`排序操作

默认是递增排序：arr.sort() 即可，会直接修改数组的值，这个和C++的sort函数很像。

`reverse`：反转操作

直接修改原数组，这个通过名称就可以知道要干什么。需要注意的是这个也是函数，需要以函数的形式调用。

`splice`函数：万能方法

这个函数其实结合了两个操作：

从指定的下标处开始删除若干元素
从该指定下标处添加若干元素

var arr = [1,2,3,4];
arr.splice(1,2); // 只删除不添加：从下标1开始三处2个元素,arr变为[1,4]
arr.splice(1,0,'A','B'); // 只添加不删除：从下标1处开始填充'A','B',即'A'会在下标1处，B在下标2处, arr变为[1, "A", "B", 4]
arr.splice(1,2,'Hello','World');// 先从下标1处开始删除2个元素变为[1,4],再从下标1处开始加入两个元素，变为[1, "Hello", "World", 4]

理解完万能方法下面的就都很容易理解了。

concat：拼接两个`Array`,返回一个新的`Array`

此函数不修改当前的数组，拼接后的结果需要用新定义的数组来接收。

单纯的拼接很容易理解，有意思的是这个拼接可以自动打开Array并把元素拼接起来。

var arr = [1,2,3];
var res = arr.concat(1,2,3,[4,5]); //结果为：[1, 2, 3, 1, 2, 3, 4, 5]

神奇的join方法

var arr = [1,2,3];
var res = arr.join('/');
res; //输出："1/2/3"

多维数组

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

多维数组输出为：

END.