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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
js实现前端分页页码管理
Jan 06 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 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 microtime获取浮点的时间戳
2010/02/21 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
php5与php7的区别点总结
2019/10/11 PHP
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jsTree使用记录实例
2016/12/01 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
总裁岗位职责
2013/12/04 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
小组名称和口号
2014/06/09 职场文书
村道德模范事迹材料
2014/08/28 职场文书
国庆节慰问信
2015/02/15 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
离婚起诉书范本
2015/05/18 职场文书
龙猫观后感
2015/06/09 职场文书
大学生暑假实习总结
2015/07/13 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书