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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 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
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
python实现kNN算法
2017/12/20 Python
python实现图像识别功能
2018/01/29 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
家长对孩子评语
2014/01/30 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
推荐信模板
2014/05/09 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
PL350与SW11的比较
2021/04/22 无线电