js刪除對(duì)象中的某一個(gè)字段的方法實(shí)現(xiàn)
本文主要介紹了js刪除對(duì)象中的某一個(gè)字段的方法實(shí)現(xiàn),分享給大家,具體如下:
// 以下方法不改變?cè)瓉韺?duì)象
let item = {
name:'張三',
age:'18',
gender:'男'
};
console.log(item) // {age: "18",gender: "男",name: "張三"}
let { age,...params } = item;
console.log(item) // {age: "18",gender: "男",name: "張三"}
console.log(typeof params.age) // undefined
console.log(params) // {gender: "男",name: "張三"}
// 以下方法會(huì)直接改變對(duì)象
let item1 = {
name:'張三',
age:'18',
gender:'男'
};
console.log(item1) // {age: "18",gender: "男",name: "張三"}
delete item1.name;
console.log(typeof item1.name) // undefined
console.log(item1) // // {age: "18",gender: "男"}
與通常的看法不同,delete操作符與直接釋放內(nèi)存無關(guān)。內(nèi)存管理 通過斷開引用來間接完成的,查看內(nèi)存管理頁(yè)可了解詳情。
delete 操作符會(huì)從某個(gè)對(duì)象上移除指定屬性。成功刪除的時(shí)候會(huì)返回 true,否則返回 false。
但是,以下情況需要重點(diǎn)考慮:
如果你試圖刪除的屬性不存在,那么delete將不會(huì)起任何作用,但仍會(huì)返回true
如果對(duì)象的原型鏈上有一個(gè)與待刪除屬性同名的屬性,那么刪除屬性之后,對(duì)象會(huì)使用原型鏈上的那個(gè)屬性(也就是說,delete操作只會(huì)在自身的屬性上起作用)
任何使用 var 聲明的屬性不能從全局作用域或函數(shù)的作用域中刪除。
這樣的話,delete操作不能刪除任何在全局作用域中的函數(shù)(無論這個(gè)函數(shù)是來自于函數(shù)聲明或函數(shù)表達(dá)式)
除了在全局作用域中的函數(shù)不能被刪除,在對(duì)象(object)中的函數(shù)是能夠用delete操作刪除的。
任何用let或const聲明的屬性不能夠從它被聲明的作用域中刪除。
不可設(shè)置的(Non-configurable)屬性不能被移除。這意味著像Math, Array, Object內(nèi)置對(duì)象的屬性以及使用Object.defineProperty()方法設(shè)置為不可設(shè)置的屬性不能被刪除。
下面的代碼塊給出了一個(gè)簡(jiǎn)單的例子:
var Employee = {
age: 28,
name: 'abc',
designation: 'developer'
}
console.log(delete Employee.name); // returns true
console.log(delete Employee.age); // returns true
// 當(dāng)試著刪除一個(gè)不存在的屬性時(shí)
// 同樣會(huì)返回true
console.log(delete Employee.salary); // returns true
不可配置屬性
當(dāng)一個(gè)屬性被設(shè)置為不可設(shè)置,delete操作將不會(huì)有任何效果,并且會(huì)返回false。在嚴(yán)格模式下會(huì)拋出語(yǔ)法錯(cuò)誤(SyntaxError)。
var Employee = {};
Object.defineProperty(Employee, 'name', {configurable: false});
console.log(delete Employee.name); // returns false
var, let以及const創(chuàng)建的不可設(shè)置的屬性不能被delete操作刪除。
var nameOther = 'XYZ';
// 通過以下方法獲取全局屬性:
Object.getOwnPropertyDescriptor(window, 'nameOther');
// 輸出: Object {value: "XYZ",
// writable: true,
// enumerable: true,
// configurable: false}
// 因?yàn)椤皀ameOther”使用var關(guān)鍵詞添加,
// 它被設(shè)置為不可設(shè)置(non-configurable)
delete nameOther; // return false
在嚴(yán)格模式下,這樣的操作會(huì)拋出異常。
嚴(yán)格模式與非嚴(yán)格模式的對(duì)比
在嚴(yán)格模式下,如果對(duì)一個(gè)變量的直接引用、函數(shù)的參數(shù)或者函數(shù)名使用delete操作,將會(huì)拋出語(yǔ)法錯(cuò)誤(SyntaxError)。因此,為避免嚴(yán)格模式下的語(yǔ)法錯(cuò)誤,必須以delete object.property或delete object['property']的形式使用delete運(yùn)算符。
Object.defineProperty(globalThis, 'variable1', { value: 10, configurable: true, });
Object.defineProperty(globalThis, 'variable2', { value: 10, 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聲明的變量都會(huì)被標(biāo)記為不可設(shè)置的。在下面的例子中,salary是不可設(shè)置的以及不能被刪除的。在非嚴(yán)格模式下,下面的delete操作將會(huì)返回false。
function Employee() {
delete salary;
var salary;
}
Employee();
讓我們來看看相同的代碼在嚴(yán)格模式下會(huì)有怎樣的表現(xiàn)。會(huì)拋出一個(gè)語(yǔ)法錯(cuò)誤( SyntaxError)而不是返回false。
"use strict";
function Employee() {
delete salary; // SyntaxError
var salary;
}
// 相似的,任何對(duì)任何函數(shù)
// 直接使用delete操作將會(huì)拋出語(yǔ)法錯(cuò)誤。
function DemoFunction() {
//some code
}
delete DemoFunction; // SyntaxError
示例
// 在全局作用域創(chuàng)建 adminName 屬性
adminName = 'xyz';
// 在全局作用域創(chuàng)建 empCount 屬性
// 因?yàn)槲覀兪褂昧?var,它會(huì)標(biāo)記為不可配置。同樣 let 或 const 也是不可配置的。
var empCount = 43;
EmployeeDetails = {
name: 'xyz',
age: 5,
designation: 'Developer'
};
// adminName 是全局作用域的一個(gè)屬性。
// 因?yàn)樗皇怯?var 創(chuàng)建的,所在可以刪除。
// 因此,它是可配置的。
delete adminName; // 返回 true
// 相反,empCount 是不可配置的,
// 因?yàn)閯?chuàng)建它時(shí)使用了 var。
delete empCount; // 返回 false
// delete 可用于刪除對(duì)象的屬性
delete EmployeeDetails.name; // 返回 true
// 甚至屬性不存在,它也會(huì)返回 "true"
delete EmployeeDetails.salary; // 返回 true
// delete 對(duì)內(nèi)建靜態(tài)屬性不起作用
delete Math.PI; // 返回 false
// EmployeeDetails 是全局作用域的一個(gè)屬性。
// 因?yàn)槎x它的時(shí)候沒有使用 "var",它被標(biāo)記為可配置。
delete EmployeeDetails; // 返回 true
function f() {
var z = 44;
// delete 對(duì)局部變量名不起作用
delete z; // 返回 false
}
delete 和原型鏈
在下面的示例中,我們刪除一個(gè)對(duì)象的自己的屬性,而原型鏈上具有相同名稱的屬性可用:
function Foo() {
this.bar = 10;
}
Foo.prototype.bar = 42;
var foo = new Foo();
// 返回 true,因?yàn)閯h除的是 foo 對(duì)象的自身屬性
delete foo.bar;
// foo.bar 仍然可用,因?yàn)樗谠玩溕峡捎谩?
console.log(foo.bar); //42
// 從原型上刪除屬性
delete Foo.prototype.bar; //true
// 由于已刪除“ bar”屬性,因此不能再?gòu)腇oo繼承它。
console.log(foo.bar); //undefined
刪除數(shù)組元素
當(dāng)你刪除一個(gè)數(shù)組元素時(shí),數(shù)組的長(zhǎng)度不受影響。即便你刪除了數(shù)組的最后一個(gè)元素也是如此。
當(dāng)用 delete 操作符刪除一個(gè)數(shù)組元素時(shí),被刪除的元素已經(jīng)不再屬于該數(shù)組。下面的例子中用 delete 刪除了 trees[3]。
var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
if (3 in trees) {
// 這里不會(huì)執(zhí)行
}
如果你想讓一個(gè)數(shù)組元素繼續(xù)存在但是其值是 undefined,那么可以使用將 undefined 賦值給這個(gè)元素而不是使用 delete。下面的例子中,trees[3] 被賦值為 undefined,但該元素仍然存在。
var trees = ["redwood","bay","cedar","oak","maple"];
trees[3] = undefined;
if (3 in trees) {
// 這里會(huì)被執(zhí)行
}
如果你想通過改變數(shù)組的內(nèi)容來移除一個(gè)數(shù)組元素,請(qǐng)使用splice() 方法。在下面的例子中,通過使用splice(),將trees[3]從數(shù)組中移除。
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; trees.splice(3,1); console.log(trees); // ["redwood", "bay", "cedar", "maple"]
到此這篇關(guān)于js刪除對(duì)象中的某一個(gè)字段的文章就介紹到這了,更多相關(guān)js刪除對(duì)象中的某一個(gè)字段內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)W習(xí)總結(jié)(一)項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu)分析
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)(一)項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu),總結(jié)分析了微信小程序項(xiàng)目創(chuàng)建、配置方法以及目錄結(jié)構(gòu)、文件功能,需要的朋友可以參考下2020-06-06
通過設(shè)置CSS中的position屬性來固定層的位置
position 屬性規(guī)定元素的定位類型,這個(gè)屬性定義建立元素布局所用的定位機(jī)制,本文給大家介紹通過設(shè)置CSS中的position屬性來固定層的位置,感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果
這篇文章主要為大家詳細(xì)介紹了JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
基于JS實(shí)現(xiàn)Flappy?Bird游戲的示例代碼
Flappy?Bird是13年紅極一時(shí)的小游戲,即摁上鍵控制鳥的位置穿過管道間的縫隙。本文將用JS實(shí)現(xiàn)這一經(jīng)典的游戲,需要的可以參考一下2022-04-04
Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法
下面小編就為大家?guī)硪黄狫s遍歷鍵值對(duì)形式對(duì)象或Map形式的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果
這篇文章主要介紹了Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
javascript中傳統(tǒng)事件與現(xiàn)代事件
本文給大家介紹的是使用傳統(tǒng)事件的方法來模擬現(xiàn)代事件,十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-06-06
layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼
今天小編就為大家分享一篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09

