美文网首页
VS常用四种遍历数组的方法

VS常用四种遍历数组的方法

作者: Qingelin | 来源:发表于2020-06-15 18:47 被阅读0次

    目录


    在js中我们有很多种方法来遍历数组和对象,它们之间的区别常常让人疑惑,本文中我将详细介绍以上四种方法的区别:
    常用形式:
    for(let i = 0;i < arr.length;i++){}
    for(let i in obj){}
    for(const v of obj){}
    arr.forEach((i,v) => {/语句/})

    1. 遍历数字属性语法:

    1.1 for

     var arr = ["1","2","3","4"]
     for(var i = 0 ;i < arr.length;i++){
          console.log(arr[i])
    }
    

    1.2 for... in

    var arr = ["1","2","3","4"]
    for(let i in arr){
        console.log(arr[i])
    }
    

    1.3 for... of

    var arr = ["1","2","3","4"]
    for(var v of arr){
        console.log(v)
    }
    

    1.4 forEach()

    var arr = ["1","2","3","4"]
    arr.forEach((v,i)=>{console.log(v)})
    

    2. 遍历非数字属性:

    2.1 for... in

    var arr = ["a","b","c","d"]
    arr .test = "hahaha"
    for(let i in arr){
        console.log(arr[i])
    }  //a,b,c,d,hahaha
    

    2.2 其他三种语法;

    其他三种语法都会忽略test非数字属性,只有for ... in 会遍历。

    3. holes;

    holes —— 如果遍历一个有空元素的数组["a"," ","c"]时,for ... in 和 forEach()都会跳过空位,即叫做 holes;
    js 数组中是可以有空元素的,且其空元素也会被算到length中

    var array = ["a"," ","c"];
    array.length;//3
    

    需要注意的是四种for循环模式处理 ["a"," ","c"]和 ["a",undefined,"c"] 的方式不尽相同。

    3.1

    对于有holes的 ["a"," ","c"] 来说,for ... in 和 forEach() 会跳过,而 for 和 for ... of 不会忽略,

    3.2

    对于 没有 空元素的 ["a",undefined,"c"]来说,四种遍历方式都一样。

    4. 数组的 this :

    for /for ... in /for ... of 时函数外部作用域的this会保留,而使用forEach()时,除非使用箭头函数,否则会改变this。

    "use strict";
     const arr = ["a","b"]
     arr.forEach(function(){
          console.log(this)   //undefined
     })
    arr.forEach(()=>{
        console.log(this) //window
    })
    

    总结;

    • for 和 for ... in 访问数组的下标,for ... of 和 forEach()直接访问数组的属性值。

    • 建议使用for ... of 方法,它比for 简单,比for ... in 和 forEach()没有那么多奇怪现象。

    • for ... of 的缺点是读取数组的索引值不方便,而且不能链式调用,使用for ... of 的方法

         for(const [v,i] of arr.entries()){
             console.log(i,v)
         }
      

    相关文章

      网友评论

          本文标题:VS常用四种遍历数组的方法

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