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

77 阅读 0 评论 51 点赞

我是靠谱客的博主专一项链，最近开发中收集的这篇文章主要介绍js中的each（jquery)和forEach(ES6)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// JS提供的原生遍历方法
;['abc','e','fgh'].forEach(function(item,index){
console.log(item)
})
</script>
</body>
</html>

在这里插入图片描述
遍历成功，但是这个ES5的语法在IE中9-12版本都可以，但是IE8不支持，然后我们使用Jquery

<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
$.each(['abc','e','fgh'],function(index,item){
console.log(item)
})
// JS提供的原生遍历方法
// ;['abc','e','fgh'].forEach(function(item,index){
//
console.log(item)
// })
</script>

npm i jquery
后来发现还是不行，因为下载的jquery版本太高了，IE中还是无法显示。

在这里插入图片描述
要找个低版本的jquery，npm i jquery@1.11.0，引入路径没变

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

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Open in chrome看看
在这里插入图片描述
jquery选择到的是个伪数组,这个时候想遍历他，，伪数组是对象，对象的原型链中没有forEach，对象的原型链是Object.prototype.
forEach方法是数组原型对象的方法，Array.prototype,可以查看一下
数组的原型对象
用ES5/6的语法遍历div会报错
在这里插入图片描述
所有用jquery的each()方法来遍历

$('div').each(function(index,item){
console.log(item)
})

这个each是jquery提供的,这个each在jquery的原型链当中,看一下jquery的原型链
在这里插入图片描述
成功遍历

这样用不是说jquery专门用来遍历jquery元素的
1.方便的遍历Jquery元素，因为被jquery选择器选择上的是伪数组
2.可以在不兼容forEach的低版本浏览器中使用Jquery的each方法

也可以把伪数组转成真.数组

;[].slice.call($('div'))

在这里插入图片描述
原型就变成了数组了。这时候就可以用forEach了

<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
//
$.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)
// })