Javascript各種數(shù)組遍歷方法歸納總結(jié)和兼容寫法

Sanchi 發(fā)布于2019-08-26 10:29 / 3600人閱讀

摘要：主要用于枚舉對象數(shù)組遍歷效率最低的方法。當(dāng)前數(shù)組元素的值。傳遞給函數(shù)的初始值注意對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

前言

PS: 2018/04/26 優(yōu)化一下排版,重新梳理一下方法,補(bǔ)充一些信息,刪除JQuery庫用法,只講解Javascript自帶的,

for in

語句用于遍歷數(shù)組或者對象的屬性（對數(shù)組或者對象的屬性進(jìn)行循環(huán)操作）。主要用于枚舉對象, 數(shù)組遍歷效率最低的方法。

var ary = [1, 2, 3],
    obj = {
        name: "Tom",
        age: 18
    },
    i;

for (i in ary) {
    console.log(i);
}

for (i in obj) {
    console.log(obj[i]);
}

注意：
1, 遍歷數(shù)組時, i表示當(dāng)前索引值,ary[i]對應(yīng)的元素遍歷對象時, i表示key值, obj[i]表示key值對應(yīng)的value值;
2, 跳出循環(huán)的方式有如下幾種：return 函數(shù)執(zhí)行被終止, break 循環(huán)被終止, continue 循環(huán)被跳過;

缺點(diǎn)：
1, 遍歷所有屬性包括原型鏈;
2, 忽略 enumerable 為 false 的屬性;

//構(gòu)造函數(shù)
function Person() {
  this.name = "mike";
};
//原型鏈屬性
Person.prototype.age = 18;

//實(shí)例賦值
var mike = new Person,
  i;
mike.sex = "man";
mike.height = "180";

//設(shè)置不可枚舉
Object.defineProperty(mike, "height", {
  enumerable: false
});

for (i in mike) {
  console.log(mike[i]);
}

優(yōu)化方案:
hasOwnProperty：是用來判斷一個對象是否有你給出名稱的屬性或?qū)ο?。不過需要注意的是, 此方法無法檢查該對象的原型鏈中是否具有該屬性, 該屬性必須是對象本身的一個成員;

//構(gòu)造函數(shù)
function Person() {
  this.name = "mike";
};
//原型鏈屬性
Person.prototype.age = 18;

//實(shí)例賦值
var mike = new Person,
  i;
mike.sex = "man";

for (i in mike) {
  //過濾出對象自身的屬性
  if (mike.hasOwnProperty(i)) {
    console.log(mike[i]);
  }
}

注意: 這里依然會遍歷所有屬性,只是過濾出操作屬性而已

For

循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。

var ary = [1, 2, 3],
  i = 0,
  len = ary.length;

for (; i < len; i++) {
  console.log(ary[i]);
}

注意：
1, (如果使用var聲明的話),for循環(huán)中的i在循環(huán)結(jié)束之后依然存在于作用域中, 為了避免影響作用域中的其他變量, 通常使用閉包或其他方式做處理
2, 避免使用for(var i=0, len = ary.length;i < len; i++){} 的方式, 數(shù)組長度每次循環(huán)都被計(jì)算, 效率低。將變量聲明放在for的前面來執(zhí)行
3, 跳出循環(huán)的方式有如下幾種：return 函數(shù)執(zhí)行被終止, break 循環(huán)被終止, continue 循環(huán)被跳過;

有種稍高逼格寫法:

var ary = [1, 2, 3],
  i = ary.length - 1;

for (; i <= 0; i--) {
  console.log(ary[i]);
}

不考慮順序情況下還不錯,少一個變量并且能唬到一些新手

forEach(function(currentValue, index, arr), thisValue)

按照原始數(shù)組元素順序依次處理元素.

參數(shù)	描述
function(currentValue, index, arr)	匿名函數(shù),默認(rèn)傳參第1個是遍歷的數(shù)組內(nèi)容；第2個是對應(yīng)的數(shù)組索引, 第3個是數(shù)組本身
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用, 傳遞給函數(shù), 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined"

注意: forEach() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];

ary.forEach(function (_ele, _index, _ary) {
  console.log(_ele, _index, _ary);
})

// 1 0 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 2 1 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 3 2 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 4 3 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 5 4 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 6 5 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 7 6 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 8 7 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 9 8 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

簡單實(shí)現(xiàn)兼容寫法:

Array.prototype._forEach = function (callback, context) {
  //指定指向, 默認(rèn)window
  context = context || window;
  //瀏覽器支持直接調(diào)用方法, 終止后續(xù)操作
  if ("forEach" in Array.prototype) {
    this.forEach(callback, context);
    return;
  }
  //保證回調(diào)函數(shù)
  if (typeof callback !== "function") throw "callback must be a function"

  //遍歷數(shù)組, 設(shè)置指向
  var i = 0,
    len = this.length;
  for (; i < len; i++) {
    callback.call(context, this[i], i, this)
  }
}

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
ary._forEach(function (_ele, _index, _ary) {
  console.log(_ele, _index, _ary);
})

map(function(currentValue,index,arr), thisValue)

按照原始數(shù)組元素順序依次處理元素并返回一個新數(shù)組, 數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

參數(shù)	描述
function(currentValue, index, arr)	匿名函數(shù),默認(rèn)傳參第1個是遍歷的數(shù)組內(nèi)容；第2個是對應(yīng)的數(shù)組索引, 第3個是數(shù)組本身
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用, 傳遞給函數(shù), 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined"

注意: map() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var _ary = ary.map(function (_ele, _index, _ary) {
  console.log(_ele, _index, _ary);
  return _ele * 2
})
console.log("原數(shù)組： " + ary);
console.log("返回?cái)?shù)組： " + _ary);

// 1 0 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 2 1 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 3 2 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 4 3 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 5 4 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 6 5 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 7 6 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 8 7 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 9 8 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 原數(shù)組： 1,2,3,4,5,6,7,8,9
// 返回?cái)?shù)組： 2,4,6,8,10,12,14,16,18

簡單實(shí)現(xiàn)兼容寫法:

Array.prototype._map = function (callback, context) {
  //指定指向, 默認(rèn)window
  context = context || window;
  //瀏覽器支持直接調(diào)用方法, 終止后續(xù)操作
  if ("map" in Array.prototype) {
    return this.map(callback, context);
  }
  //保證回調(diào)函數(shù)
  if (typeof callback !== "function") throw "callback must be a function"

  //遍歷數(shù)組, 返回操作過的數(shù)組
  var _ary = [],
    i = 0,
    len = this.length;
  for (; i < len; i++) {
    _ary[i] = callback.call(context, this[i], i, this);
  }
  return _ary;
}

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
  _ary = ary._map(function (_ele, _index, _ary) {
    return _ele * 10
  });
console.log("原數(shù)組： " + ary);
console.log("返回?cái)?shù)組： " + _ary);

filter(function(currentValue,index,arr), thisValue)

使用指定的函數(shù)測試所有元素, 并創(chuàng)建一個包含所有通過測試的元素的新數(shù)組。

參數(shù)	描述
function(currentValue, index, arr)	匿名函數(shù),默認(rèn)傳參第1個是遍歷的數(shù)組內(nèi)容；第2個是對應(yīng)的數(shù)組索引, 第3個是數(shù)組本身
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用, 傳遞給函數(shù), 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined"

注意: filter() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
  _ary = ary.filter(function (_ele, _index, _ary) {
    return _ele < 5
  });
console.log("原數(shù)組： " + ary);
console.log("返回?cái)?shù)組： " + _ary);

// 原數(shù)組： 1,2,3,4,5,6,7,8,9
// 返回?cái)?shù)組： 1,2,3,4

簡單實(shí)現(xiàn)兼容寫法:

Array.prototype._filter = function (callback, context) {
  //指定指向, 默認(rèn)window
  context = context || window;
  //瀏覽器支持直接調(diào)用方法, 終止后續(xù)操作
  if ("filter" in Array.prototype) {
    return this.filter(callback, context);
  }
  //保證回調(diào)函數(shù)
  if (typeof callback !== "function") throw "callback must be a function"

  //遍歷數(shù)組, 返回操作過的數(shù)組
  var _ary = [],
    i = 0,
    len = this.length;
  for (; i < len; i++) {
    if (callback.call(context, this[i], i, this)) {
      _ary.push(this[i])
    }
  }
  return _ary;
}

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
  _ary = ary._filter(function (_ele, _index, _ary) {
    return _ele & gt; 3
  });
console.log("原數(shù)組： " + ary);
console.log("返回?cái)?shù)組： " + _ary);

every(function(currentValue,index,arr), thisValue)

用于檢測數(shù)組所有元素是否都符合指定條件,返回布爾值.

參數(shù)	描述
function(currentValue, index, arr)	匿名函數(shù),默認(rèn)傳參第1個是遍歷的數(shù)組內(nèi)容；第2個是對應(yīng)的數(shù)組索引, 第3個是數(shù)組本身
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用, 傳遞給函數(shù), 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined"

注意: every() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
  bol = ary.every(function (_ele, _index, _ary) {
    return _ele < 5
  });
console.log(bol); // false

簡單實(shí)現(xiàn)兼容寫法:

Array.prototype._every = function (callback, context) {
  //指定指向, 默認(rèn)window
  context = context || window;
  //瀏覽器支持直接調(diào)用方法, 終止后續(xù)操作
  if ("every" in Array.prototype) {
    return this.every(callback, context);
  }
  //保證回調(diào)函數(shù)
  if (typeof callback !== "function") throw "callback must be a function"

  //遍歷數(shù)組, 返回操作過的數(shù)組
  var _ary = [],
    i = 0,
    len = this.length;
  for (; i < len; i++) {
    if (callback.call(context, this[i], i, this)) {
      return false;
    }
  }
  return true;
}

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
  bol = ary._every(function (_ele, _index, _ary) {
    return _ele & gt; 5
  });
console.log(bol);

reduce/reduceRight(function(previousValue, currentValue, currentIndex, array), initialValue)

reduce對數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)。該回調(diào)函數(shù)的返回值為累積結(jié)果, 并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時作為參數(shù)提供。
reduceRight反向操作.

參數(shù)	描述
function(previousValue, currentValue, currentIndex, array)	previousValue：通過上一次調(diào)用回調(diào)函數(shù)獲得的值。如果向 reduce 方法提供 initialValue, 則在首次調(diào)用函數(shù)時, previousValue 為 initialValue。currentValue：當(dāng)前數(shù)組元素的值。currentIndex：當(dāng)前數(shù)組元素的數(shù)字索引。array：包含該元素的數(shù)組對象。
initialValue	可選。傳遞給函數(shù)的初始值,

注意: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

先來打印看看里面的傳參和沒初始值的情況：

var ary = [1, 2, 3, 4],
  sum = ary.reduce(function (previousValue, currentValue, currentIndex, array) {
    console.log(previousValue, currentValue, currentIndex, array);
    return previousValue + currentValue
  });

console.log(sum);
// 1 2 1 [ 1, 2, 3, 4 ]
// 3 3 2 [ 1, 2, 3, 4 ]
// 6 4 3 [ 1, 2, 3, 4 ]
// 10

var ary = [1, 2, 3, 4],
  sum = ary.reduce(function (previousValue, currentValue, currentIndex, array) {
    console.log(previousValue, currentValue, currentIndex, array);
    return previousValue + currentValue
  }, 10);

console.log(sum);
// 10 1 0 [ 1, 2, 3, 4 ]
// 11 2 1 [ 1, 2, 3, 4 ]
// 13 3 2 [ 1, 2, 3, 4 ]
// 16 4 3 [ 1, 2, 3, 4 ]
// 20

兩者區(qū)別在于多了一層運(yùn)算,文檔說明如下
在第一次調(diào)用回調(diào)函數(shù)時, 作為參數(shù)提供的值取決于 reduce 方法是否具有 initialValue 參數(shù)。
1, 有:

1) previousValue 參數(shù)為 initialValue。
2) currentValue 參數(shù)是數(shù)組中的第一個元素的值。

2, 沒有:

1) previousValue 參數(shù)是數(shù)組中的第一個元素的值。
2) currentValue 參數(shù)是數(shù)組中的第二個元素的值。

簡單實(shí)現(xiàn)兼容寫法:

Array.prototype._reduce = function (callback, initValue) {
  //瀏覽器支持直接調(diào)用方法, 終止后續(xù)操作
  if ("reduce" in Array.prototype) {
    this.reduce(callback, context);
    return;
  }
  //保證回調(diào)函數(shù)
  if (typeof callback !== "function") throw "callback must be a function"

  //遍歷數(shù)組, 設(shè)置指向
  var add = initValue || this.unshift(initValue),
    i = 0,
    len = this.length;
  for (; i < len; i++) {
    add = callback.call(null, add, this[i], i, this)
  }
}

var ary = [1, 2, 3, 4],
  sum = ary.reduce(function (previousValue, currentValue, currentIndex, array) {
    return previousValue + currentValue
  }, 20);
console.log(sum);

entries(), keys()和values()

它們都返回一個遍歷器對象,可以用for...of循環(huán)進(jìn)行遍歷, 唯一的區(qū)別是keys()是對鍵名/索引值的遍歷、values()是對鍵值的遍歷, entries()是對鍵/索引值值對的遍歷

var ary = [1, 2, 3, 4];
for (let elem of ary.keys()) {
  console.log(elem);
}
for (let elem of ary.values()) {
  console.log(elem);
}
for (let elem of ary.entries()) {
  console.log(elem);
}

寫到這里就差不多了,ES5還有壹些篩選方法例如find(), includes()等其實(shí)都是大同小異就不繼續(xù)寫了,ES6還會涉及到疊代器的知識點(diǎn),大家有興趣自行研究吧.

云服務(wù)器 GPU云服務(wù)器 javascript數(shù)組方法各種瀏覽器兼容js 方法總結(jié) 使用方法總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106245.html

發(fā)表評論

登陸后可評論

0條評論

Sanchi

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow版本查詢

閱讀 2158·2023-04-25 20:45
主機(jī)的域名是什么意思-主機(jī)域名是哪個？

閱讀 1068·2021-09-22 15:13
GreenCloudVPS：$20/年/1GB內(nèi)存/30GB NVMe空間/1TB流量/10Gbps

閱讀 3641·2021-09-04 16:48
移動 web 端屏幕適配 - rem

閱讀 2579·2019-08-30 15:53
第十集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫( 計(jì)數(shù)器組件 )

閱讀 928·2019-08-30 15:44
微信小程序，圖片加載完畢后顯示，基于富文本解析插件wxParse

閱讀 936·2019-08-30 15:43
JavaScript fetch接口

閱讀 1001·2019-08-29 16:33
如何只用 CSS 完成漂亮的加載

閱讀 3432·2019-08-29 13:08

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Javascript各種數(shù)組遍歷方法歸納總結(jié)和兼容寫法

相關(guān)文章

**談一談幾種處理JavaScript異步操作的辦法**

JavaScript知識架構(gòu)學(xué)習(xí)路徑（一）- 變量篇

**js基礎(chǔ)歸納總結(jié)1**

WEB開發(fā)面面談之（5）——寫JS時必須注意的的一些問題

前端基礎(chǔ)入門五（掌握jQuery的常用api，實(shí)現(xiàn)動態(tài)效果）

發(fā)表評論

0條評論

Sanchi

男|高級講師

TA的文章

tensorflow版本查詢

主機(jī)的域名是什么意思-主機(jī)域名是哪個？

GreenCloudVPS：$20/年/1GB內(nèi)存/30GB NVMe空間/1TB流量/10Gbps

移動 web 端屏幕適配 - rem

第十集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫( 計(jì)數(shù)器組件 )

微信小程序，圖片加載完畢后顯示，基于富文本解析插件wxParse

JavaScript fetch接口

如何只用 CSS 完成漂亮的加載

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Javascript各種數(shù)組遍歷方法歸納總結(jié)和兼容寫法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！