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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
vue实现购物车列表
Jun 30 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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与ASP
2006/10/09 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
js获取单选按钮的数据
2006/11/27 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
window下eclipse安装python插件教程
2017/04/24 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
python把一个字符串切开的实例方法
2020/09/27 Python
Python基于Faker假数据构造库
2020/11/30 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
上海期货面试题
2014/01/31 面试题
Ruby如何创建一个线程
2013/03/10 面试题
《识字五》教学反思
2014/03/01 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python