JavaScript——for-in的使用以及注意事项

在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。

JavaScript——for-in的使用以及注意事项

语法：

猜你喜欢