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>

js中的each(jquery)和forEach(ES6)_第1张图片
遍历成功,但是这个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中还是无法显示。

js中的each(jquery)和forEach(ES6)_第2张图片
要找个低版本的jquery,npm i [email protected],引入路径没变
js中的each(jquery)和forEach(ES6)_第3张图片
成功。如果需要兼容IE8的话,ES5中的一些语法是不能用的。需要用低版本的jquery库,原因是:
举个例子,写5个div

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

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

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

这个each是jquery提供的,这个each在jquery的原型链当中,看一下jquery的原型链
js中的each(jquery)和forEach(ES6)_第6张图片
成功遍历
js中的each(jquery)和forEach(ES6)_第7张图片
这样用不是说jquery专门用来遍历jquery元素的
1.方便的遍历Jquery元素,因为被jquery选择器选择上的是伪数组
2.可以在不兼容forEach的低版本浏览器中使用Jquery的each方法

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

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

js中的each(jquery)和forEach(ES6)_第8张图片
原型就变成了数组了。这时候就可以用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)
    // })

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

你可能感兴趣的:(大JS)