在JavaScript中,我们经常用到for-in,它虽然在有些时候功能与for一样,但它的性能却比for差太多啦。下面先来了解一下for-in。
for...in 语句用于对数组或者对象的属性进行循环操作,循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作,因此大多数的时候for-in用来遍历对象,遍历数组建议用for循环。
语法:
for(变量 in 对象) {
在此执行代码 } “变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。for...in的key是String类型,而非数字,它包含当前属性的名称或当前数组元素的索引。
注:in是JavaScript中的一个操作符,用来判断某个属性是否属于某个对象,判断的属性可以是对象自身的属性,也可以使通过prototype继承的属性。
语法示例:
用for-in遍历数组
var x;
var words = [1,2,3];
for (x in words)
{
document.write(words[x] + "<br />");
}
用for-in遍历对象
var arr={
name: "Searchin",
age:18,
address:"beijing"
};
for(var i in arr){
console.log(i); //若想输出属性值,则console.log(arr[i])
}
运行上面的代码将在控制台输出person的所有属性的值,即输出name、age、address。
但是,通过上文我们可以得知:for-in会遍历对象的属性,包括它自身的属性以及从prototype那继承来的属性。而正是因为for-in的这个特性,给很多初学者带来了麻烦。下面我们来看一段代码。
var arr={
name: "Searchin",
age:18,
address:"beijing"
};
Array.prototype.number="2018";//为arr原型添加一个number属性
for(var i in arr){
console.log(i); //若想输出属性值,则console.log(arr[i])
}
控制台输出:name ,age,address,number。
为什么控制台将number也输出了呢?
因为number属性是arr原型新添加的属性,而for-in会将该对象的属性全部遍历,其中就包括从原型继承的属性,因此arr继承了number属性,所以也输出了number属性的值。很多初学者常常忽略这个问题,这也导致许多bug的出现。
那么该如何避免这种问题呢?这时候hasOwnProperty()方法就派上用场了。
hasOwnProperty函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false
该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。
下面展示一下hasOwnProperty()方法的用法。
var arr={
name: "Searchin",
age:18,
address:"beijing"
};
Array.prototype.number="2018";//为arr原型添加一个number属性
for(var i in arr){
if(!arr.hasOwnProperty(i))
continue;
console.log(i); //若想输出属性值,则console.log(arr[i])
}
这时,for-in遍历的只有arr数组自身的属性,控制台输出name,age,address。