前端開發(fā)中經(jīng)常應(yīng)用到對對象的遍歷,有很多方法可實(shí)現(xiàn)将宪,但用法和功能有所不同绘闷,下面總結(jié)比較一下異同。下面代碼 比較 for in较坛,Object.keys,Object. getOwnPropertyNames印蔗,getOwnPropertySymbols 等。
方法 | 屬性 | 備注 |
---|---|---|
for in | 遍歷 可枚舉的 原型上的屬性和自身屬性 | 不包含Symbol |
Object.keys | 遍歷可枚舉的自身屬性 | 不包含Symbol 作為屬性名和原型上的屬性 |
Object. getOwnPropertyNames | 指定對象的所有自身屬性的屬性名(包括不可枚舉屬性) | 不包括Symbol值作為名稱的屬性 |
Object.getOwnPropertySymbols(o) | 遍歷 Symbol 值作為屬性名 | 包含不可枚舉屬性 |
var o = new Object(),x=Symbol('x');
//原型上的屬性
Object.prototype.name = 'xl';
//自身上普通屬性
o.prop = 'xl';
o.enum = 'enum';
//Symbol 值作為屬性名
o[x]='1212'
//將 enum 屬性設(shè)為不可枚舉
Object.defineProperty(o,'enum',{
enumerable:false
})
//可以遍歷 可枚舉的 原型上的屬性和自身屬性(不包含Symbol)
for(var i in o)
{
console.log(i); // name prop
}
// 遍歷可枚舉的自身屬性(不包含Symbol 作為屬性名和原型上的屬性)
Object.keys(o).forEach((key)=>{
console.log(`key:${key}`); // prop
})
// for in 和 hasOwnProperty 組合可以實(shí)現(xiàn) Object.keys
for(var i in o)
{
if(o.hasOwnProperty(i))
{
console.log(i); // prop
}
}
//方法返回一個由指定對象的所有自身屬性的屬性名(包括不可枚舉屬性但不包括Symbol值作為名稱的屬性)組成的數(shù)組
console.log(Object.getOwnPropertyNames(o)) //[ 'prop', 'enum' ]
//遍歷 Symbol 值作為屬性名
console.log(Object.getOwnPropertySymbols(o)) //[ Symbol(x) ]
//獲得對象屬性的 詳細(xì)信息
console.log(Object.getOwnPropertyDescriptor(o,x))
// { value: '1212',
// writable: true,
// enumerable: true,
// configurable: true }
//獲得對象的原型上的可枚舉的{key:value}
console.log(Object.getPrototypeOf(o)) //{ name: 'xl' }
參考鏈接:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object