高性能 javaScript 之遍历对象属性

在面向对象的开发工作中,经常会遇到检查对象属性和遍历对象属性的情况。 JavaScript 不包含如 java、C 等语言的传统类继承模型,而是使用 prototype 原型模型。

JavaScript 原型链继承中属性查找过程

当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止。
到查找到达原型链的顶部 - 也就是 Object.prototype - 但是仍然没有找到指定的属性,就会返回 undefined。

使用 for in 循环可以遍历对象所有的属性,包括该对象在原型链中的属性,如:

var a = {
        a:1,
        b:2
  };
                        
  var b = Object.create(a);
                        
  b.c = 3;

var c = Object.create(b);
                        
  c.d = 4;
                        
  for(var key in c){
    console.log(c[key])
  }
  
  //会在控制台中依次打印出4 3 1 2

注意在控制台中打印的顺序是 4 3 1 2,而不是 1 2 3 4,这就解释了原型链继承时查找属性的过程是先查找自身属性,当自身属性不存在时,会在原型链中逐级查找。

有时候我们并不想要这样的结果,我们只想要获取对象自身的属性(不包括对象原型链上的属性),况且每次遍历都要查找对象的原型链,这样会造成性能负担。

hasOwnProperty 函数

hasOwnProperty 函数可以用来检查对象自身是否含有某个属性,返回值是布尔值,当属性不存在时不会向上查找对象原型链。

用个例子来看看 hasOwnProperty 和 for in 的区别:

if(var "a" in c){
  console.log(c["a"])  //属性 a 是原型链上的属性, 输出 1
}

if(c.hasOwnProperty("a")){
  console.log(c["a"])  //属性 a 不是自身属性,不会执行这一步
}

getOwnPropertyNames 函数

getOwnPropertyNames 函数可以获取对象所有的自身属性,返回值是由对象自身属性名称组成的数组,同样不会向上查找对象原型链。

如:

console.log(Object.getOwnPropertyNames(c))  //输出 ["d"]

getOwnPropertyNames 函数遍历所有对象所有自身属性,例:

(fucntion(){
  var propertys = Object.getOwnPropertyNames(c);
  var len = propertys.length;

for(var i = 0; i < len; i++){
    var key = propertys[i];
    console.log(c[key])  //输出 4
  }
})();
 
 更多精彩内容分享,加群434623999

时间: 2025-01-14 16:53:39

高性能 javaScript 之遍历对象属性的相关文章

JS/jQuery 遍历对象属性

Javascript For/In 循环: 循环遍历对象的属性 var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; } 结果:JohnDoe25 jQuery jQuery.each() 遍历对象属性 var arr = ["one", "two", "three", "fou

遍历对象属性(for in、Object.keys、Object.getOwnProperty)

js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性.继承自原型的属性 var obj = {"name":"Poly", "career":"it"} Object.defineProperty(obj, "age", {value:"forever

ES6之6种遍历对象属性的方法

1.for ... in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). 2.Obejct.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). 3.Object.getOwnPropertyNames(obj),返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性). 4.Object.getOwnPropertySymbols(obj),返回一个数组,包含对象自身的所有Symbol属性. 5.Ref

遍历对象属性

初始化对象: var person = function(name){ this._name = name; } var grand = function(){ this.city = "sh"; } grand.prototype.age = 18; person.prototype = new grand(); 1. for in 不仅能遍历自身的可枚举属性,还遍历原型对象中的可枚举属性 var p = new person(); for(var key in p){ consol

JavaScript 深度遍历对象的两种方式,递归与非递归

递归遍历: 基本问题: 当前属性值不为对象时,打印键和值 递归过程:当前属性值为对象时,打印键,继续递归 var o = { a: { b: { c: { d: { e: { f: 1, g:{ h:2 } } } } } } }; function printObjRec(obj) { for (var prop in obj) { if (typeof (obj[prop]) === "object") { console.log(prop); getProp(obj[prop])

javascript中遍历对象的List集合

<script> <c:forEach var="obj" items="${mulst} "> alert("${obj.属性}"); </c:forEach> </script> 其实该解决方案不是很好,容易导致浏览器崩溃,当List元素很多时,循环的代码就很多,页面很庞大,浏览器吃不消! 另外, 服务端生成的数据,客户端去遍历的问题,最好使用Ajax技术. $.ajax({ type: 'po

遍历对象属性值

将对象内的属性以及属性值输出 public static string ToProperties_V(this object obj) { if (obj == null) return ""; var s = obj.GetType(); StringBuilder app = new StringBuilder(); foreach (var item in s.GetProperties()) { app.Append($"{item.Name}:{item.GetVa

C#遍历对象属性

1 public void EachProperties() 2 { 3 Contract contract = new Contract { employeename = "Rikas" }; 4 Type type = contract.GetType(); 5 System.Reflection.PropertyInfo[] ps = type.GetProperties(); 6 foreach (PropertyInfo i in ps) 7 { 8 if (i.Proper

javascript 简单语法 对象属性及方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-