JS-数组基础方法详细总结

此文，是查阅若干个数组相关的技术博客，结合自己的笔记总结而写。

前段时间，写个一个简单的数组介绍，并不为详细，先整理一个更为完整的数组应用操作。

这里，我们就不介绍数组的创建了，尝试创建一次数组之后，也不会忘记了，重点是介绍数组的相关方法

1、常用方法的大致介绍：

方法	说明	返回值	是否影响数组
join()	使用不同的分隔符将数组转换成包含分隔符的字符串	转换后的字符串	否
reverse()	颠倒数组的顺序	重排序数组	是
sort()	通常会接受一个比较函数将数组按特定的顺序排序	重排序的数组	是
concat()	将传递给该方法的每一个参数添加到原数组中	修改后的数组副本	否
slice()	获取当前数组的一个或多个元素创建一个新的数组	返回新的数组	否
splice()	通过传递的参数不同，实现对数组的增删改	新的数组	是
push()	数组的栈方法，在数组的末尾增加元素	返回新的数组的长度	是
pop()	数组的栈方法，删除数组末尾的元素	返回被删除的元素	是
unshift	两个数组的堆方法，在数组的前端增加元素	返回数组的长度	是
shift()	两个数组的堆方法，在数组的前端删除元素	返回被删除的元素	是

---

2.1 join()方法

将数组中的所有元素以字符串的方式拼接在一起，拼接的字符以参数的形式决定，如果不传参，会默认参数是逗号，

var num = [4,"bb",5,7,45];
var num1 = num.join();
var num2 = num.join('');    //将数组不添加任何符号拼接成字符串
var num3 = num.join('+');

console.log(num1);      // 4,bb,5,7,45
console.log(num2);      // 4bb5745
console.log(num3);      // 4+bb+5+7+45
console.log(num);       // [ 4, "bb", 5, 7, 45 ]

2.2 reverse()方法

将数组的排序颠倒过来，注意：并不是按大小的数序排序，而是相反的排序，如 [1,”b”,3,”15”,5]变成[5,”15”,3,”b”,1]

var num = [4,"bb",5,7,45];
var  b = num.reverse();

console.log(b);     // [ 45, 7, 5, "bb", 4 ]
console.log(num);   // [ 45, 7, 5, "bb", 4 ] 改变了原来的数组

2.3 sort()方法

默认情况下，sort()方法按从小到大的排序，但是如果是数值，sort()方法会调用每个元素的toString()方法转换为字符串后再比较：

var num = [4,"bb",5,7,45];
console.log(num.sort());    // [ 4, 45, 5, 7, "bb" ] 按数字的顺序排序

var str = ['gsd','efger','j','ad','g'];
console.log(str.sort());    // [ "ad", "efger", "g", "gsd", "j" ] 按字符串，字母的顺序排序

如果要以从小到达或者从大到小的方式排序，责需要传入一个比较函数（大小其实就是数组元素的长度）

var str = ['gsd','efger','j','ad','g'];
var bstr = str.sort(function(a,b){
    return a.length - b.length;
})

console.log(bstr);  // [ "j", "g", "ad", "gsd", "efger" ]

2.4 concat() 方法

这个方法先会创建当前数组的一个副本，然后将收到的参数添加到副本数组的末尾，返回重新构建的数组。

1、当没有传递参数时，只是返回当前数组的一个副本。

var a = [1,2];
b = a.concat();
console.log(b);//[1,2] a 的副本
console.log(a);//[1,2]; a 未改变

2、当传递的参数为非数组时，将会把每个参数添加到副本中

var a = [1,2];
b = a.concat(3,4);
console.log(b);//[1,2,3,4] 在a的副本上添加
console.log(a);//[1,2]; a 未改变

3、当传递的参数是数组时，将会把数组的每一个元素添加到副本中。

var a = [1,2];
b = a.concat([3,4]);
console.log(b);//[1,2,3,4] 在a的副本上添加
console.log(a);//[1,2]; a 未改变

//来看看参数的另一种形式
var a = [1,2];
b = a.concat([3,4，[5,6]]); //数组的数组
console.log(b);//[1,2,3,4,[5,6]]  //数组的数组直接添加到副本
console.log(a);//[1,2]; a 未改变

2.5 slice()方法

这个方法返回指定数组的一个片段或子数组，接受一个或两个参数。

1、一个参数 ：返回该参数指定位置（包含）到数组末尾的元素的新数组

var a = [1,2,3,4,5];
a.slice(0);// 返回 [1,2,3,4,5]
a.slice(1);// 返回 [2,3,4,5]
a.slice(7);// 返回 [] 参数超过数组索引，返回空数组
a.slice(-1);//返回 [5] 用数组长度-1 相当于slice(4);
console.log(a);//返回 [1,2,3,4,5] 原数组不变

2、两个参数 ：参数作为始末位置，但不包含第二个参数指定的位置。

var a = [1,2,3,4,5];
a.slice(0,4);// 返回 [1,2,3,4]
a.slice(1,4);// 返回 [2,3,4]
a.slice(1,7);// 返回 [2,3,4,5] 参数超过数组索引，则到数组末尾
a.slice(1,-1);//返回 [2,3,4] 用数组长度-1 相当于slice(1,4);
a.slice(1,-7);//返回 [] 当结束位置小于起始位置，返回空数组
console.log(a);//返回 [1,2,3,4,5] 原数组不变

2.6 splice()方法

这个数组恐怕是数组里最强大的方法了，它有多种用法，主要用途是向数组中部插入元素，请不要和上面的slice()方法混淆了，这是两个完全不同的方法。由参数的不同，可实现下列三种方法：

1、删除 ：指定一个或两个参数，第一个参数是删除的起始位置，第二个参数是要删除的元素个数，若省略第二个参数，则从起始位置删除至末尾：

var a = [1,2,3,4,5];
a.splice(3,2);//返回 [4,5] 从索引3开始，删除2个元素，此时 a = [1,2,3]
a.splice(1);// 返回 [2,3] 此时 a = [1]

2、插入：指定3个及以上个参数，前两个参数和上面的一致，第二个参数一般为0，后面的参数表示要插入的元素：

var a = [1,2,3,4,5];
a.splice(4,0,6,7);//返回 [] 从索引4开始，删除0个元素，此时 a = [1,2,3,4,5,6,7]

//下面这种情况又和concat()不同，直接插入数组而非数组元素
a.splice(4,0,[6,7]);//返回 [] 从索引4开始，删除0个元素，此时 a = [1,2,3,4,5,[6,7]]

3、更新：指定3个及以上个参数，前两个参数和上面的一致，第二个参数指定要删除的元素个数，后面的参数表示要插入的元素：

var a = [1,2,3,4,5];
a.splice(3,2,6,7);//返回 [4,5] 从索引3开始，删除2个元素，此时 a = [1,2,3,6,7]

2.7 push()/pop()方法

补充下数据结构的知识，栈是一种LIFO(Last-In-First-Out，后进先出)的数据结构，也就是最新添加的项最早被移除。而栈中项的插入和移除只发生在栈顶部。数组的push(),pop()方法就为数组实现了类似栈的功能：

1、push()：该方法可以接受任意数量，任意类型的的参数，并将它们添加至数组的末尾（栈顶），最后返回修改后的数组的长度。

var a = [];// 创建空数组
var lng = a.push(1,2,3);// 添加数组元素
console.log(a);// 输出：[1,2,3]
console.log(lng);// 输出：3  返回数组长度3
var lng2 = a.push(4,[5,6]);//
console.log(lng2); // 输出：5  返回数组长度5
console.log(a);//输出：[1,2,3,4,[5,6]]

2、pop() ：相反，该方法删除数组的最后一个元素，减小数组长度，并返回删除的元素。不带参数。

var a = [1,2,3];
var last= a.pop();// 删除数组最后一个元素
console.log(a);// 输出：[1,2]
console.log(last);// 输出：3  被删除的元素是 3

2.8 unshift()/shift()方法

上面提到了栈的数据结构，这里再提一个队列的数据结构，这是一种FIFO(First-In-First-Out,先进先出)的数据结构，队列添加元素是在末端，删除是在前端。很多同学就会猜测了，unshift()就是在末端添加元素，shift()就是在前端删除元素，其实不然：

1、shift()：用于在前端删除数组元素，返回被删除的元素，与push()方法结合便是一对队列方法。

var a = [1,2,3];
a.push(4,5);//此时 a = [1,2,3,4,5] 
var start = a.shift();//此时 a = [2,3,4,5] 删除最前端的元素
console.log(start);// 1 返回删除的元素

2、unshift()：用于在前端添加元素，返回修改后的数组的长度，与pop()方法结合便是一对反操作的队列。

var a = [1,2,3];
a.unshift(4,5);//此时 a = [4,5,1,2,3] 在前端添加元素
var end= a.pop();//此时 a = [4,5,1,2] 
console.log(end);// 3 返回删除的元素