1.遍历自身可枚举的属性(可枚举,非继承性)Object.keys() 方法
<script>
// Array 对象
let arr = ['pink', 'green', 'blue']
console.log(Object.keys(arr))// ['0', '1', '2']
// Object 对象
let obj = { name: 'Alice', age: 18 }
console.log(Object.keys(obj),)//['name', 'age']
// 类数组对象,随机 key 排序
let anObj = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.keys(anObj))//['2', '7', '100']
// getFoo是一个不可枚举的属性
let myObj = Object.create({}, { getFoo: { value: function () { return this.foo } } })
myObj.foo = 1
console.log(Object.keys(myObj))//['foo']
</script>
2.遍历自身的所有属性(可枚举,不可枚举,非继承属性)Object.getOwnPrototypeNames()方法
该方法返回一个由指定对象的所有自身属性组成的数组,包括不可枚举属性但
不包括Symbol值作为名称的属性
<script>
// Array 对象
let arr = ['pink', 'green', 'blue']
console.log(Object.getOwnPropertyNames(arr).sort())//['0', '1', '2', 'length']
// Object 对象
let obj = { name: 'Alice', age: 18 }
console.log(Object.getOwnPropertyNames(obj).sort())//['age', 'name']
// 类数组对象
let anObj = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.getOwnPropertyNames(anObj).sort())// ['0', '1', '2']
Object.getOwnPropertyNames(anObj).sort().forEach((val, index, arr) => {
console.log(`${val}→${anObj[val]}`)//0→a 1→b 2→c
})
// 不可枚举的属性
let myObj = Object.create({}, {
getFoo: {
value: function () {
return this.foo
}, enumerable: false
}
})
myObj.foo = 1
console.log(Object.getOwnPropertyNames(myObj).sort())//['foo', 'getFoo']
</script>
3.遍历可枚举的自身属性和继承性(可枚举,可继承的属性)for in 循环
hasOwnProperty()方法判断对象是否有某个属性(本身的属性,不是继承的属性)
<script>
let obj = {
name: 'Alice',
age: 18,
getAge: function () {
console.log(this.age)
}
}
let newObbj = {}
for (let key in obj) {
if (obj.hasOwnProperty(key) && typeof obj[key] != 'function') {
newObbj[key] = obj[key]
}
}
console.log(newObbj)//{name: 'Alice', age: 18}
</script>
4.遍历所有的自身属性和继承性
<script>
(function () {
let getAllPropertyNames = function (obj) {
let props = []
do {
props = props.concat(Object.getOwnPropertyNames(obj))
} while (obj = Object.getPrototypeOf(obj))
return props
}
let propertys = getAllPropertyNames(window)
console.log(propertys.length)//1038
console.log(propertys.join('\n'))//Object Function Array Number 等
})()
</script>