js中的each(jquery)和forEach(ES6)

用ES5中的遍历方法来遍历一个数组

Document - 锐客网 > // JS提供的原生遍历方法 ; ['abc','e','fgh'].forEach(function(item,index){ console.log(item) })

js中的each(jquery)和forEach(ES6)
文章图片

遍历成功,但是这个ES5的语法在IE中9-12版本都可以,但是IE8不支持,然后我们使用Jquery
="node_modules/jquery/dist/jquery.js"> > $.each(['abc','e','fgh'],function(index,item){ console.log(item) }) // JS提供的原生遍历方法 // ; ['abc','e','fgh'].forEach(function(item,index){ //console.log(item) // })

npm i jquery
后来发现还是不行,因为下载的jquery版本太高了,IE中还是无法显示。
js中的each(jquery)和forEach(ES6)
文章图片

要找个低版本的jquery,npm i jquery@1.11.0,引入路径没变
js中的each(jquery)和forEach(ES6)
文章图片

成功。如果需要兼容IE8的话,ES5中的一些语法是不能用的。需要用低版本的jquery库,原因是:
举个例子,写5个div

Open in chrome看看
js中的each(jquery)和forEach(ES6)
文章图片

jquery选择到的是个伪数组,这个时候想遍历他,,伪数组是对象,对象的原型链中没有forEach,对象的原型链是Object.prototype.
forEach方法是数组原型对象的方法,Array.prototype,可以查看一下
js中的each(jquery)和forEach(ES6)
文章图片

用ES5/6的语法遍历div会报错
js中的each(jquery)和forEach(ES6)
文章图片

所有用jquery的each()方法来遍历
$('div').each(function(index,item){ console.log(item) })

这个each是jquery提供的,这个each在jquery的原型链当中,看一下jquery的原型链
js中的each(jquery)和forEach(ES6)
文章图片

成功遍历
js中的each(jquery)和forEach(ES6)
文章图片

这样用不是说jquery专门用来遍历jquery元素的
1.方便的遍历Jquery元素,因为被jquery选择器选择上的是伪数组
2.可以在不兼容forEach的低版本浏览器中使用Jquery的each方法
也可以把伪数组转成真.数组
; [].slice.call($('div'))

js中的each(jquery)和forEach(ES6)
文章图片

原型就变成了数组了。这时候就可以用forEach了
="node_modules/jquery/dist/jquery.js"> > //$.each(['abc','e','fgh'],function(index,item){ //console.log(item) // }) // JS提供的原生遍历方法 // ; ['abc','e','fgh'].forEach(function(item,index){ //console.log(item) // }) console.log($('div')) array1 = [].slice.call($('div')) console.log(array1) //这个each是jquery提供的,这个each在jquery的原型链当中 // $('div').each(function(index,item){ //console.log(item) // })

【js中的each(jquery)和forEach(ES6)】就当了解一下jquery选择器选择的元素的原型和ECS6中的对象原型跟数组原型。。对JS整体学习是有帮助哒嘻嘻

    推荐阅读