HTML5学堂-码匠 HTML5学堂

您当前位于:ECMAScript 基础语法 ——> JavaScript | for-in循环语句

JavaScript | for-in循环语句

2015/05/27 11:24:25 | 作者:HTML5学堂(码匠) | 分类:ECMAScript 基础语法 | 关键词:for-in,label,循环语句

for-in语句

HTML5学堂:当我们去获取一个对象的时候,我们使用对象.属性来获取,但如果我们不知道对象里有哪些属性的时候,我们又想获取该对象里面的属性值时,我们就要使用for-in语句来遍历我们的对象,获取到对象里面的属性。

Object是JavaScript的一种基本数据类型。我们可以通过对象.属性来获取或者给对象设置属性,通过对象.方法来获取或者给对象添加方法。例如:

  1. var obj = {};
  2. obj.name = "HTML5学堂";
  3. obj.fn = function(){
  4.     console.log("http://www.h5course.com");
  5. }
  6. console.log(obj.name);    // "HTML5学堂"
  7. obj.fn();    // "http://www.h5course.com"

上面的例子是当我们知道对象中有确定属性或者方法的时候,我们可以通过对象.属性和对象.方法这样的方式来获取该对象的属性和方法。我们在获取对象的属性值时,通常使用的是对象.属性这种方式来获取对象的属性值,但如果我们的属性是一个变量,这个时候我们就不能使用对象.属性这种方式来获取我们的属性值,这个时候,可以使用对象["属性"]的方式来获取。

  1. var obj = {
  2.     "name": "HTML5学堂",
  3.     "url": "http://www.h5course.com"
  4. }
  5. console.log(obj["name"]);    // "HTML5学堂"
  6. var prop = "url";
  7. console.log(obj[prop]);    // "http://www.h5course.com"

欢迎沟通交流~HTML5学堂

我们在项目开发的过程中,我们获取到一个对象,但是对象里面的属性不确定,这个时候我们可以使用for-in语句来获取对象里面的属性。我们先来看一下for-in语句的基本语法:

  1. for(变量 in 对象){
  2.     语句
  3. }

下面是一个示例:

  1. var obj = {
  2.     "name": "HTML5学堂",
  3.     "url": "http://www.h5course.com"
  4. }
  5. var prop;
  6. for(prop in obj){
  7.     console.log(prop);    // "name"    "url"
  8. }

每次循环,我们的变量prop都会获取到obj的一个新属性,直到遍历到obj中的所有的属性,结束for循环语句。我们既然可以获得obj的所有的属性,那个就可以得到obj所有的属性值。

  1. var obj =  {
  2.     "name": "HTML5学堂",
  3.     "url": "http://www.h5course.com"
  4. }
  5. var prop;
  6. for(prop in obj){
  7.     console.log(obj[prop]);    // "HTML5学堂"    "http://www.h5course.com"
  8. }

我们通过for-in语句,遍历获取到了obj中所有的属性值。但需要注意一点的是,for-in语句无法保证遍历顺序,应尽量避免依赖对象属性顺序的代码。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端