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

發(fā)布時(shí)間：2020-10-12 23:01:33 來(lái)源：腳本之家閱讀：153 作者：鄒大叔欄目：web開(kāi)發(fā)

本文實(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ù)組的開(kāi)頭添加一個(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)開(kāi)始刪除兩個(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)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽