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进行拖拽
Jul 20 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
vue中使用rem布局代码详解
Oct 30 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安装为Apache DSO
2006/10/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
chosen实现省市区三级联动
2018/08/16 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python入门篇之面向对象
2014/10/20 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
餐饮服务食品安全责任书
2014/07/25 职场文书
开票证明
2015/06/23 职场文书