美文网首页
js 中的 forEach 和 jQuery 中的 each

js 中的 forEach 和 jQuery 中的 each

作者: 璎珞纨澜 | 来源:发表于2019-03-17 11:37 被阅读0次

js 中的 forEach 方法:

  • 用法:数组.forEach(function)
  • EcmaScript 5 中的一个数组遍历函数,是JavaScript原生支持的遍历方法,存在于数组的原型对象Array.prototype中。
  • 由于forEach是EcmaScript 5 中的,所以低版本浏览器不支持该方法
    • 不兼容 IE8


      数组的原型对象

jQuery 中的 each 方法

  • 用法:
    $.each(数组,function)
    $('div').each(function)
  • jQuery提供的遍历方法,用于遍历jQuery选择器选择到的伪数组实例对象,存在于jQuery的原型对象 Array.prototype 中。
  • 为什么$('div')没有forEach方法?
    jQuery 选择到的$('div')是伪数组,伪数组是对象,对象的原型链是Object.prototype,其中没有 forEach 方法。
    ==> jQuery 实例对象不能使用 forEach 方法,如果想要使用必须转为数组才可以使用:[].slice.call (jQuery实例对象)
    • slice方法将jQuery实例对象截取返回一个数组,由于没有传参,所以全部截取。slice方法内部就是使用this.length进行for循环遍历这个对象并返回一个数组。
//Slice方法内部实现
Array.prototype.myslice = function () {
  var start = 0
  var end = this.length
  if (arguments.length === 1) {
    start = arguments[0]
  } else if (arguments.length === 2) {
    start = arguments[0]
    end = arguments[1]
  }
  var tmp = []
  for (var i = start; i < end; i++) {
    tmp.push(this)
  }
  return tmp
}
  • jQuery 高版本的each方法不支持在低版本浏览器使用,低版本的可以支持。
    • jQuery 2 以下的版本是兼容 IE8 的
    • jQuery 2 以下的版本的 each 方法可以作为低版本浏览器中 forEach 的
      替代品
//js中的forEach
;['a', 'b', 'c'].forEach(function(item, index) {
    console.log(item)
})
//jquery中的each
$.each(['a', 'b', 'c'],function(item, index) {
    console.log(item)
})

相关文章

网友评论

      本文标题:js 中的 forEach 和 jQuery 中的 each

      本文链接:https://www.haomeiwen.com/subject/zsmymqtx.html