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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
详解PHP PDO简单教程
2019/05/28 PHP
php7性能提升的原因详解
2019/10/13 PHP
深入分析js中的constructor和prototype
2012/04/07 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python单例模式实例分析
2015/01/14 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
Django 框架模型操作入门教程
2019/11/05 Python
python多进程并发demo实例解析
2019/12/13 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
《菜园里》教学反思
2014/04/17 职场文书
行政文员岗位职责
2015/02/04 职场文书
社区服务活动报告
2015/02/05 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
追讨欠款律师函
2015/06/24 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
创业计划书之酒吧
2019/12/02 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
德生BCL3000抢先使用感受和评价
2022/04/07 无线电