1. 程式人生 > 程式設計 >js刪除物件中的某一個欄位的方法實現

js刪除物件中的某一個欄位的方法實現

本文主要介紹了js刪除物件中的某一個欄位的方法實現,分享給大家,具體如下:

// 以下方法不改變原來物件
   let item = {
    name:'張三',age:'18',gender:'男'
   };
   console.log(item) // {age: "18",gender: "男",name: "張三"}


   let { age,...params } = item;
   console.log(item) // {age: "18",name: "張三"}
   console.log(typeof params.age) // undefined
   console.log(params) // {gender: "男",name: "張三"}

   // 以下方法會直接改變物件
   let item1 = {
    name:'張三',gender:'男'
   };
   console.log(item1) // {age: "18",name: "張三"}
   delete item1.name;
   console.log(typeof item1.name) // undefined
   console.log(item1) // // {age: "18",gender: "男"}

與通常的看法不同,delete操作符與直接釋放記憶體無關。記憶體管理 通過斷開引用來間接完成的,檢視記憶體管理頁可瞭解詳情。

delete 操作符會從某個物件上移除指定屬性。成功刪除的時候會返回 true,否則返回 false。

但是,以下情況需要重點考慮:

如果你試圖刪除的屬性不存在,那麼delete將不會起任何作用,但仍會返回true
如果物件的原型鏈上有一個與待刪除屬性同名的屬性,那麼刪除屬性之後,物件會使用原型鏈上的那個屬性(也就是說,delete操作只會在自身的屬性上起作用)
任何使用 var 宣告的屬性不能從全域性作用域或函式的作用域中刪除。
這樣的話,delete操作不能刪除任何在全域性作用域中的函式(無論這個函式是來自於函式宣告或函式表示式)

除了在全域性作用域中的函式不能被刪除,在物件(object)中的函式是能夠用delete操作刪除的。
任何用let或const宣告的屬性不能夠從它被宣告的作用域中刪除。
不可設定的(Non-configurable)屬性不能被移除。這意味著像Math,Array,Object內建物件的屬性以及使用Object.defineProperty()方法設定為不可設定的屬性不能被刪除。

下面的程式碼塊給出了一個簡單的例子:

var Employee = {
 age: 28,name: 'abc',designation: 'developer'
}

console.log(delete Employee.name);  // returns true
console.log(delete Employee.age);  // returns true

// 當試著刪除一個不存在的屬性時
// 同樣會返回true
console.log(delete Employee.salary); // returns true

不可配置屬性

當一個屬性被設定為不可設定,delete操作將不會有任何效果,並且會返回false。在嚴格模式下會丟擲語法錯誤(SyntaxError)。

var Employee = {};
Object.defineProperty(Employee,'name',{configurable: false});

console.log(delete Employee.name); // returns false

var,let以及const建立的不可設定的屬性不能被delete操作刪除。

var nameOther = 'XYZ';

// 通過以下方法獲取全域性屬性:
Object.getOwnPropertyDescriptor(window,'nameOther');

// 輸出: Object {value: "XYZ",//         writable: true,//         enumerable: true,//         configurable: false}

// 因為“nameOther”使用var關鍵詞新增,
// 它被設定為不可設定(non-configurable)
delete nameOther;  // return false

在嚴格模式下,這樣的操作會丟擲異常。

嚴格模式與非嚴格模式的對比

在嚴格模式下,如果對一個變數的直接引用、函式的引數或者函式名使用delete操作,將會丟擲語法錯誤(SyntaxError)。因此,為避免嚴格模式下的語法錯誤,必須以delete object.property或delete object['property']的形式使用delete運算子。

Object.defineProperty(globalThis,'variable1',{ value: 10,configurable: true,});
Object.defineProperty(globalThis,'variable2',configurable: false,});

console.log(delete variable1); // true

// SyntaxError in strict mode.
console.log(delete variable2); // false

function func(param) {
 // SyntaxError in strict mode.
 console.log(delete param); // false
}

// SyntaxError in strict mode.
console.log(delete func); // false

任何使用var宣告的變數都會被標記為不可設定的。在下面的例子中,salary是不可設定的以及不能被刪除的。在非嚴格模式下,下面的delete操作將會返回false。

function Employee() {
 delete salary;
 var salary;
}

Employee();

讓我們來看看相同的程式碼在嚴格模式下會有怎樣的表現。會丟擲一個語法錯誤( SyntaxError)而不是返回false。
"use strict";

function Employee() {
 delete salary; // SyntaxError
 var salary;
}

// 相似的,任何對任何函式
// 直接使用delete操作將會丟擲語法錯誤。

function DemoFunction() {
 //some code
}

delete DemoFunction; // SyntaxError

示例

// 在全域性作用域建立 adminName 屬性
adminName = 'xyz';

// 在全域性作用域建立 empCount 屬性
// 因為我們使用了 var,它會標記為不可配置。同樣 let 或 const 也是不可配置的。
var empCount = 43;

EmployeeDetails = {
 name: 'xyz',age: 5,designation: 'Developer'
};

// adminName 是全域性作用域的一個屬性。
// 因為它不是用 var 建立的,所在可以刪除。
// 因此,它是可配置的。
delete adminName;    // 返回 true

// 相反,empCount 是不可配置的,
// 因為建立它時使用了 var。
delete empCount;    // 返回 false

// delete 可用於刪除物件的屬性
delete EmployeeDetails.name; // 返回 true

// 甚至屬性不存在,它也會返回 "true"
delete EmployeeDetails.salary; // 返回 true

// delete 對內建靜態屬性不起作用
delete Math.PI; // 返回 false

// EmployeeDetails 是全域性作用域的一個屬性。
// 因為定義它的時候沒有使用 "var",它被標記為可配置。
delete EmployeeDetails;  // 返回 true

function f() {
 var z = 44;

 // delete 對區域性變數名不起作用
 delete z;   // 返回 false
}

delete 和原型鏈

在下面的示例中,我們刪除一個物件的自己的屬性,而原型鏈上具有相同名稱的屬性可用:

function Foo() {
 this.bar = 10;
}

Foo.prototype.bar = 42;

var foo = new Foo();

// 返回 true,因為刪除的是 foo 物件的自身屬性
delete foo.bar;

// foo.bar 仍然可用,因為它在原型鏈上可用。
console.log(foo.bar);  //42

// 從原型上刪除屬性
delete Foo.prototype.bar; //true

// 由於已刪除“ bar”屬性,因此不能再從Foo繼承它。
console.log(foo.bar);  //undefined

刪除陣列元素

當你刪除一個數組元素時,陣列的長度不受影響。即便你刪除了陣列的最後一個元素也是如此。

當用 delete 操作符刪除一個數組元素時,被刪除的元素已經不再屬於該陣列。下面的例子中用 delete 刪除了 trees[3]。

var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
if (3 in trees) {
  // 這裡不會執行
}

如果你想讓一個數組元素繼續存在但是其值是 undefined,那麼可以使用將 undefined 賦值給這個元素而不是使用 delete。下面的例子中,trees[3] 被賦值為 undefined,但該元素仍然存在。

var trees = ["redwood","maple"];
trees[3] = undefined;
if (3 in trees) {
  // 這裡會被執行
}

如果你想通過改變陣列的內容來移除一個數組元素,請使用splice() 方法。在下面的例子中,通過使用splice(),將trees[3]從陣列中移除。

var trees = ['redwood','bay','cedar','oak','maple'];
trees.splice(3,1);
console.log(trees); // ["redwood","maple"]

到此這篇關於js刪除物件中的某一個欄位的文章就介紹到這了,更多相關js刪除物件中的某一個欄位內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!