在公司做过的项目中曾经遇到过这种问题，就是比如
var arr = [
{
id:1,
"name":"唐僧"
},{
id:2,
"name":"孙悟空"
},{
id:3,
"name":"猪八戒"
}
]就比如这么一个数组对象，讲这个之前我首先要说点别的，可能大多数的小伙伴现在的思想还是以DOM为中心，像我以前一样，但是经过了几个项目的洗礼，尤其是用过angularJS，我现在的思想已经转变成以数据为中心，意思就是先不管DOM，先操作数据，也就是数组对象，然后再通过数据双向绑定把数据重新渲染到DOM中去。。。
好了，接着说这个数组对象，如果是跟后台产生AJAX交互就不必这么麻烦了，删除和新增只需要发AJAX请求就可以了，数据后台会帮你处理，可是我遇到的问题是，有些数据是在前端写死的，比如组件，前端写死，然后新增，新增之后，再往后台传数据，有可能会有删除的需求，我以前的处理方法是不想让他的length改变，用数组的deleteAPI
delete arr[0]这样的话，被删除的项会空出来，由undefined补上，但是这样感觉数组结构太不规范，而且太丑，到时候，如果都删除的话，都是一堆undefined，这样不好，对后台也不友好，于是我就想到一个方法，首先新建一个临时数组，我叫他删除数据的临时垃圾桶，删除数组的时候，先把删除数组的id，或者整体先push到临时数组里面，等要新增的时候，再往临时数组里面找，如果有被删除的id，那么就取出来，重新用这个id新增，或者用这个整体新增，（我下面的例子只是用了id，整体也是可以的，只要有js基础的都能写出来），如果临时数组里面没有的话，就新增id
下面是我的例子的代码，框架用的angularJS的双向数据绑定
<!doctype html>
<html lang="en" ng-app="myMoudle">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
float: left;
margin-right: 20px;
}
ul:after{
content:"";
display: block;
clear: both;
}
</style>
</head>
<body ng-controller="myCtrl">
<button ng-click = 'add()'>增加</button>
<ul ng-repeat = 'item in persons'>
<li>{{item.name}}</li>
<li ng-click = 'delete(item.id,$index)'>
<button>删除</button>
</li>
</ul>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script>
var app=angular.module('myMoudle',[/*注入的模块 如ngAnimate等*/]);
app.controller('myCtrl',['$scope',function($scope){
$scope.num=2;
$scope.persons = [
{
id:1,
name:"唐僧"
},{
id:2,
name:"孙悟空"
},{
id:3,
name:"猪八戒"
},{
id:4,
name:"沙悟净"
}
]
//删除过的id值临时垃圾桶
$scope.deleteArr = [];
//定义删除函数
$scope.delete = function(id,index){
console.log(id);
$scope.deleteArr.push(id);
console.log(index);
$scope.persons.splice(index,1);
console.log($scope.persons);
console.log($scope.deleteArr);
}
//定义增加函数,此次增加函数是把删掉的id值给补上去，如果临时垃圾桶没有数据了，就新增id
$scope.add = function(){
//首先判断$scope.deleteArr的length是不是0
if($scope.deleteArr.length > 0){
$scope.persons.push(
{
id:$scope.deleteArr[$scope.deleteArr.length - 1],
name:"白龙马" + $scope.persons.length
}
)
//把新增的id从垃圾桶里去掉
$scope.deleteArr.splice(-1,1);
}else{
$scope.persons.push(
{
id:$scope.persons.length + 1,
name:"白龙马" + $scope.persons.length
}
)
}
console.log($scope.persons);
console.log($scope.deleteArr);
}
}])
</script>
</body>
</html>首先看新增的结果（垃圾桶里暂时还没有数据）
然后再看删除，删除两个
把孙悟空和猪八戒给删掉了，同时临时垃圾桶里也出现了他们俩的id
然后我们再新增一个看看
新增了一个id为3的白龙马3，同时临时垃圾桶里的3也没了，再新增一个试试看
新增了一个id为2的白龙马4，同时临时垃圾桶里的2也没了，这样的话，id还是1,2,3,4,5且并没有undefined出现，我们再新增一个看看
新增了一个id为6的白龙马5，因为临时垃圾桶里没有，它就自动添加新的id了，整个过程，起到了一个废物利用的作用，且没有出现过undefined，我觉得还是可以的，今天终于有时间把它写出来了！