JS實現(xiàn)數(shù)組的增刪改查操作示例

更新時間：2018年08月29日 11:46:35 作者：鄒大叔

這篇文章主要介紹了JS實現(xiàn)數(shù)組的增刪改查操作,結(jié)合實例形式分析了javascript針對數(shù)組的追加、獲取、刪除、添加、修改等常見操作技巧與相關注意事項,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)數(shù)組的增刪改查操作。分享給大家供大家參考，具體如下：

1、給原數(shù)組中新增

用到 push 改變原數(shù)組的長度并返回新的長度，新元素添加在原數(shù)組的末尾

<doctype>
<html>
 <head>元素新增數(shù)組</head>
 <body>
   <div id="dem">點擊會給原素組末尾新增元素個數(shù)</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 在原數(shù)組的開頭添加一個新的元素或是更多的元素并返回新的長度。

<!doctype html >
<html>
 <head></head>
 <body>
    <div id="dem">點擊會給原素組前面新增元素個數(shù)</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、移除數(shù)組最后一個元素

pop() 并返回刪除的數(shù)組

<!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.數(shù)組中的splice() 用于插入替換和刪除

會改變原數(shù)組

<!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>數(shù)組里面的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的外部或者是內(nèi)部

通過元素的事件名加載函數(shù)

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測試上述代碼，看看運行效果。