JS中的forEach,for in,for of和for的遍历优缺点及区别

forEach:(可以三个参数,第一个是value,第二个是index,第三个是数组体)

缺点:不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据,

方法不能使用break,continue语句跳出循环,或者使用return从函数体返回,对于空数组不会执行回调函数

              优点:便利的时候更加简洁,效率和for循环相同,不用关心集合下标的问题,减少了出错的效率

              定义:用于调用数组的每个元素,并将元素传递给回调函数

              实例:

//我们先用它来遍历数组
  let arry=[9,8,7,6,5,4]
  array.forEach(function(value,index,arr){
      console.log(value)
  })
//输出结果为9 8 7 6 5 4

//首先有人疑问它能不能用来遍历对象(一开始我也不知道)?
//我们用它来遍历对象试试可不可以
   let obj={a:1,b:2,c:3,d:4}
   obj.forEach(function(value,index,oObj){
       console.log(value)
   }
//输出结果会是obj.forEach is not a function,
//所以forEach不可以遍历对象,这也是它和for in的一个区别

for in:(它大部分用于遍历对象)

定义:用于循环遍历数组或对象属性,fot in循环里面的index是string类型的,

                 代码每执行一次,就会对数组的元素或者对象的属性进行一次操作

缺点:某些情况下,会出现随机顺序的遍历,因为里面的值是string类型,所以
                增加了转换过程,因此开销较大

优点:可以遍历数组的键名,遍历对象简洁方便

实例:

//首先遍历对象
   let person={name:"老王",age:23,city:"大唐"}
   let text=""
   for (let i in person){
      text+=person[i]
   }
   输出结果为:老王23大唐

//其次在尝试一些数组
   let arry=[1,2,3,4,5]
   for (let i in arry){
        console.log(arry[i])
    }
//能输出出来,证明也是可以的

for of:(可遍历map,object,array,set string等)用来遍历数据,比如组中的值,

map,set会在下篇文章详解,这节只查看遍历对象和数组

优点:避免了for in的所有缺点,可以使用break,continue和return,不仅支持

                 数组的遍历,还可以遍历类似数组的对象,支持字符串的遍历
                最简洁,最直接的遍历数组的语法
                支持map和Set对象遍历

      缺点:不适用于处理原有的原生对象(原生对象是一个子集,包含一些在运动过程中动态创建的对象)

      实例:

//遍历数组
   let arr=["nick","freddy","mike","james"];
    for (let item of arr){
        console.log(item)
    }
//暑促结果为nice freddy mike james

//遍历对象
   let person={name:"老王",age:23,city:"唐山"}
   for (let item of person){
        console.log(item)
    }
//我们发现它是不可以的
//但是它和forEach有个解决方法,结尾介绍

for:

优点:程序简洁,结构清晰,循环初始化,循环变量化,循环体和循环条件位置突出

缺点:结构比while循环复杂,容易出编码错误

实例:

//首先它和forEach,forof一样不可以遍历对象
//解决办法:就是把对象先转化为数组类型- -
//有一个对象:
     let obj={a:1,b:2,c:3}
//用Object.keys属性转化
     let obj2=Object.keys(obj)
//最后就可以用来遍历了
   for (let i=0;i<obj2.length;i++){
     console.log(obj2[i])
   }
//输出结果就能出来了,forEach,for of同理

原文地址:https://www.cnblogs.com/larrywang/p/10325988.html

时间: 2024-10-07 22:36:58

JS中的forEach,for in,for of和for的遍历优缺点及区别的相关文章

js中的forEach

chrome和firefox支持数组的forEach,但不支持对象的forEach,IE啥都不支持 jquery中的$.each(ArrayOrObject,function(){})既可以遍历数组又可以遍历对象 $(selector).each(function(){}) 如果each的回调函数function()没有参数,还可以使用$(this)来访问,这样也可以对$(this)的键值对进行更改 each的回调函数还可以有参数(key,value),来访问键值对

js中map,forEach,filter,reduce等方法是ECMAScript5 Array新增方法

数组在各个编程语言中的重要性不言而喻,但是在之前的JavaScript中数组(JavaScript 数组详解)虽然功能已经很强大,但操作方法并不完善,在ECMAScript5中做了适当的补充. Array.isArray(element) 这是Array对象的一个静态函数,用来判断一个对象是不是数组 var a = new Array(123); var b = new Date(); console.log(Array.isArray(a)); //true console.log(Array

JS中的forEach、$.each、map方法

forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 1 var array = [1, 2, 3, 4]; 2 for (var k = 0, length = array.length; k < length; k++) { 3 alert(array[k]); 4 } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的f

关于js 中的 foreach map

  forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 ? 1 2 3 4 var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) {  alert(array[k]); } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach

js中的forEach和map的区别

我们先来看两者之间的相同之处 var arr = ['a','b','c','d']; arr.forEach(function(item,index,arr){ //item表示数组中的每一项,index标识当前项的下标,arr表示当前数组 console.log(item); console.log(index); console.log(arr); console.log(this); },123); //这里的123参数,表示函数中的this指向,可写可不写,如果不写,则this指向wi

js中使用forEach遍历List

<script>            var nameList=new Array();        var areaIdList=new Array();                <c:forEach items="${area}" var="area" varStatus="status">        nameList[${status.index}]="${area.areaName}&quo

JS 中的foreach和For in比较

使用方式举例如下: <script type="text/javascript"> var jsonranklist=[{"name":"ts","code":123456,"topscore":2000},{"xlid":"tb","code":123456,"topscore":1500}]; console.l

js中的 window.location、document.location、document.URL 对像的区别(转载)

原文:http://www.cr173.com/html/18417_1.html 当我们需要对html网页进行转向的时候或是读取当前网页的时候可以用到下面三个对像: window.location.document.location.document.URL 对当前网页进行跳转 我们先来看看 document 与 window对象: [window 对象]  它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,

JS中的块级作用域,var、let、const三者的区别

1. 块作用域{ } <script type="text/javascript"> { var a = 1; console.log(a); // 1 } console.log(a); // 1 // 可见,通过var定义的变量可以跨块作用域访问到. (function A() { var b = 2; console.log(b); // 2 })(); // console.log(b); // 报错, // 可见,通过var定义的变量不能跨函数作用域访问到 if(