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 ajax cache缓存问题
Jul 01 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
angular.js实现购物车功能
Oct 23 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python多线程同步之文件读写控制
2021/02/25 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
在校生钳工实习自我鉴定
2013/09/19 职场文书
同学会邀请书大全
2014/01/12 职场文书
大课间活动制度
2014/01/18 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
就业协议书范本
2014/10/08 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
会计电算化实训报告
2014/11/04 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
详解Django的MVT设计模式
2021/04/29 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android