Javascript Object對象類型使用詳解
1. 生成方法
對象是javaScript中的一種數據類型,它是key-value的合集,是無序的
const obj = { name: 'ian',age: 21}; //key使用變量 const gender = 'gender'; const obj = { [gender]: 'male'};
- 對象的key必須符合標識符的規則,寫的時候key可以加引號也可以不加引號,如果key是數字類型會自動轉為字符串
- value可以是任意數據類型
2. 操作屬性
2.1 讀取
屬性的讀取有兩種:通過.操作符讀取和通過方括號運算符讀取,.操作符後面隻能跟健名,方括號運算符裡面隻能放數字或者變量
obj.鍵名 || obj[變量/表達式]
const user = {name:'ian', age:21, 5:5}; user.name; //使用方括號運算符 var name = 'name'; user[5]; //5 user[name]; //'ian'
2.2 賦值
賦值同樣也是可以通過.操作符和方括號運算符進行
const user = {}; user.name = 'ian'; const age = 'age'; user[age] = 21;
2.3 刪除
const user = {name:'ian', age:21}; delete user.name; //true console.log(user); //{age:21}
需要註意的是使用delete刪除對象上不存在的屬性也會返回true,隻有刪除不可寫的屬性時才會返回false
var user = {}; delete user.name; //true var obj = Object.defineProperty({},'name',{ value: 'ian', configurable: false, }); delete obj.name; //false console.log(obj); //{name: 'ian'}
delete隻能刪除對象自身的屬性,不能刪除從原型上繼承來屬性
function User(){}; User.prototype.name = 'ian'; const user = new User(); delete user.name; //true console.log(user.namr); //ian
2.4 遍歷
使用Object.keys遍歷對象屬性
const user = {name:'ian', age:21}; Object.keys(user).forEach(key=>{ console.log(user[key]); })
使用for…in遍歷對象屬性
從Objetc繼承來的toString方法不會被遍歷
const user = { name: 'ian', age: 21 }; for (let key in user) { console.log(`key: ${key}, value:${user[key]}`) }
Object.keys與for…in的區別?
通過Object.keys獲取的是對象自身的可枚舉屬性,而for in能遍歷自身和原型上的可枚舉屬性
function User(name, age) { this.name = name; this.age = age; }; User.prototype.gender = 'male'; var user = new User('ian', 21); Object.defineProperty(user, 'email', { enumerable: false, value: '[email protected]' }); console.log(user); //{name:'ian', age:'21', email:'[email protected]'} console.log(Object.keys(user)); //Array [ "name", "age" ] for (let key in user) { console.log(`key: ${key}, value:${user[key]}`); }; // key: name, value:ian // key: age, value:21 // key: gender, value:male
如果使用for…in隻想遍歷自身屬性的時候要加上hasOwnProperty的判斷
for (let key in user) { if(user.hasOwnProperty(key)){ console.log(`key: ${key}, value:${user[key]}`); } }; // key: name, value:ian // key: age, value:21
2.5 判斷屬性是否存在
使用in關鍵字判斷
const user = {name:'ian', age:21}; 'name' in user; //true
使用hasOwnProperty方法判斷
user.hasOwnProperty(age); //true
區別是in關鍵字能判斷出原型上的屬性,hasOwnProperty隻能判斷對象自身屬性
3. with 語句
使用with語句批量操作對象屬性
const user = {name:'ian', age:21}; with(user){ name = 'jack'; age = 23; } //等同於 user.name='jack'; user.gender='male'
with有個很大的弊端就是操作的屬性一定是在對象中原本就存在的,否則就會生成一個全局變量,當obj不存在的時候會從一級作用域中讀取變量
width(obj){ obj.x } //無法判斷x是obj的屬性還是全局變量 with({}){ name = 'ian'; } //會在全局聲明name變量
with的產生的弊端遠大於它本身的作用,因此代碼中盡量不要使用with
總結
- 讀寫對象屬性可以通過.操作符和方括號運算符,方括號運算符裡面可以放變量
- 使用delete 關鍵字刪除對象自身屬性,無法刪除繼承來的屬性。通過defineProperty設置configuarble後將不可被刪除
- Object.keys()方法獲取的是對象自身的可枚舉的key的數組, for…in遍歷的是自身屬性以及原型上的屬性,原型上的toString方法不會被遍歷
- 使用in關鍵字或者hasOwnProperty方法判斷對象中是否包含某個屬性,區別是in關鍵字能判斷出原型上的屬性
- with語法用來批量操作對象屬性,由於作用域問題影響太嚴重所以盡量不要使用
到此這篇關於Javascript Object對象類型使用詳解的文章就介紹到這瞭,更多相關JS Object對象內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript Object.defineProperty與proxy代理模式的使用詳細分析
- JavaScript原型Prototype詳情
- JavaScript defineProperty如何實現屬性劫持
- 一篇文章帶你瞭解JavaScript-對象
- Javascript中判斷對象是否具有屬性的5種方法分享