JS数组push/unshift/pop/splice用法及switch、script加载方式

本文通过具体实例，详细讲解JavaScript中数组的增、删、改、查操作方法，供读者参考学习。

JavaScript数组增删改查详解

一、向原数组新增元素

使用 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>

二、移除数组最后一个元素

调用 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>

三、使用splice()进行插入、替换和删除

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>

JavaScript基础语法与加载方式

四、JavaScript代码的加载方式

可以通过 <script> 标签将JS代码加载到HTML中，位置可置于 <head> 标签内，或置于 <body> 标签的外部及内部。

另一种方式是通过HTML元素的事件属性（如onclick）来加载或调用函数。

五、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程序设计内容对大家有所帮助。

JavaScript数组增删改查与基础语法详解

JavaScript数组增删改查详解

JavaScript基础语法与加载方式

实用工具推荐