for-in、forEach、each的区别

  ·   JavaScript   ·   jQuery     浏览量:

for-in

  • 语句用于对数组或者对象的属性进行循环操(但一般并不推荐用来循环数组)
var testArr = [1, 2, 3, 4, 5, 6];
var testObj = {
    name: '尼古拉斯·赵四',
    age : '18',
    home: '中国'
}
var testEle = $('menu-item');

for (item in testArr) {
    console.log(item);
    //打印索引 0,1,2,3,4,5
}

for (item in testObj){
    console.log(item);
    //打印属性名:name,age,home
}

forEach

  • 用来循环数组,不能中断循环(使用break语句或使用return语句)
  • 语法:array.forEach(function(currentValue, index, arr), thisValue)
  • 参数:
    1.currentValue:当前值,必选
    2.index:可选。当前元素的索引值。
    3.arr:可选。当前元素所属的数组对象。
    4.thisValue:可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
var testArr = [1, 2, 3, 4, 5, 6];
testArr.forEach(function(val, index, arr){
    console.log('val: ' +val+ ' index:' +index+ ' arr: ' +arr)
})
// 打印结果
val: 1 index:0 arr: 1,2,3,4,5,6
val: 2 index:1 arr: 1,2,3,4,5,6
val: 3 index:2 arr: 1,2,3,4,5,6
val: 4 index:3 arr: 1,2,3,4,5,6
val: 5 index:4 arr: 1,2,3,4,5,6
val: 6 index:5 arr: 1,2,3,4,5,6

each

jQuery中的用法,用来循环通过jQuery获取的html元素

<ul class="menu">
    <li class="menu-item">菜单一</li>
    <li class="menu-item">菜单二</li>
    <li class="menu-item">菜单三</li>
</ul>
var testEle = $('.menu-item');
testEle.each(function(){
    console.log($(this).text())
})
//打印 菜单一 菜单二 菜单三


收起 >>
for-in、forEach、each的区别