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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
Three.js快速入门教程
Sep 09 Javascript
express启用https使用小记
May 21 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
对javascript继承的理解
2016/10/11 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python网络编程实例简析
2014/09/26 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
学python需要去培训机构吗
2020/07/01 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
护理自荐信
2013/10/22 职场文书
部队万能检讨书
2014/02/20 职场文书
律师函格式范本
2015/05/27 职场文书
Python 全局空间和局部空间
2022/04/06 Python