遍历、筛选for in / forEach()

for ( attribute in Object ) {}

1. for…in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

for (属性 in 对象)
{
    在此执行代码
}

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

你可以使用for-in循环数组(因为JavaScript中数组也是对象),但是不推荐。在for-in中,属性列表的顺序(序列)是不能保证的。所以最好数组使用正常的for循环,对象使用for-in循环。

有个很重要的hasOwnProperty()方法,当遍历对象属性的时候可以过滤掉从原型链上下来的属性。

            function Obj( name, age, sex ) {
                this.name = name
                this.age = age
                this.sex = sex
            }
            Obj.prototype.show = function() {}            
            var obj = new Obj( "liu", 33, "man" )

为了避免枚举obj的时候出现show()方法,你需要应用hasOwnProperty()方法过滤原型属性。如果不做过滤,会导致show()函数显示出来。

// 无hasOwnProperty()


                for ( var i in obj ) {
                        console.log( i )
                }
                // 结果:name age sex show


                for ( var i in obj ) {
                        console.log( obj[ i ] )
                }
                // 结果:liu 33 man  function Obj.prototype.show()


// 有hasOwnProperty()


                for ( var i in obj ) {
                    if ( obj.hasOwnProperty( i ) ) { 
                        console.log( i );  
                     }
                }
                // 结果:name age sex



                for ( var i in obj ) {
                    if ( obj.hasOwnProperty( i ) ) { 
                        console.log( obj [ i ] );    
                    }
                }
                // 结果:liu 33 man

另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。

        var hasOwn = Object.prototype.hasOwnProperty
                for ( var i in obj ) {
                    if ( hasOwn.call( obj, i ) ) { 
                        console.log( i, ":", obj[ i ] );
                    }
                }

优点:对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。

forEach( callback[,thisArg )

forEach( function( currentValue, index, array ) {},thisArg )

//currentValue: 当前索引的值。   index:索引值。   array:数组本身。
        var arr = [ 2, 4, 2, 6, 5 ]
        arr.forEach( function( cV, index, array ) {
            console.log( cV ) // 2 4 2 6 5
            console.log( 1 )  //0 1 2 3 4          
            console.log( arr )  // 五个:Array [ 2, 4, 2, 6, 5 ]
        } )

参照:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

小结:
(1) 遍历数组,建议使用原生的遍历方法for或forEach(存在兼容性问题),因为for in 和for each in均存在浏览器的兼容问题。

(2)遍历对象,建议使用for in,for in比for each 更具优势。

jQuery 中的eq()

获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个,具体可以看以下示例。

<script src="js/jquery.js">script>

        <p>11111111p>
        <p>22222222p>
        <p>33333333p>
        <p>44444444p>

        $( function() {
            $( "p" ).eq( -1 ).css( "color", "red" )
        } )

// 效果:值为4的变红。  

jQuery.each(object, [callback])

通用例遍方法,可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

$().each()用法与此相同;回调两个参数一样。

操作对象:

        var obj = {
            name: "liu",
            age: 33,
            sex: "man"
        }

        jQuery.each( obj, function( i, v ) {
            console.log( i )
            console.log( v )
        } )

操作数组:

    var arr = [ 1, 3, 5, 6, 7 ]

        jQuery.each( arr, function( i, v ) {
            console.log( i )
            console.log( v )
        } )

你可能感兴趣的:(javascript,jquery,HTML)