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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
原生js无缝轮播插件使用详解
Mar 09 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
12步教你理解Python装饰器
2016/02/25 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python 格式化输出百分号的方法
2019/01/20 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
高中国旗下的演讲稿
2014/08/28 职场文书