js之some(),splice()方法

時間 2019-11-07

原文原文鏈接

js之some(),splice()方法的應用

案例需求:實現點擊刪除,刪除數據javascript

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!--<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">-->
</head>

<body>
  <div id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加品牌</h3>
      </div>
      <div class="panel-body form-inline">
        <label>
          Id:
          <input type="text" class="form-control" v-model="id">
        </label>

        <label>
          Name:
          <input type="text" class="form-control" v-model="carname">
        </label>

        <!-- 在Vue中，使用事件綁定機制，爲元素指定處理函數的時候，若是加了小括號，就能夠給函數傳參了 -->
        <input type="button" value="添加" class="btn btn-primary" v-on:click="addData">

        <label>
          搜索名稱關鍵字：
          <input type="text" class="form-control" >
        </label>
      </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value,i) in car">
          <td>{{value.id}}</td>
          <td>{{value.carname}}</td>
          <td>{{value.ctime}}</td>
          <td>
            <a href="" v-on:click.prevent="del(value.id)">刪除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

<script> var vm=new Vue({ el:"#app", data:{ car:[ {id:1,carname:"奧迪1",ctime:new Date()}, {id:2,carname:"奧迪2",ctime:new Date()}, {id:3,carname:"奧迪3",ctime:new Date()}, {id:4,carname:"奧迪4",ctime:new Date()} ], id:"", carname:"" }, methods:{ addData(){ var obj={id:this.id,carname:this.carname,ctime:new Date()}; this.car.push(obj); this.id=""; this.carname=""; }, del(id){ this.car.some((v,i)=>{ if(v.id==id){ //console.log(i)//返回知足條件的值的下標 this.car.splice(i,1);//刪除數組中下標從i開始的日後一個元素 } }) } } }); </script>
</body>
</html>
複製代碼

思路分析:

給刪除按鈕綁定事件
獲取當前點擊的那條數據的id
將id傳給刪除事件
利用some()對數據庫中傳來的數組中的值逐一匹配
若是前端獲取的id與數據庫傳來的數據的id一致,則刪除這條數據
利用splice()進行數據刪除

知識分析:

some()css

some() 方法用於檢測數組中的元素是否知足指定條件（函數提供）。html

some() 方法會依次執行數組的每一個元素：前端

若是有一個元素知足條件，則表達式返回true , 剩餘的元素不會再執行檢測。
若是沒有知足條件的元素，則返回false。

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}//結果返回true
複製代碼

some()函數裏面一個函數做爲參數,所要作的判斷的代碼就寫在這個函數裏面,而該函數又有兩個默認的參數,參數個數若是是一個,表示數組的值;參數個數若是是兩個,第一個表示數組的值,第二個表示數組的索引

var ages = [3, 10, 18, 20];

function checkAdult(value,index) {
   console.log(value);//3 10 18 20
   console.log(index);//0 1 2 3
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
複製代碼

some()函數實際上是一個循環的過程

splice()vue

splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目(數組)。java

splice(index,howmany,item1,.....,itemX)
複製代碼

參數	描述
index	必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany	必需。要刪除的項目數量。若是設置爲 0，則不會刪除項目。
item1, ..., itemX	可選。向數組添加的新項目。

說明數據庫

splice() 方法可刪除從 index 處開始的零個或多個元素，而且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。bootstrap

var arr=["廣東","山東","北京","湖南"];
		var a=arr.splice(1,1,"ggg");
		console.log(a);//["山東"]
		console.log(arr);//["廣東","ggg","北京","湖南"]
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。