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.fn和jQuery.prototype区别介绍
Oct 05 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
angular异步验证器防抖实例详解
Mar 31 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 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python中尾递归用法实例详解
2015/04/28 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Django框架多表查询实例分析
2018/07/04 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
Python连接Impala实现步骤解析
2020/08/04 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
软件测试笔试题
2012/10/25 面试题
《母鸡》教学反思
2014/02/25 职场文书
项目投资意向书
2014/04/01 职场文书
升职演讲稿范文
2014/05/23 职场文书
学校2014年度工作总结
2014/12/06 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电