如何遍历一个JS对象中的所有属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何遍历一个JS对象中的所有属性相关的知识,希望对你有一定的参考价值。

var obj = a:1,b:2,c:3

现在想遍历这个JS对象中的 a,b,c

使用for...in可以遍历js对象的属性,用法如下:

for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

具体代码:

<script>
var obj = a:1,b:2,c:3
for(var s in obj)
alert(obj[s]);
</script>

拓展资料:

“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。

直接用js里面自带的for..in就可以实现了。

var o = a:1,b:2,c:3,d:4;

for(var name in o)    console.log(name + ':' + o[name]);

这样就可以把o对象里面的所以属性都遍历一遍了。

参考技术A

使用for...in可以遍历js对象的属性,用法如下:

for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

具体代码:

<script>var obj = a:1,b:2,c:3for(var s in obj)alert(obj[s]);</script>

拓展资料

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

组成部分

ECMAScript,描述了该语言的语法和基本对象。 

文档对象模型(DOM),描述处理网页内容的方法和接口。 

浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。 

基本特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 

    是一种解释性脚本语言(代码不进行预编译)。 

    主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。 

    可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。 

    跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

    Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。 

    日常用途

    嵌入动态文本于HTML页面。 

    对浏览器事件做出响应。 

    读写HTML元素。 

    在数据被提交到服务器之前验证数据。 

    检测访客的浏览器信息。 

    控制cookies,包括创建和修改等。 

    基于Node.js技术进行服务器端编程。 

历史

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。 

Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。

但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。 

发展初期,JavaScript的标准并未确定,同期有Netscape的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。

特性

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。 

不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。

而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。

资料来源:百度百科:javascript

参考技术B 直接用js里面自带的for..in就可以实现了。 
var o = a:1,b:2,c:3,d:4;
for(var name in o)
    console.log(name + ':' + o[name]);

这样就可以把o对象里面的所以属性都遍历一遍了。

参考技术C

使用for...in可以遍历js对象的属性,用法如下:

for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

for (变量 in 对象)

    //在此执行代码

“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。

示例:

for (var sProp in window) 
  alert(sProp);

以上例子会弹出window对象中的所有属性

参考技术D 示例代码如下:
[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>testExtjs4</title>
<script type="text/javascript" src="../js/classextends1.js"></script>
<script type="text/javascript">
for (pro in document)
document.write("document."+pro+"="+document[pro]+"<br>");

</script>

</head>
<body>

</body>
</html>
示例2:
[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>testExtjs4</title>

<script type="text/javascript">

function Test()
this.prop1='val1';
this.prop2='val2';
this.prop3='val3';
this.tf= function()
return this.prop1;



Test.prototype.tf1 = function()return this.prop2;;

var t = new Test();
for (pro in t)
document.write("t."+pro+"="+t[pro]+"<br>");


</script>

</head>
<body>

</body>
</html>

如何遍历一个对象的所有自有属性?

我们怎么区别一个属性是基本的属性还是从原型继承的呢?就要用到hasOwnProperty

function Fun(){
    this.name="jack"
}
Fun.prototype.age=23
for(var item in f1){
    if(f1.hasOwnProperty(item)){
        console.log(item)//输出name
    }
}    

hasOwnProperty是从Object.prototype中来的

 

以上是关于如何遍历一个JS对象中的所有属性的主要内容,如果未能解决你的问题,请参考以下文章

怎么用js拿到一个对象里面的属性

angularjs怎么遍历每个对象的属性的值

如何遍历对象属性并返回值?

js遍历Object所有属性

js遍历Object所有属性

js遍历对象属性