javascript中的for in循环和for循环的使用

JavaScript for…in 语句

for…in 语句用于对数组或者对象的属性进行循环操作。

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

Tip:for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

语法:

for ( in )
{
    
}

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

实例:使用 for … in 循环遍历数组。

<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>

应用可见这里:https://qdkfweb.cn/js-max-repeat.html

注意一:for in循环不会按照属性的下标来排列输出。http://www.cnblogs.com/rubylouvre/p/3396042.html

"first":"first",
   "zoo":"zoo",
  "2":"2",
  "34":"34",
  "1":"1",
  "second":"second"
};
for (var i in obj) { console.log(i); };

1
2
34
first
zoo
second

执行时按chrome执行,先把当中的非负整数键提出来,排序好输出,然后将剩下的定义时的顺序输出。由于这个奇葩的设定,让avalon的ms-with对象排序不按预期输出了。只能强制用户不要以纯数字定义键名。

实例1:在数组的原型对象上定义了一个新的属性,使用for循环没出现问题

function getNewArray(){
var array=[1,2,3,4,5];
Array.prototype.age=13;
var result = [];
for(var i=0;i<array.length;i++){
result.push(array[i]);
}
alert(result.join(''));
}

实例2:采用了for in循环,但是给我们期望的一样还是得到了12345的正确结果

function getArrayTwo(){
var array=[1,2,3,4,5 ];
var result=[];
for(var i in array){
result.push(array[i]);
}
alert(result.join(''));
}

实例3:给原型添加属性之后,默认情况下枚举,最后输出1234513

function getNewArrayTwo(){
var array=[1,2,3,4,5 ];
Array.prototype.age=13;
var result=[];
for(var i in array){
result.push(array[i]);
}
alert(result.join(''));
}

所以建议不要对数组执行for in循环,事实上,在高性能javascript这本书中,也强调了for in循环的不好,因为它总是会访问该对象的原型,看下原型上是否有属性,这在无意中就给遍历增加了额外的压力。

解决方法:

如果某个对象具有给定名称的属性,那么Object.prototype.hasOwnProperty(name)返回true。如果该对象是从原型链中继承了该属性,或者根本没有这样的一个属性,则返回false。通过hasOwnProperty限定for in循环在当前中遍历,而不用去考虑它的原型属性。

function finalArray(){
var array=[1,2,3,4,5 ];
Array.prototype.age=13;
var result=[];
for(var i in array){
if(array.hasOwnProperty(i)){
result.push(array[i]);
}
}
alert(result.join(''));
}

注意事项:

1.有一部分浏览器,例如早期的safari浏览器,不支持这个方法

2.对象经常被用作哈希值,这就是存在hasOwnProperty被另外的属性屏蔽的风险(但是我估计没有人那么无聊使用这个属性)


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流