iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
0
自我挑戰組

溫故知新 JavaScript系列 第 29

Day29- splice 刪除陣列

https://ithelp.ithome.com.tw/upload/images/20201012/201294393S5ZF3xSKc.jpg

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 點擊後刪除資料程式碼範例


上一篇
Day28- 透過 dataset 讀取自訂資料
下一篇
Day30- 最後完成代辦事項 To DO List 小工具
系列文
溫故知新 JavaScript30

尚未有邦友留言

立即登入留言