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 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
javascript函数特点实例分析
May 14 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 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实现ODBC数据分页显示一例
2006/10/09 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
师德建设实施方案
2014/03/21 职场文书
采购部长岗位职责
2014/06/13 职场文书
诚信考试标语
2014/06/24 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
现场施工员岗位职责
2015/04/11 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python