javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】


Posted in Javascript onJune 13, 2019

本文实例讲述了javascript数组常见操作方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 数组的方法</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>

运行结果:

javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
Js 随机数产生6位数字
May 13 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 #Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 #Javascript
深入了解JavaScript代码覆盖
Jun 13 #Javascript
js使用cookie实现记住用户名功能示例
Jun 13 #Javascript
探索JavaScript中私有成员的相关知识
Jun 13 #Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 #Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
win与linux系统中python requests 安装
2016/12/04 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
行政部主管岗位职责
2013/12/28 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS