對象的屬性及方法
1、創建對象
(1)let obj1 = new Object( )
(2)let obj2 = { }
2、設置屬性或方法
let obj = { }
(1)obj.sex = ‘man’
(2)obj[‘age’] = 18
二者區別:「[ ]」設置屬性可以傳變數,「.」設置屬性不能使用變數
3、獲取對象的屬性
let obj = { “sex”: “man”, “age”: 18}
(1)obj.sex // man
(2)obj[‘age’] // 18
4、對象屬性的刪除
var obj = {name:』abc』,age:18}
delete obj.ame
delete obj[“age”]
console.log(obj) // { }
5、檢測屬性,判斷對象中是否存在該屬性
key in obj // 既可以檢測對象自身的屬性,也可以檢測對象原型中的屬性
obj.hasOwnProperty( key ) // 只能檢測對象自身的屬性,無法檢測繼承到的屬性
var obj = {name:』abc』,age:18}
console.log(』 name』 in obj) // true
console.log(obj.hasOwnProperty(』 age』)) //true
6、遍歷對象
var arr = [』a』, 』b』, 』c』];
var obj = {name:』abc』,age:18}
for(var v in abj){
console.log(v) // key 循環對象的時候v表示屬性
}
for(var v in arr){
console.log(v) // index 循環數組的時候v表示索引
}
7、對象序列化
JSON.parse() // json字元串轉對象
JSON.stringify() // 對象轉json字元串
var obj = {“name”: “abc”, “age”:18}
JSON.stringify( obj ) // “{“name”: “abc”, “age”: 18}”
JSON.parse(“{“name”: “abc”, “age”: 18}”) // {“name”: “abc”, “age”: 18}
8、instanceof
作用:用來驗證一個對象是否為指定的構造函數的實例
[1,2,3,4] instanceof Array // true
1 instanceof Number // false
function fn(){ console.log(1) }
fn instanceof Function // true
9、遍歷對象的屬性
(1)Object.keys( )
作用:該方法的參數是一個對象,返回一個數組。該數組的成員都是該對象自身的(而不是繼承的)所有屬性名。
var obj = {p1:123,p2:456}
Object.keys( obj ) // [‘p1’, ‘p2’]
(2)Object.getOwnPropertyNames( )
作用:該方法與Object.keys類似,也是接受一個對象作為參數,返回一個數組,包含了該對象自身的所有屬性名。
var obj = {p1:123,p2:456}
Object.getOwnPropertyNames( obj ) // [‘p1’, ‘p2’]
二則區別:對於一般的對象來說,Object.keys()和Object.getOwnPropertyNames()返回的結果是一樣的。只有涉及不可枚舉屬性時,才會有不一樣的結果。Object.keys方法只返回可枚舉的屬性,Object.getOwnPropertyNames方法還可以返回不可枚舉的屬性名。
var arr = [1,2,3,4,5]
Object.keys( arr )
[“0”, “1”, “2”, “3”, “4”]
Object.getOwnPropertyNames(arr)
[“0”, “1”, “2”, “3”, “4”, “length”]
10、Object.prototype.toString.call( )
作用:可以用來判斷數據類型 ,比typeof運算符更準確的類型判斷函數
Object.prototype.toString.call(2) // “[object Number]”
Object.prototype.toString.call(‘ ‘) // “[object String]”
Object.prototype.toString.call(true) // “[object Boolean]”
Object.prototype.toString.call(undefined) // “[object Undefined]”
Object.prototype.toString.call(null) // “[object Null]”
Object.prototype.toString.call(Math) // “[object Math]”
Object.prototype.toString.call({}) // “[object Object]”
Object.prototype.toString.call([]) // “[object Array]”
11、屬性描述對象
Object.getOwnPropertyDescriptor()方法可以獲取屬性描述對象。它的第一個參數是目標對象,第二個參數是一個字元串,對應目標對象的某個屬性名。
定義:
{
value: 123,
writable: false,
enumerable: true,
configurable: false,
get:undefined,
set:undefined
}
value是該屬性的屬性值,默認為undefined。
writable是一個布爾值,表示屬性值(value)是否可改變(即是否可寫),默認為true。
enumerable是一個布爾值,表示該屬性是否可遍歷,默認為true。如果設為false,會使得某些操作(比如for…in循環、Object.keys())跳過該屬性。
configurable是一個布爾值,表示可配置性,默認為true。如果設為false,將阻止某些操作改寫該屬性,比如無法刪除該屬性,也不得改變該屬性的屬性描述對象(value屬性除外)。也就是說,configurable屬性控制了屬性描述對象的可寫性。
get是一個函數,表示該屬性的取值函數(getter),默認為undefined
set是一個函數,表示該屬性的存值函數(setter),默認為undefined
示例:
var obj1 = {p:111}
Object.getOwnPropertyDescriptor(obj1,’p’)
{
value: 111
writable: true
enumerable: true
configurable: true
}
注意,Object.getOwnPropertyDescriptor()方法只能用於對象自身的屬性,不能用於繼承的屬性。
12、Object.defineProperty( )、Object.defineProperties( )
(1)Object.defineProperty( )
作用:該方法允許通過屬性描述對象,定義或修改一個屬性,然後返回修改後的對象
var obj = Object.defineProperty({ }, ‘p’, {
value: 123,
writable: false,
enumerable: true,
configurable: false
})
obj.p // 123
obj.p = 456
obj.p // 123
(2)Object.defineProperties( )
var obj = Object.defineProperty({ }, {
’p1′: { value: 123, enumerable: true },
’p2′: { value: ‘abc’, enumerable: true },
’p3′: { get:function(){ return this.p1 + this.p2} , enumerable: true}
})
obj.p1 // 123
obj.p2 // ‘abc’
obj.p3 // ‘123abc’
注意,一旦定義了取值函數get(或存值函數set),就不能將writable屬性設為true,或者同時定義value屬性,否則會報錯。
Object.defineProperty()和Object.defineProperties()參數裡面的屬性描述對象,writable、configurable、enumerable這三個屬性的默認值都為false。
13、obj.propertyIsEnumerable( )
作用:該方法返回一個布爾值,用來判斷某個屬性是否可遍歷。注意,這個方法只能用於判斷對象自身的屬性,對於繼承的屬性一律返回false。
14、存取器
var obj = Object.defineProperty({ }, ‘p’, {
get : function( ){
return ‘getter’
},
set : function(val){
console.log(‘setter:’ + val)
}
})
obj.p // ‘getter’
obj.p =123 //’setter: 123′
另一種寫法:
var obj1 = {
get p(){ return 111},
set p(val){console.log(‘setter:’ + val)}
}
obj1.p // 111
obj1.p =123 // ‘setter: 123’
應用:
var obj = {
v: 5,
get p(){ return this.v},
set p(val){
if(val >= this.v) {
this .v = val
}else{
throw new Error(‘新的值必須大於當前值’)
}
}
}
obj.p // 5
obj.p = 10
obj.p // 10
obj.p = 5 // Uncaught Error:新的值必須大於當前值