一 、for ..in 循环

  使用for..in循环时,返回的是所有能够通过对象访问的、可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例。这里需要注意的是使用for-in返回的属性因各个浏览器厂商遵循的标准不一致导致对象属性遍历的顺序有可能不是当初构建时的顺序。(实例+原型中的可枚举属性

1、遍历数组

  虽然for..in主要用于遍历对象的属性,但同样也可以用来遍历数组元素。

2:for..in和for遍历数组时下标类型不一样
var colors = ['red', 'green', 'blue'];

for (var i in colors) {
typeof i; // string
} for (var j = 0; j < colors.length; j++) {
typoef i; // number
}

二、JavaScript forEach() 方法

列出数组的每个元素:

<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p> <script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25]; function myFunction(item, index) {
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
</script>

三、for...of  方法

1、for..of为ES6新增的方法,主要来遍历可迭代的对象(包括Array, Map, Set, arguments等),它主要用来获取对象的属性值,而for..in主要获取对象的属性名。

  • for of支持遍历数组、类对象(例如DOM NodeList对象)、字符串、Map对象、Set对象;
  • for of不支持遍历普通对象,可通过与Object.keys()搭配使用遍历;(见示例二)
  • for of遍历后的输出结果为数组元素的值;
var colors = ['red', 'green', 'blue'];
colors.length = 5;
colors.push('yellow'); for (var i in colors) {
console.log(colors[i]); // red green blue yellow
} for (var j of colors) {
console.log(j); // red green blue undefined undefined yellow
}

可以看到使用for..of可以输出包括数组中不存在的值在内的所有值

2、其实除了使用for..of直接获取属性值外,我们也可以利用Array.prototype.forEach()来达到同样的目的。

var colors = ['red', 'green', 'blue'];
colors.foo = 'hello';
console.log(Object.keys(colors));//["0", "1", "2", "foo"]
Object.keys(colors).forEach(function(elem, index) {
console.log(elem);//0 1 2 foo
console.log(colors[elem]); // red green blue hello
console.log(colors[index]); // red green blue undefined
}); colors.forEach(function(elem, index) {
console.log(elem); // red green blue
console.log(index); // 0 1 2
})

四、Object.keys() 方法

  • 遍历结果为由对象自身可枚举属性组成的数组,数组中的属性名排列顺序与使用for in循环遍历该对象时返回的顺序一致;
  • 与for in区别在于不能遍历出原型链上的属性;
// 遍历数组
var colors = ['red', 'green', 'blue'];
colors.length = 10;
colors.push('yellow');
Array.prototype.demo = function () {}; Object.keys(colors); // ["0", "1", "2", "10"] // 遍历对象
function Person(name, age) {
this.name = name;
this.age = age;
} Person.prototype.demo = function() {}; var jenemy = new Person('jenemy', 25); Object.keys(jenemy); // ["name", "age"]

五、总结

一、1、for in循环。遍历实例+原型中可枚举的属性
  2、for in不适合遍历数组
  7、for in遍历数组的下标类型不一样 :for in为String,for为Number
  8、对不存在项的处理:for in不存在的项不被枚举出来;for全部枚举出
  9、index in array特性可以判断某个索引是否存在对应元素
二、Object.keys(),遍历实例可枚举属性,返回属性名组成的数组。
三、for of输出数组中包括不存在的值在内的所有值

javascript中 for in 、for 、forEach 、for of 、Object.keys().的更多相关文章

  1. Javascript中的"函数是第一类对象(first-class object)"

    本身这句话很好解释,函数有两个主要特点,援引自 陈新 译的<JavaScript模式>: 1.函数是第一类对象: 函数可以在运行时动态创建,还可以在程序执行过程中创建. 函数可以分配变量, ...

  2. JavaScript indexOf() 方法,获取元素的位置;Object.keys()获取对象的所有key的数组

    定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) 参数 描述 sea ...

  3. JavaScript中的数组遍历forEach()与map()方法以及兼容写法

    原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...

  4. 在 JavaScript 中为什么 typeof null 的结果是 object?

    java 中的 null:既是对象,又不是对象,史称「薛定谔的对象」. typeof null==='object';  ..//true null instanceof Object  //fals ...

  5. javascript中的Function和Object

    写的很好,理解了很多,特此转发记录 转自:http://blog.csdn.net/tom_221x/archive/2010/02/22/5316675.aspx 在JavaScript中所有的对象 ...

  6. Javascript中的delete

    一.问题的提出 我们先来看看下面几段代码,要注意的是,以下代码不要在浏览器的开发者工具(如FireBug.Chrome Developer tool)中运行,原因后面会说明: 为什么我们可以删除对象的 ...

  7. Javascript中的delete介绍

    关于JavaScript中的Delete一直没有弄的很清楚,最近看到两篇这方面的文章,现对两文中部分内容进行翻译(内容有修改和添加,顺序不完全一致,有兴趣推荐看原文),希望能对大家有所帮助 一.问题的 ...

  8. 【学习笔记】:JavaScript中的BOM对象

    JavaScript中的BOM对象 BOM(Browser Object Model):浏览器对象模型. BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...

  9. JavaScript中一种全新的数据类型-symbol

    连续连载了几篇<ES6对xxx的扩展>,本节咱们换换口味,介绍一种全新的数据类型:Symbol,中文意思为:标志,记号.音标:[ˈsɪmbəl]. 数据类型 在介绍Symbol之前,我们简 ...

  10. JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

    JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach. 7.for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组 ...

随机推荐

  1. Mysql 索引详细解释

    MySQL索引详解(优缺点,何时需要/不需要创建索引,索引及sql语句的优化)  一.什么是索引? 索引是对数据库表中的一列或多列值进行排序的一种结构,使用索引可以快速访问数据库表中的特定信息. 二. ...

  2. final和static语句

    final关键字 final的概念 关键字final,final的意思为最终,不可变.final是个修饰符,它可以用来修饰类,类的成员,以及局部变量.不能修饰构造方法. final的特点 当final ...

  3. xcode7: Undefined symbols for architecture i386: "_iconv_open", referenced from:

    在整合cocos和quick时,出现这个错误,我按照以前的方法 link binary with libraries 中add libiconv.2.dylib ,发现已经没有了这个库. 网上找了一下 ...

  4. bash: ip: command not found

    Centos安装 # yum install iproute2 iproute2-doc Ubuntu安装 # apt-get install iproute2 iproute2-doc

  5. MVC WebApi Swagger帮助文档 接口用法

    1.WebApi在解决方案Apps.WebApi中 2.将Apps.WebApi设置为启动项目之后,可以直接浏览到Api的帮助文档,并直接进行调试 3.登录接口 4.登录获取的token来访问其他接口 ...

  6. js操作复选框 复选框

    //复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']&quo ...

  7. pyqt(day3)

    一.在pycharm中配置qtdesigner C:\Python\Python37\Lib\site-packages\pyqt5_tools\designer.exe 二.ui文件转换成pytho ...

  8. Http的状态码及状态码的类型

    Http的状态码以及根据这些状态码分成5种类型 statusCode/100 /* * Copyright 2002-2013 the original author or authors. * * ...

  9. 基于vue和echarts的数据可视化实现

    基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git

  10. Oracle 行转列 动态出转换的列

    本文链接:https://blog.csdn.net/Huay_Li/article/details/82924443 10月的第二天,前天写了个Oracle中行转列的pivot的基本使用方法,然后, ...