如何使用Javascript陣列與物件delete與splice

9 月 24, 2019 | Javascript, | 0 條留言

在 javascript 有分為物件與陣列,常見刪除的方法有 delete 與 splice。

陣列

var array=[ 'a', 'b', 'c', 'd' ];
console.log(a[0]); // a

物件

var object={ 0: 'a', 1: 'b', 2: 'c', 3: 'd' };
console.log(object[0]); // a

兩個其實很像都是 key-value ,但其實兩個繼承的 prototype 方法不同( Array 與 Object )

因此:

console.log(array.length);     // 4
console.log(object.length);    // undefined

但透過 typeof 來看的話其實兩個都屬於 object,因此我們必須透過 contrustor 來判斷彼此的不同

console.log(typeof array);    // object
console.log(typeof object);   // object
console.log(array.contrustor);
console.log(array.constructor === Array);    // true
console.log(object.constructor === Array);   // false

delete 與 splice

delete使用在Object

使用 delete 去刪除物件內的 "屬性" 或 "方法",它只會移除你所指定物件內的 "屬性" 或 "方法"(如果這個物件有的話),並不會刪除到物件"原型"內原有的 "屬性" 及 "方法"。

Object.prototype.name = 'Terry_in_prototype';
var obj = { 'name' : 'Terry' };

console.log(obj.name);  //Terry
delete obj.name;
console.log(obj.name);  //Terry_in_prototype

//在 delete 一次
delete obj.name;
console.log(obj.name);  //Terry_in_prototype

比較 delete 與 splice 應用在 array 上的差別

splice

array.splice(index, howmany, item1, ....., itemX)

index:需要。一個整數,指定要在什麼位置添加/刪除項目,請使用負值指定從數組末尾開始的位置。
howmany:可選的。要刪除的項目數。 如果設置為0,則不會刪除任何項目。
item:可選的。要添加到數組中的新項目。

var array=[ 'a', 'b', 'c', 'd' ];
array.splice(2, 1); //刪除 'c'
console.log(array.length); //3
console.log(array); /*[ 'a', 'b', 'd' ]*/

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); //inserts at index 1
console.log(months); /*['Jan', 'Feb', 'March', 'April', 'June']*/

months.splice(4, 1, 'May'); //replaces 1 element at index 4
console.log(months); /*['Jan', 'Feb', 'March', 'April', 'May']*/

delete

var array=[ 'a', 'b', 'c', 'd' ];
delete array[2]; // 刪除 'c'
console.log(array.length); // 4
console.log(array[2]); // 'undefined'

參考資料:
使用 delete 刪除物件的 "屬性" 及 "方法"
Javascript 陣列vs物件
javascript陣列與物件,delete與splice差異