陣列遍歷

隨便啦_發表於2019-02-28
陣列
var arr = [1, 2, 3, 4, 5, 6]
    // 獲取陣列中某一項 陣列[索引]
    // arr[0]
    // arr[1]
    // arr[2]
    // arr[3]
複製程式碼

迴圈遍歷

  • for迴圈 依次迴圈出 陣列中的每一項
    for (var i = 0; i < arr.length; i++) {
       console.log(i, arr[i])
    }

    var likeAry = {
    0: 'a',
    1: 'b',
    2: 'c',
    3: 'd',
    length: 4
    }   

    for (var j = 0; j < likeAry.length; j++) {
    console.log(j, likeAry[j])
    }
複製程式碼
  • 物件名.屬性名 （不支援數字屬性）
  • 物件名['屬性名']
    • obj.id
    • obj.title
    var obj = {
      id: 1,
      title: 'zhufeng',
      name: 'bei',
      age: 10,
      1: 100,
      2: 200
    }

    for (var key in obj) {
      // console.log(key, obj[key])
      // 1 => 100
      // 2 => 200
      // id => 1
      // title => zhufeng
      // name => bei
      // age => 10
    }
複製程式碼

for in 遍歷物件

  • 它是將 物件裡屬性名依次遍歷出來
for (var key in obj) {
       // key 屬性名  obj[key] 屬性值
       console.log(key, obj[key])
     }

    // 第一次迴圈時 key => id
複製程式碼

陣列自帶的遍歷方法

  • forEach
var arr = [10, 20, 30, 40, 50, 60]
    // 陣列中有多少項 這個函式就執行多少次
    arr.forEach(function(item, index, oldArr) {
      // item 遍歷出來的每一項 index 每一項的索引 oldArr 原陣列 等於arr
      console.log(item, index)
    })
複製程式碼
  • map 修改
    var arr = [10, 20, 30, 40, 50, 60, 70]
    // 陣列中有多少項 就執行多少次這個函式 
    // 並且item 代表每一項 index代表每一項的索引 oldArr原陣列

    // 基於原陣列 每一項 乘以三 組成新陣列返回
    var result = arr.map(function(item, index, oldArr) {
      return item * 3
    })

    // [10, 20, 30, 40, 50, 60, 70]
    console.log('原陣列', arr)

    // [30, 60, 90, 120, 150, 180, 210]
    console.log('返回值', result)


    
    Array.prototype._forEach = function (fn) {
       // this代表是當前的陣列
       for (var i = 0; i < this.length; i++) {
         fn(this[i], i, this)
       }
     }

    var arr2 = [100, 200, 300]
    arr2._forEach(function(item, ind, old) {
    console.log(item, ind, old)
    })
    arr._forEach()
複製程式碼
  • for迴圈
  • 陣列方法 forEach map
  • 遍歷物件 for in

相關文章