javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
更新时间：2019年06月13日 09:53:23 作者：longzhoufeng
这篇文章主要介绍了javascript数组常见操作方法,结合实例形式总结分析了javascript数组的连接、添加、删除、去重、排序等操作,代码注释附带较为详细的说明,需要的朋友可以参考下
本文实例讲述了javascript数组常见操作方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 数组的方法</title>
<script>
var arr=[1,3,4]
var arr1=["a","b","c"]
var arr2=["d","e","f"]
var arrNum=[]
//1、向数组的末尾添加一条或多条元素，并返回新的长度
//arr.push("longzhoufeng")
//console.log(arr)//1,3,4,"longzhoufeng"
//2、向数组的最开始添加一条或多条元素，并返回新的长度
//arr.unshift("minigui")//IE6，7不支持
//console.log(arr)//"minigui", 1, 3, 4
//3、连接二个数组或者多个数组
//var newArr=arr.concat(arr1,arr2)
//console.log(newArr)//[1, 3, 4, "a", "b", "c", "d", "e", "f"]
//4、删除并返回数组的第一个元素
//console.log(arr1.shift());//a
//arr1.shift();
//console.log(arr1);//b,c
//5、删除并返回数组的最后一个元素
//console.log(arr1.pop());//c
//arr1.pop()
//console.log(arr1)//["a", "b"]
//6、删除,替换，添加
//arr1.splice(0,2)//0代表位置，2代表要删除的个数
//console.log(arr1)//["c"]
//替换
//arr1.splice(0,1,"longzhoufeng")//第三个参就是在0位置上替换成longzhoufeng
//arr1.splice(0,1,"longzhoufeng")//第三个参就是在0位置上替换成longzhoufeng
//console.log(arr1)//["longzhoufeng", "b", "c"]
//添加
//arr1.splice(1,0,"longzhoufeng")
//console.log(arr1)//["a", "longzhoufeng", "b", "c"]
//数组去重
var arr3=[1,3,3,2,5,6,7,7]
//1、先遍历数组的每一个元素
for(var i=0;i<arr3.length;i++){
//2、每遍历对比一个，就得往前加一位
for(var j=i+1;j<arr3.length;j++){
//3、对遍历的元素进行对比，如果相等，就删除后面的一个元素
if(arr3[i]==arr3[j]){
arr3.splice(j,1);
//4、删除之后就减少一位，直到没有为止
j--;
}
}
}
console.log(arr3)
//7、数组排序
var arr4=[4,3,5,5,76,2,0,8]
//这种方法可能会有问题，因为sort()会把元素转换成字符串
//arr4.sort();
//console.log(arr4)//0, 2, 3, 4, 5, 5, 76, 8
//sort()里面可以传一个函数,如果返回的是a-b就是从小到大，如果返回是b-a就从反方向排序
arr4.sort(function(a,b) {
return a-b;
})
console.log(arr4)//0, 2, 3, 4, 5, 5, 8, 76
var arr5=["345px","23px","10px","1000px"]
arr5.sort(function(a,b) {
return parseInt(a)-parseInt(b);
})
console.log(arr5)//"10px", "23px", "345px", "1000px"
</script>
</head>
<body>
</body>
</html>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容还可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
微信小程序setInterval定时函数新手使用的超详细教程
平时开发中为实现倒计时效果可以使用setInterval即可,下面这篇文章主要给大家介绍了关于微信小程序setInterval定时函数新手使用的超详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了JS实现圆形进度条拖拽滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
前支持javascript调试功能的工具越来越多，主要分为ie和firefox两大阵营。其他浏览器上很难调试javascript。而Javascript Debug Toolkit解决了这个问题，可能在所有支持ajax请求的浏览器上调试javascript.2008-12-12
这篇文章主要给大家介绍了关于如何在JavaScript中优雅的提取循环内数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
本篇文章主要是对Array栈方法与队列方法的特点进行了详细的说明介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
微信小程序最难实现的公共业务是什么？应该是表单校验，这篇文章主要介绍了微信小程序如何实现表单校验功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了使用JavaScript策略模式校验表单，对JS策略模式感兴趣得同学，可以参考下2021-04-04
TypeScript 中内置了很多工具类型，我们无需导入，可以直接使用。 其中的很多都是比较常用的，接下来我们根据使用范围来一一介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
这是一个简单但是印象深刻的小游戏，打气球小游戏的实现代码，主要基于js和css3，基于css3画气球，具体实现代码大家参考下本文2017-11-11
这篇文章主要为大家详细介绍了js实现单击可修改表格，类似成绩单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论