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

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

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

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

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

用到 push 改變?cè)瓟?shù)組的長(zhǎng)度并返回新的長(zhǎng)度，新元素添加在原數(shù)組的末尾

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

<!doctype html >
<html>
 <head></head>
 <body>
    <div id="dem">點(diǎn)擊會(huì)給原素組前面新增元素個(gè)數(shù)</div>
   <button onclick="funct()">點(diǎn)擊</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ù)組最后一個(gè)元素

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

<!doctype html>
<html>
 <head>
 </head>
 <body>
   <div id="demo">移除最后一個(gè)元素</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() 用于插入替換和刪除

會(huì)改變?cè)瓟?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一個(gè)元素</div>
   <button onclick="fun01()">刪除</button>
   <script type="text/javascript">
     var apple = ["Sunday","Monday","Tuesday","Wednesday"];
     function fun01(){
       apple.splice(1,2,"2222"); //從Moday下標(biāo)開始刪除兩個(gè)，替換為"2222"
       var demo = document.getElementById("demo02");
       demo.innerHTML = apple;
     }
   </script>
</body>
</html>

4.js的加載方式

通過(guò)scrpit標(biāo)簽加載在head 或者是 body的外部或者是內(nèi)部

通過(guò)元素的事件名加載函數(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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，看看運(yùn)行效果。