1. 程式人生 > >Js新增元素、刪除元素誤區詳解【push()和add();splice()和remove()】

Js新增元素、刪除元素誤區詳解【push()和add();splice()和remove()】

新增元素之誤區一,push()和add()使用及區別
push()方法是給陣列尾巴新增一個或多個元素,返回的是新增陣列後該陣列長度。
測試程式碼:

var arr = [1,2,3,4];
var arrlength = arr.push(5);
console.log("arr長度為:"+arrlength+"\narr值為:"+arr);

add()方法是不能運算元組的,不然會報錯的,如下圖所示:
這裡寫圖片描述
add()主要是針對dom節點進行元素的新增,比如說你要向某個div裡面新增一個片段就可以寫:

$(".div").add("<p>hello,world!</p>"
);

它有一點像clone()函式,只是一個複製(基於原有的)一個新增(原有的或者新增的);
刪除元素之誤區二,splice()和remove()使用及區別
splice()主要是針對陣列的插入,刪除和替換元素,由引數決定。
使用方式:splice(index_num,num);其中index_num表示操作的陣列下標,num表示操作的個數。

var arr = [1,2,3,4];
var arrrm = arr.splice(3,1);
console.log("arr刪除的資料為:"+arrrm+"\narr刪除後的值為:"+arr);
//arr刪除的資料為:4
//arr刪除後的值為:1,2,3

Remove()在js中主要是針對dom節點進行操作的,比如說我們要刪除某個子節點的話可以這樣使用:

$(".div select").remove("option:nth-child(2)");

//刪除select的第二個孩子節點。
縱上所述:有關陣列元素和DOM元素的刪除與新增一定要有所區分喲,切記不能混用!
但是要是你實在是覺得splice這個字母不好記,硬要用arr.remove()操作來刪除元素的話是未嘗不可的,我們可以通過自定義原型方法來實現這個功能,滿足你的想法:

Array.prototype.remove = function(val) { 
    var
index = this.indexOf(val); if (index > -1) { return this.splice(index, 1); } }; var arr = [1,2,3,4]; var arrrm = arr.remove(4); console.log("arr刪除的資料為:"+arrrm+"\narr刪除後的值為:"+arr); //arr刪除的資料為:4 //arr刪除後的值為:1,2,3