js之for...in...和for...of...终结pk

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」

前言

作为一只菜鸟，总是在工作中分不清楚该用for...in...还是for...of...，总是感觉用哪个都行，今天就来做个了断，搞个明白。

for...in ...与for...of...

老生常谈的问题，for...in...和for...of...到底有何种关系呢？

for...in...

首先来看for...in...,它从表面上来看好像即可以遍历数组又可以遍历对象，下面看例子

    arr = ['a','b','c']
    for(item in arr){
        console.log(item)
    }
    //输出结果是0 1 2
    
    obj ={a:1,b:2,C:3}
    for(item in obj){
        console.log(item)
    }
    //打印的结果是a b c

上面是用for...in...来遍历数组和对象的代码，看起来好像都没什么问题，只是一个遍历出来的是下标，一个遍历出来的是键，但其实遍历数组的时候是有问题，看下面的代码

     arr = ['a','b','c']
     arr.__proto__.d=10
    for(item in arr){
        console.log(item)
    }
    //此时的打印结果是0 1 2 d

从以上代码可以发现for...in...遍历数组的时候会把原型链上的键也给遍历出来

for...of...

我们先试着用for...of...来遍历数组和对象，下面看例子

     arr = ['a','b','c']
    for(item of arr){
        console.log(item)
    }
    //打印的结果为 a b c
    
    obj ={a:1,b:2,C:3}
    for(item of obj){
        console.log(item)
    }
    //这里会报错，如下图

这里提示obj是不可迭代的，也就是说for...of...只能遍历可迭代的对象，所以综上所述，只要记住for...in...遍历对象（拿到键名），for...of...遍历数组（拿到每个下标对应的值），你要是头铁非要使用for...in...来遍历数组的话课可以使用Object.OwnProperty()来过滤掉原型链上的属性名

私有变量、私有函数

何为私有变量和私有函数，在一个函数内部定义的变量或函数如果没有对外提供访问的接口，那么对象本身和它的实例都不可以访问到这个变量和函数，这个变量和函数就叫私有变量和私有函数，如下

    function test(){
        var x=0 //这就是私有变量
        var a = function(){} //这就是私有函数
    }
    console.log(test.x) //undefined
    console.log(test.a())//typeError
    
    var fo = new test()
    console.log(fo.x)//同上
    console.lot(fo.a())//同上

静态变量、静态函数

静态变量、静态函数是指函数通过'.'运算符来添加的属性和函数，这样的变量和函数可以通过本身来访问到，但是不能通过实例化对象来访问到，如下

    function le(){}
    le.a=1 //静态变量
    le.b=function(){}//静态函数
    console.log(le.a)//1
    console.log(le.b)//f(){}
    var fo = new le()
    console.log(le.a)//访问不到
    console.log(le.b)//访问不到

实例化变量、实例化函数

顾名思义，实例对象可以调用的变量和函数，如下

     function test(){
        this.x=0 //这就是实例化变量
        this.a = function(){} //这就是实例化函数
    }
    var fo = new test()
    console.log(fo.x)//0
    console.log(fo.a)//f(){}