JS实现数组的增删改查操作示例


Posted in Javascript onAugust 29, 2018

本文实例讲述了JS实现数组的增删改查操作。分享给大家供大家参考,具体如下:

1、给原数组中 新增

用到 push 改变原数组的长度并返回新的长度,新元素添加在原数组的末尾

<doctype>
<html>
 <head>元素新增数组</head>
 <body>
   <div id="dem">点击会给原素组末尾新增元素个数</div>
   <button onclick="funct()">点击</button>
   <script type="text/javascript">
     var app = ["001","002","002"];
     function funct(){
       app.push("003","0005");
       var demo = document.getElementById("dem");
       demo.innerHTML = app;
     }
   </script>
 </body>
</html>

unshift 在原数组的开头添加一个新的元素或是更多的元素并返回新的长度。

<!doctype html >
<html>
 <head></head>
 <body>
    <div id="dem">点击会给原素组前面新增元素个数</div>
   <button onclick="funct()">点击</button>
   <script type="text/javascript">
     var app = ["001","002","002"];
     function funct(){
       app.unshift("003","0005");
       var demo = document.getElementById("dem");
       demo.innerHTML = app;
     }
   </script>
 </body>
<html>

2、移除 数组最后一个元素

pop() 并返回删除的数组

<!doctype html>
<html>
 <head>
 </head>
 <body>
   <div id="demo">移除最后一个元素</div>
   <button onclick="fun()"></button>
   <script type="text/javascript" charset="utf-8">
     var apple = ["001","002","003"];
     function fun(){
       apple.pop();
       var demo = document.getElementsById("demo");
       demo.innerHtml = apple;
     }
   </script>
 </body>
</html>

3.数组中的splice() 用于插入替换 和删除

会改变原数组

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>数组里面的push和pop</title>
</head>
<body>
   <div id="demo02">单击删除bing并tihuan一个元素</div>
   <button onclick="fun01()">删除</button>
   <script type="text/javascript">
     var apple = ["Sunday","Monday","Tuesday","Wednesday"];
     function fun01(){
       apple.splice(1,2,"2222"); //从Moday下标开始删除两个,替换为"2222"
       var demo = document.getElementById("demo02");
       demo.innerHTML = apple;
     }
   </script>
</body>
</html>

4.js的加载方式

通过scrpit标签加载在head 或者是 body的外部或者是内部

通过元素的事件名加载函数

5.switch case用法

function fun(){
    var num = "01";
    switch (num){
       case "01":console.log("星期一"); //代码块
        break;
       case "02":fun01();
        break;
      default:console.log("星期八");
    }
}

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

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

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

Javascript 相关文章推荐
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
jQuery实现跨域
Feb 03 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
ES6对象操作实例详解
May 23 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 #Javascript
vue-cli3.0使用及部分配置详解
Aug 29 #Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 #Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 #Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 #Javascript
Vuex 使用及简单实例(计数器)
Aug 29 #Javascript
浅谈Vue.use的使用
Aug 29 #Javascript
You might like
浅谈discuz密码加密的方式
2014/05/22 PHP
php实现简单文件下载的方法
2015/01/30 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
webpack打包js的方法
2018/03/12 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
vue router的基本使用和配置教程
2018/11/05 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
详解Django定时任务模块设计与实践
2019/07/24 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
药店促销活动策划方案
2014/08/24 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
快递员岗位职责
2014/09/12 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python