一 、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. 51nod1681 公共祖先

    [传送门] 很明显,可以转化成求每个点在两棵树中对应的子树中有多少个相同的节点,对答案的贡献就是$C(x, 2)$.关键就是怎么求这个东西.一是,对第一棵树求出dfs序,然后dfs第二棵树,用树状数组 ...

  2. scala 学习笔记--闭了个包

    object Test01 { def main(args: Array[String]): Unit = { //普通函数 val squ=(x:Int) => x*x // ps:_的简写形 ...

  3. JS继承2

    一.原型链继承 关键步骤: 让子类的原型对象成为父类的实例 矫正子类构造器属性 function Animal(name,age){ this.name = name; this.age = age; ...

  4. 自建 ca 及使用 ca 颁发证书

    创建CA: 一.安装openssl [root@localhost ~]# yum install -y openssl 二.创建CA的相关文件及目录 mkdir /opt/root_ca & ...

  5. ansible-playbook-批量修改主机名

    修改cat /etc/ansible/hosts [test]10.27.235.108 host_name=test_host_name - hosts: test user: root gathe ...

  6. FZU Monthly-201906 tutorial

    FZU Monthly-201906 tutorial 题目(难度递增) easy easy-medium medium medium-hard hard 思维难度 AE B DG CF H A. X ...

  7. JavaScript初探系列(八)——DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.删除和修改页面的某一部分. HTML DOM 树形结构如下: 一.Node方面 (一).节点类 ...

  8. noscript 标签介绍

    noscript 标签介绍 一.总结 一句话总结: noscript 标签在不支持JavaScript 的浏览器中显示替代的内容. 1.noscript标签使用实例? html标签直接放在noscri ...

  9. 修改Jupyter Notebook默认文件存储路径(已安装Anaconda)

    https://blog.csdn.net/weixin_44799144/article/details/91823079 修改Jupyter Notebook默认文件存储路径首先,安装好Anaco ...

  10. gcc 编译两个so其中soA依赖soB

    有两个so,其中soB中调用soA: 那么我们打包soB的时候连接soA: 在打包test程序的时候连接soB,此时soB会自动查找依赖的soA: 如下测试 在编译之前指定环境变量:export LD ...