javascript中的for in循环和for in循环的使用陷阱
javascript中的for循环和for...in循环还是有些区别的,比如定义一个数组,然后用for..in循环输出
var array=[1,2,3,4,5,6];
for(var s in array)
{
console.log(s+' ');
}
输出的结果是0 1 2 3 4 5 竟然不是输出1-6。然后又定义了个比较有区分的(姑且这么叫吧)数组
var array=['jack','marry','jackson'];
for(var s in array)
{
console.log(s+' ');
}
输出0 1 2 这样看起来for..in输出的是数组的索引,而不是数组内容,以前在学习C#的时候for..in输出的是数组中的原始值,而不是索引 。
但是如果是定义一个对象,对象中有属性,并且给属性赋初始值,那么用for..in输出的是属性名,且看下面:
var obj = new Object();
obj.name = '大象';
obj.value1 = '12';
obj.value2 = '334';
for (var items in obj) {
console.log(items);
}
输出的是 name、 value1、 value2。这样看来在对象中属性就相当于对象中的索引。
看看下面的例子:
var array =["admin","manager","db"];
//给Array的原型添加一个name属性
Array.prototype.name= "zhangsan";
for(var i in array){
alert(array[i]);
}
运行结果:
admin
manager
db
zhangsan
奇观了,怎么平白无故的冒出来一个zhangsan
现在,再看看使用 for循环会怎样?
vararray = ["admin","manager","db"];
//给Array的原型添加一个name属性
Array.prototype.name = "zhangsan";
for(var i =0 ; i<array.length; i++){
alert(array[i]);
};
运行结果:
admin
manager
db
现在明白了,for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现意外的错误。为了避免这个问题,我们可以使用对象的hasOwnProperty()方法来避免这个问题,如果对象的属性或方法是非继承的,那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法,只会检查在特定对象自身中直接创建的属性。
再看看下面的例子:
vararray = ["admin","manager","db"];
Array.prototype.name= "zhangshan";
for(vari in array){
//如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示
if(!array.hasOwnProperty(i)){
continue;
}
alert(array[i]);
运行结果:
admin
manager
db
javascript中的for in循环和for in循环的使用陷阱的更多相关文章
- 浅谈JavaScript中的Function引用类型
引言 在JavaScript中最有意思的就是函数了,这一切的根源在于函数实际上是一个对象.每一个函数都是Function类型的实例,而且都和其他引用类型的实例一样具有属性和方法.函数作为一个对象,因此 ...
- JavaScript中让Html页面中循环播放文字
JavaScript中让Html页面中循环播放文字 <html> <head> <meta http-equiv="Content-Type" con ...
- 深入了解 JavaScript 中的 for 循环
在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...
- Javascript中的循环变量声明,到底应该放在哪儿?
相信很多Javascript开发者都在声明循环变量时犹豫过var i到底应该放在哪里:放在不同的位置会对程序的运行产生怎样的影响?哪一种方式符合Javascript的语言规范?哪一种方式和ecma标准 ...
- JavaScript中for..in循环陷阱介绍
for...in循环中的循环计数器是字符串,而不是数字它包含当前属性的名称或当前数组元素的索引,下面有个不错的示例大家可以参考下 大家都知道在JavaScript中提供了两种方式迭代对象: (1) ...
- javascript中for/in循环及使用技巧
JavaScript 支持不同类型的循环: for - 循环代码块一定的次数 for/in - 循环遍历对象的属性 while - 当指定的条件为 true 时循环指定的代码块 do/while - ...
- Javascript中while和do-while循环用法详解
while循环 while 语句与 if 语句相似,都有条件来控制语句(或语句块)的执行,其语言结构基本相同:while(conditions){ statements;} while 语句与 ...
- 深入了解JavaScript中的for循环
在ECMAScript5中,有三种for循环,分别是: 简单for循环 for-in forEach 在ES6中,新增了一种循环 for-of 简单for循环 const arr = [1, 2, 3 ...
- JavaScript中的for in循环
在学习AJAX的时候,发现JavaScript中for in循环,这种循环对于遍历JSON是很好用的.于是写下了这篇博文 作用 for in循环本质上是forEach循环,它主要有两个作用 遍历数组 ...
- 让你高效的理解JavaScript中的同步、异步和事件循环
"同步请求","异步请求"相信这两词在程序猿的世界中频频出现,到底是词性的妖娆,还是撸代码的基础要求,下面直接分享本人学习的好东西,保证让你深入浅出,爽得不要不 ...
随机推荐
- windows环境下pycharm如何设置Linux编码
最近写代码一直在windows环境下,写完之后再传到Linux端就会出现代码格式错乱. 解决办法: 在windows端的pycharm代码格式设置为unix and os及可以解决这个问题. 如果你要 ...
- Shell 实例:备份最后一天内所有修改过的文件
在一个"tarball"中(经过 tar 和 gzip 处理过的文件)备份最后 24 小时之内当前目录下所有修改的文件. 程序代码如下: #!/bin/bash BACKUPFIL ...
- [转]bootstrapValidator.js 做表单验证
本文转自:https://www.cnblogs.com/nele/p/5493414.html 作者:@nele本文为作者原创,转载请注明出处:https://www.cnblogs.com/nel ...
- C#基础 阶段总结
第一部分 了解C# C#是微软公司在2000年7月发布的一种全新且简单.安全.面向对象的程序设计语言,是专门为.NET的应用而开发的.体现了当今最新的程序设计技术的功能和精华..NET框架为C#提供了 ...
- Ubuntu(14.04LTS)学习札记
这篇博文是我在基于Ubuntu学习一些知识的札记,方便日后进行不断回顾,这里进行统一记录,当然当学到新的东西也会陆续更新!!!还请各位博主不要见笑,小弟在此谢过~\(≧▽≦)/~啦啦啦!!!! 1.U ...
- DOM.getBoundingClientRect()
- Apache SkyWalking的架构设计【译文】
Apache SkyWalking提供了一个功能强大并且很轻量级的后端.在此,将介绍为什么采用以下方式来设计它,以及它又是如何工作的. 架构图 对于APM而言,agent或SDKs仅是如何使用libs ...
- linux学习笔记-lrmi源码包的编译安装方法
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 官方的lrmi包没有人更新了,如果碰到需要这个编译安装这个包,可以参考我的解决思路,如下: https://pkgs.org/这 ...
- 微信小程序request同步请求
今天在搞微信小程序的时候顺手用了async,await死活不起作用,后来查了一下子,竟然不支持,那没办法就换了一种实现wx.request同步请求的方案 祭出promise来搞一搞,下面直接贴代码,简 ...
- 记一次wepy里面的渲染问题(this.$apply()的使用)
今天在用wepy搞小程序的时候遇到了一个小坑,卡了我好一会,因为之前在做React,所以对wepy的了解不是特别深入,所以导致了这个问题的发生 先贴上来关键代码让大家看一看(备注之处是问题解决的方法) ...