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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 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
MySQL修改密码方法总结
2008/03/25 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
js跳转页面方法总结
2014/01/29 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python shell根据ip获取主机名代码示例
2017/11/25 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
利用python开发app实战的方法
2019/07/09 Python
python的re模块使用方法详解
2019/07/26 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
宣传委员竞选稿
2015/11/19 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers