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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
vue实现单选和多选功能
Aug 11 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python代码制作configure文件示例
2014/07/28 Python
python连接MySQL数据库实例分析
2015/05/12 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
领导干部失职检讨书
2015/05/05 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
python基于tkinter实现gif录屏功能
2021/05/19 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
MySQL读取JSON转换的方式
2022/03/18 MySQL