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点击tr实现checkbox选中的方法
Mar 19 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
Javascript的表单验证长度
Mar 16 Javascript
jQuery动态添加
Apr 07 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
python excel转换csv代码实例
2019/08/26 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
python如何编写win程序
2020/06/08 Python
extern在函数声明中是什么意思
2014/01/19 面试题
大学生应聘自荐信
2013/10/11 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
素质教育培训心得体会
2016/01/19 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android