JS-数组基础方法详细总结
来源:互联网 发布:淘宝详情怎么添加图片 编辑:程序博客网 时间:2024/05/21 09:14
此文,是查阅若干个数组相关的技术博客,结合自己的笔记总结而写。
前段时间,写个一个简单的数组介绍,并不为详细,先整理一个更为完整的数组应用操作。
这里,我们就不介绍数组的创建了,尝试创建一次数组之后,也不会忘记了,重点是介绍数组的相关方法
1、常用方法的大致介绍:
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,45console.log(num2); // 4bb5745console.log(num3); // 4+bb+5+7+45console.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 返回数组长度3var lng2 = a.push(4,[5,6]);//console.log(lng2); // 输出:5 返回数组长度5console.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 返回删除的元素
- JS-数组基础方法详细总结
- js基础数组方法
- js数组方法总结
- js数组方法总结
- js数组方法总结
- js数组方法总结
- js数组方法(总结)
- JS数组常用方法总结
- js 数组常用方法总结
- js数组常用方法总结
- js 数组方法总结归类
- js数组方法总结归类
- js数组基本方法总结
- JS基础——数组总结
- js基础:数组基础和数组方法的各种使用
- js基础:数组基础和数组方法的各种使用
- js基础:数组基础和数组方法的各种使用
- js基础:数组基础和数组方法的使用
- MyEclipse 自带git详解(6)
- ]Xml方面xml有哪些解析技术?区别是什么?
- 凸包的面积交,面积并。
- Mysql语句汇总(全)
- 解决VMware不能上网的问题
- JS-数组基础方法详细总结
- IPC主题三之共享内存
- java 中hashcode的作用
- Linux常用命令(一)
- 一篇很全面的freemarker教程
- 160. Intersection of Two Linked Lists
- iOS崩溃捕获以及收集原理
- C++ STL中哈希表 hash_map从头到尾详细介绍
- Glide的使用