欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS实现数组的增删改查操作示例

程序员文章站 2023-11-06 16:44:40
本文实例讲述了js实现数组的增删改查操作。分享给大家供大家参考，具体如下： 1、给原数组中 新增 用到 push 改变原数组的长度并返回新的长度，新元素添加在原数组的末...

本文实例讲述了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.jb51.net/code/htmljsrun测试上述代码，看看运行效果。

更多关于javascript相关内容还可查看本站专题：《javascript数组操作技巧总结》、《javascript字符与字符串操作技巧总结》、《javascript遍历算法与技巧总结》、《javascript排序算法总结》、《javascript查找算法技巧总结》、《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》及《javascript错误与调试技巧总结》

希望本文所述对大家javascript程序设计有所帮助。

上一篇： 公交车上霸气十足的躺椅

下一篇： 冷的好,冷的妙,冷到嘿嘿笑

推荐阅读