js对象-属性遍历

Posted 2020-10-29 懒人的懒

为了加强js对象的认知，又刷了一题。

直接上题目：

找出对象 obj 不在原型链上的属性(注意这题测试例子的冒号后面也有一个空格~)
1、返回数组，格式为 key: value
2、结果数组不要求顺序

示例：

//输入
var C = function() {this.foo = \'bar\'; this.baz = \'bim\';}; 

C.prototype.bop = \'bip\'; 

iterate(new C());


//输出

["foo: bar", "baz: bim"]

//函数体
function iterate(obj) {
　　//内容
}

解题思路，iterate接收的函数obj,先打印出来。

{foo: "bar", baz: "bim"}

输出数组，很简单。

for in 循环，修改iterate函数

function iterate (obj){
  for(var key in obj){
       //这里用中括号是因为，key 是一个带引号的字符  
       return key + ":" + obj[key]          
    }  
}

//返回

foo:bar
baz:bim
bop:bip

怎么多一个，但是我打印obj的时候，只有两个啊。

看了下for in ，只遍历一个对象的可枚举属性。

 

可枚举属性是啥？

可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true。可枚举的属性可以通过 for...in 循环进行遍历（除非该属性名是一个 Symbol）。属性的所有权是通过判断该属性是否直接属于某个对象决定的，而不是通过原型链继承的。一个对象的所有的属性可以一次性的获取到。有一些内置的方法可以用于判断、迭代/枚举以及获取对象的一个或一组属性，下表对这些方法进行了列举。对于部分不可用的类别，下方的示例代码对获取方法进行了演示。

 相关链接：https://developer.mozilla.org/zh-CN/docs/Web/javascript/Enumerability_and_ownership_of_properties

 

个人理解：for in 循环是可枚举属性，其实就是对象初始化的值，和后来通过直接给值 xx.proprototype.one = \'11\'这种方式，如果要访问

console.log(obj.__proto__)

//返回

{bop: "bip", constructor: ƒ}

 

判断不可枚举的属性

in: 返回布尔值，有返回 true

if(!key in bop){
  //push 进数组  
}

propertyIsEnumerable()：返回布尔值，有返回 true

if(!obj[key].propertyIsEnumerable(\'bip\')){
  //接着执行  
}

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性

if(!key.hasOwnProperty(\'bip\')){
  //继续执行  
}

 

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

 

return Object.getOwnPropertyNames(obj).map(function (key){
   //因为后面添加属性只会从后面添加 
    return key + ":" + obj[key]

})

Object.getOwnPropertyNames() 返回一个数组，该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for...in 循环（或 Object.keys）迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

return Object.getOwnPropertyNames(obj).map(function (key){
   //因为后面添加属性只会从后面添加 
    return key + ":" + obj[key]

})

 

 

这些是官方推荐的方法，具体的用法可以看上面的链接。

都可以实现上面的题目，可能会有一些兼容的问题，导致提交出错。

这里面 使用 hasOwnProperty 和 getOwnPropertyNames 都可以提交，不知道测试的内容到底是啥，Object.keys(obj)，用他来循环push进去，因为返回的数组是三个，而value值是4个，第四个就是后面加上去的，所以这种方式也是可以的，这里推荐比较好的方法。

getOwnPropertyNames 

return Object.getOwnPropertyNames(obj).map(function (key) {
        return key + \': \' + obj[key];
    });

一道小小的题目，对于对象的基础知识算是一个考验。