push

之前我们有说到阵列可以利用 push 增加更多的阵列资料例如:

var framer =['小明','小花','小华'];
framer.push('老王');
console.log(framer);
//["小明", "小花", "小华", "老王"]

splice

splice 就是能把阵列的资料做删除可以决定从哪个地方开始删除，并从哪个位置开始计算删除几笔资料，像是这样！

splice(0,2)
//0 从序号0开始
//2 删除两笔资料

如果我们要把上面的阵列['小明','小花','小华'];只留下小华就可以这样写

var framer =['小明','小花','小华'];
framer.splice(0,2)
//结果["小华"]

运用 splice 点击後删除资料

我们拿前一天的范例，之前是点击农夫的姓名就显示农夫年龄，如果要点击农夫就删掉农夫资料可以这样写：

HTML

<ul class="list"></ul>

JS

var country = [
  {
    farmer:'小明'
  }
  ,{
    farmer:'小花'
  }
  ,{
    farmer:'小华'
  }
  ,{
    farmer:'老王'
  }
]
var list = document.querySelector('.list');


//更新农场资料
function updateList(){
  var str = '';
  var len = country.length;
  for(var i = 0;len>i;i++){
    str+='<li data-num="'+i+'">'+country[i].farmer+'</li>'
  }
  list.innerHTML = str;
}
updateList();

//确认点击的农夫是谁
function checkList(e){
  var num = e.target.dataset.num;
  console.log(e.target.nodeName);
  if(e.target.nodeName !== 'LI'){return};
  country.splice(num,1);
  updateList();
}
list.addEventListener('click',checkList,false);

其实改变的地方只有在 JS 第27行加了 country.splice(num,1);还有在 28行 在执行更新列表 updateList(); 如此而已！

原理

country.splice(num,1); 因为 num 我们有建立变数 var num = e.target.dataset.num; 所以点击後他会跑到这个元素上，还记得我们在元素上有绑定 dataset 吧，他就跑到那个 num 数字上後面的 1 就是跑到那个位置去删除一笔资料，後面的 updateList(); 则是代表资料被删除後阵列需要重新渲染一遍，才有最新剩下的内容而阵列的序号也会重新排列，透过这些方式就使用点击就删除掉那个元素罗，明天就是系列文的最後一篇了!
继续跟完它吧！

splice 点击後删除资料程序码范例