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插件制作 学习过程及实例
Apr 25 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
js显示文本框提示文字的方法
May 07 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
javascript日期计算实例分析
Jun 29 Javascript
angular.js分页代码的实例
Jul 27 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
canvas绘制的直线动画
Jan 23 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python functools模块学习总结
2015/05/09 Python
Python中字符串的格式化方法小结
2016/05/03 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
洗发水广告词
2014/03/13 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
战友聚会策划方案
2014/06/13 职场文书
学校创先争优活动总结
2014/08/28 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android