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","北京","湖南"]
复制代码