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 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
js实现拖拽元素选择和删除
Aug 25 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 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的控制语句
2006/10/09 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
浅析Python 条件控制语句
2020/07/15 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
中专自我鉴定
2014/02/05 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
高中物理教学反思
2016/02/19 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技