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 Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
微信小程序如何使用云开发
May 17 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Swiper实现导航栏滚动效果
Oct 16 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数据饼图效果实现代码
2011/11/23 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
如何离线执行php任务
2017/02/21 PHP
写自已的js类库需要的核心代码
2012/07/16 Javascript
js Math 对象的方法
2013/09/01 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
详细分析Python collections工具库
2020/07/16 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
酒店办公室文员岗位职责
2013/12/18 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Java实现多线程聊天室
2021/06/26 Java/Android
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android