for -in和for of(详细)

·  阅读 482

for-in 和 for-of 的用法和区别

通常我们遍历数组和对象时,都会选择for-in或者for-of去遍历,那么for-infor-of的区别在哪呢?

我们先来看看for-in:

数组:
let arr=['a','b','c','d']
for(let i in arr){
console.log(i)
}
复制代码

image.png

我们遍历的i输出来的不是我们的value值,而是数组的下标。

对象:
const obj={
    a:1,
    b:2,
    c:3
}
for(let i in obj){
    console.log(i)
}
复制代码

image.png

由此可以看出for-in可以遍历数组和对象,但是遍历数组会有弊端,也就是循环的出来的i值不能直接用于计算,因为这个i值(下标是个字符串)

image.png

还是对象:
const obj={
    a:1,
    b:2,
    c:3
}
Object.prototype.name='我是原型上的name'
Object.prototype.get=function(){
    console.log('这是对象原型上的方法')
}
for(let i in obj){
    console.log(obj[i])
}
复制代码

image.png 从上图我们可以得出:for-in遍历不仅可以遍历到被遍历对象本身的东西,还可以遍历到原型上的属性和方法!

那么如何避免使用for-in的时候遍历到原型上我们不需要的方法和属性值呢?就要用上原型上提供的一hasOwnProperty()方法。

const obj={
    a:1,
    b:2,
    c:3
}
Object.prototype.name='我是原型上的name'
Object.prototype.get=function(){
    console.log('这是对象原型上的方法')
}
for(let i in obj){
    if(obj.hasOwnProperty(i)){
    console.log(obj[i])
    }
}
复制代码

image.png

hasOwnProperty()方法指示对象自身属性中是否具有指定的属性 (for-in讲完了)

下面我们来看看for-of

先看看遍历对象:
const obj={
    a:1,
    b:2,
    c:3
}
Object.prototype.name='我是原型上的name'
Object.prototype.get=function(){
    console.log('这是对象原型上的方法')
}
for(let i of obj){
    console.log(i)
    console.log(obj[i])
}
复制代码

image.png

大家猜猜会输出什么?其实什么都输出不了,这是个错误代码,因为for-of不能遍历对象,for-of其实也是可以遍历对象,但要用上内建方法Object.keys()方法,for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象(iterator)的集合,但是不能遍历对象,因为没有迭代器对象,但如果想遍历对象的属性,你可以用for in循环 for-of使用Object.keys()遍历对象(建议使用for-in遍历对象)

image.png

遍历数组就不提了!!

总结一下啊:for-in

  1. 循环遍历的都是数据结构的键值名
  2. =返回的都是数组下标或者对象的健名
  3. 不仅可以遍历到数字键名,还可以遍历到原型上的属性和自己添加的属性
  4. 特殊情况下,遍历的数组不会按照对象的顺须进行

for-of

  1. 不能遍历对象
  2. 返回的是数组的元素
分类:
前端
分类:
前端