一起來實現(xiàn)es5中新增的數(shù)組方法

LiuRhoRamen 發(fā)布于2019-08-22 10:40 / 2478人閱讀

摘要：再將其返回，注意是返回一個新的數(shù)組，而不是將原數(shù)組直接改變使用方式和類似也是接受一個回調(diào)函數(shù)，一個改變內(nèi)部指向的對象。

前言

一直以來想寫一篇關(guān)于es5中新增數(shù)組的使用方法與源碼實現(xiàn)的文章，拖了挺久了，趁著這夜深人靜，大腦清醒，又困意不在的時刻寫下來。也許有人會問，現(xiàn)如今es6都大行其道了，還學(xué)es5是不是有些過時了，?，溫故而知新，可以從中多學(xué)點嘛，而且我們是要自己實現(xiàn)這些方法，知其然還要知其所以然，不光要會用，還要知道為什么是這樣用噠。

新增方法預(yù)覽

es5中給js的數(shù)組增添了許多實用的方法，利用這些方法可以幫助我們更加快速方便的寫js代碼，然后蛋疼的是低版本ie肯定是不支持的，所以..................自己動手豐衣足食。讓我們一步步看下如何使用與實現(xiàn)這些方法。

forEach

map

filter

some

every

indexOf

lastIndexOf

reduce

reduceRight

forEach

這個方法作用是啥咧，就是循環(huán)，遍歷。比如一般我們在for循環(huán)做這樣的事的時候如下。

var arr = [1, 2, 3, 4, 5, 6];

for (var i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i], i, arr);
}

如果用forEach我們應(yīng)該如何做呢？

var arr = [1, 2, 3, 4, 5, 6];

arr.forEach(function (e, i, array) {
  console.log(e, i, array)
})

是不是覺得不用寫for循環(huán)了，瞬間逼格都高了

forEach函數(shù)中的回調(diào)函數(shù)支持三個參數(shù)，1、數(shù)組的值，2、值的索引，3、數(shù)組本身。這樣的調(diào)用方式是不是和jQuery中的$.each很像？ 其實不然，jQuery和forEach回調(diào)函數(shù)的第一個和第二個參數(shù)正好是反著來的。

看看對比

var arr = [1, 2, 3, 4, 5];

// forEach
arr.forEach(function (e, i, array) {
  console.log(e, i, array);
})

// output

1 0 [1, 2, 3, 4, 5]
2 1 [1, 2, 3, 4, 5]
3 2 [1, 2, 3, 4, 5]
4 3 [1, 2, 3, 4, 5]
5 4 [1, 2, 3, 4, 5]


// $.each
$.each(arr, function (i, e, array) { // 測試的時候發(fā)現(xiàn)array是undefined,查了文檔也發(fā)現(xiàn)沒有第三個參數(shù)
  console.log(i, e, array);
})

// output

0 1 undefined
1 2 undefined
2 3 undefined
3 4 undefined
4 5 undefined

接著我們來看一下forEach的第二個參數(shù)，這個參數(shù)決定第一個回調(diào)函數(shù)的內(nèi)部this指向

var arr = [1, 2, 3, 4, 5];

//  默認(rèn)情況下，第二個參數(shù)不傳入時
arr.forEach(function (e, i, array) {
  console.log(e, i, array, this);
})

// output
1 0 [1, 2, 3, 4, 5] window 
2 1 [1, 2, 3, 4, 5] window 
3 2 [1, 2, 3, 4, 5] window 
4 3 [1, 2, 3, 4, 5] window 
5 4 [1, 2, 3, 4, 5] window 

// 傳入?yún)?shù)
arr.forEach(function (e, i, array) {
  console.log(e, i, array, this);
}, {name: "qianlong"})

// output
1 0 [1, 2, 3, 4, 5] {name: "qianlong"} 
2 1 [1, 2, 3, 4, 5] {name: "qianlong"} 
3 2 [1, 2, 3, 4, 5] {name: "qianlong"} 
4 3 [1, 2, 3, 4, 5] {name: "qianlong"} 
5 4 [1, 2, 3, 4, 5] {name: "qianlong"}

最后接下來我們自己實現(xiàn)一下這個方法

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeArray = ObjPro.forEach;

Array.prototype.forEach = nativeArray || function (callBack, ctx) {  
  if (typeof callBack != "function") return;
  
  for (var i =0, len = this.length; i < len; i++) {
    if (hasOwn.call(this, i)) {
      callBack.call(ctx, this[i], i, this);
    }
  }
}

map

map是干嘛的！ 其最主要的作用就是將原數(shù)組按照一定的規(guī)則映射成一個新的數(shù)組。再將其返回，注意是返回一個新的數(shù)組，而不是將原數(shù)組直接改變使用方式和forEach類似,也是接受一個回調(diào)函數(shù)，一個改變內(nèi)部this指向的對象。

map

array.map(callback,[ thisObject])

callback

var arr = [1, 2, 3, 4, 5];

arr.map(function(value, index, array) {
  
});

舉個栗子

var arr = [1, 2, 3, 4, 5];

var newArr = arr.map(function (e, i, array) {
  return "hello " +  e;
})

// output

["hello 1", "hello 2", "hello 3", "hello 4", "hello 5"] // newArr

[1, 2, 3, 4, 5] // arr

注意上面的return，如果我們不寫return會怎樣呢？

var arr = [1, 2, 3, 4, 5];

var newArr = arr.map(function (e, i, array) {
  "hello " +  e;
})

// output

[undefined, undefined, undefined, undefined, undefined] // newArr

[1, 2, 3, 4, 5] // arr

這一堆的undefined是啥情況，還記得一個函數(shù)執(zhí)行完，如果沒有顯示的返回值，會返回什么嗎？沒錯就是undefined，這就是原因所在，等會通過源碼，你就會更加明白。

最后我們自己實現(xiàn)一下map這個方法

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeMap = ObjPro.map;
    
Array.prototype.map = nativeMap || function (callBack, ctx) {
  if (typeof callBack != "function") return;
  
  var returnArr = [];
  for(var i = 0, len = this.length; i < len; i++) {
    returnArr.push(callBack.call(ctx, this[i], i, this)); // 這就是為什么回調(diào)函數(shù)沒有返回值的情況下會得到一堆的undefined值，他將回調(diào)函數(shù)的返回值push到了一個數(shù)組里面，當(dāng)你沒有顯示的返回值的時候，自然push進去的就是undefined了     
  }
  return  returnArr;
}

filter

接下來是filter,篩選，過濾的意思，給你一個數(shù)組，用一些你制定的條件，對其中的值進行過濾，最后得到你想要的新的數(shù)組。基本用法和map差不多

  
array.filter(callback,[ thisObject]);

但是和map也有差別的地方，filter需要你在callback處返回弱等于true 的值,才會將原數(shù)組中篩選出的值返回給你。

舉個栗子

var arr = [0, 1, 2, 3, 4, 5];

var newArr = arr.filter(function (e, i, array) {
  return e;
})

// output

[1, 2, 3, 4, 5] // newArr

var newArr2 = arr.filter(function (e, i, array) {
  if (e >= 2) return true; 
})

// ouput
[2, 3, 4, 5] // newArr2

當(dāng)然最后還有第二個參數(shù)改變內(nèi)部this指向的參數(shù)可選，默認(rèn)是window對象，你也可以傳一個對象進去, 最后我們自己來實現(xiàn)一下這個api

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeFilter = ObjPro.filter;
    
Array.prototype.filter = nativeFilter || function (callBack, ctx) {
  if (typeof callBack != "function") return;
  
  var returnArr = [];
  for(var i = 0, len = this.length; i < len; i++) {
    if (callBack.call(ctx, this[i], i, this)) {
      returnArr.push(this[i]);
    }
  }    
  return returnArr;
}

some vs every

some與接下里的every正好相對，some是只要數(shù)組中的某個值，符合你給定的判斷條件就返回true，而every則是數(shù)組中的所有值都符合你給定的判斷條件的時候才會返回true，否則就返回false,也就是說兩個方法最后得到的都是true or false

舉個栗子

    
var arr = [0, 1, 2, 3, 4, 5];

var result = arr.some(function (e, i, array) {
  if (e === 3) {return true};
});

// output      
true // result;

var arr = [0, 1, 2, 3, 4, 5];

var result2 = arr.every(function (e, i, array) {
  if (e > 3) {return true};
});
// output      
false // result;

some 和 every使用起來非常簡單，接下來我們自己實現(xiàn)一把

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeSome = ObjPro.some,
    nativeEvery = ObjPro.every;
    
// some    
Array.prototype.some = nativeSome || function (callBack, ctx) {
  if (typeof callBack != "function") return;
  
  var resultValue = false;
  for(var i = 0, len = this.length; i < len; i++) {
    if (resultValue) {
      break;
    }
    resultValue = !!callBack.call(ctx, this[i], i, this); 
  }
  return  resultValue;
} 

// every

Array.prototype.every = nativeEvery || function (callBack, ctx) {
  if (typeof callBack != "function") return;

  var resultValue = true;
  for (var i = 0, len = this.length; i < len; i++) {
    if (!resultValue) {
      break;    
    }
    resultValue = !!callBack.call(ctx, this[i], i, this);
  }    
  return resultValue;      
}

indexOf

數(shù)組的indexOf方法和字符串的indexOf用法非常類似，array.indexOf(searchElement[, fromIndex]),針對給定的要查找的值，和開始查找的位置(可選)，返回整數(shù)索引值。

舉個例子

var arr = [0, 1, 2, 3, 4, 5];

arr.indexOf(1) // 1
arr.indexOf(3, "qianlong") // 3 因為給定的開始索引值不能轉(zhuǎn)化成數(shù)字，所以還是從0位置開始搜索 
arr.indexOf(3, 4) // -1
arr.indexOf(3, "4") // -1
arr.indexOf("3") // -1 // 判斷條件是強 3 !== "3" => -1

實現(xiàn)代碼

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeIndexOf = ObjPro.indexOf;
    
Array.prototype.indexOf = nativeIndexOf || function (searchElement, fromIndex) {
  var returnIndex = -1,
      fromIndex = fromIndex * 1 || 0;
  for (var i = fromIndex, len = this.length; i < len; i++) {
    if (searchElement === this[i]) {
       returnIndex = i;
       break;
    }
  }             
  return returnIndex;        
}

lastIndexOf

數(shù)組的lastIndexOf方法和字符串的lastIndexOf用法非常類似，array. lastIndexOf(searchElement[, fromIndex]),針對給定的要查找的值，和開始查找的位置(可選)，返回整數(shù)索引值。與indexOf不同的地方在于，它是從后往前查找。默認(rèn)開始查找的位置是 array.length - 1

舉個栗子

var arr = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1, 0];

arr.lastIndexOf(1) // 9
arr.lastIndexOf(3, "qianlong") // -1 這里和indexOf不一樣，傳入的值不能轉(zhuǎn)化為數(shù)字將得到-1
arr.lastIndexOf(3, 4) // 3
arr.lastIndexOf(3, "4") // 3
arr.lastIndexOf("3") // -1 // 判斷條件是強 3 !== "3" => -1

源碼實現(xiàn)

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeLastIndexOf = ObjPro.lastIndexOf;
    
Array.prototype.lastIndexOf = nativeLastIndexOf || function (searchElement, fromIndex) {
  var len = this.length,
      returnIndex = -1,
      fromIndex = fromIndex * 1 || len - 1;
      
  for (var i = fromIndex; i > -1; i -= 1) {
    if (this[i] === searchElement){
      returnIndex = i;
      break;
    }
  }
  return returnIndex;
}

reduce

reduce 相對es5中數(shù)添加的其他方法都復(fù)雜一些，我們可以通過栗子來看一下這個api怎么使用。首先基本參數(shù)如下

array.reduce(callback[, initialValue]),接收一個回調(diào)函數(shù)，一個初始化的值initialValue 。其中callback參數(shù)分別是初始化的值initialValue ,如果沒有傳入initialValue,則默認(rèn)是數(shù)組的第一項。第二個及其后面的參數(shù)分別是當(dāng)前值,索引,數(shù)組本身

var arr = [0, 1, 2, 3, 4, 5],
    sum = arr.reduce(function (init, cur, i, array) {
      return init + cur;
    });    
    
   //output
   sum // 15

我們來看一下上面的執(zhí)行過程是怎樣的。

第一回合

// 因為initialValue沒有傳入所以回調(diào)函數(shù)的第一個參數(shù)為數(shù)組的第一項

init = 0;
cur = 1;

=> init + cur = 1;

第二回合

init = 1;
cur = 2;

=> init + cur = 3;

第三回合

init = 3;
cur = 3;

=> init + cur = 6;

第四回合

init = 6;
cur = 4;

=> init + cur = 10;

第五回合

init = 10;
cur = 5;

=> init + cur = 15;

最后得到結(jié)果15

那么我們?nèi)绾巫约簩崿F(xiàn)一個reduce呢？

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeReduce = ObjPro.reduce;
    
Array.prototype.reduce = nativeReduce || function (callBack, initialVal) {
  if (typeof callBack != "function") return;
  
  var init = initialVal,
      i = 0;
  
      if (init === void (0)) {
        init = this[0];
        i = 1;
      }
  for (i, len = this.length; i < len; i++) {
    if (hasOwn.call(this, i)) {
      init = callBack(init, this[i], i, this);
    }  
  }
  return init;    
}

reduceRight

reduceRight基本用法與reduce類似，好比indexOf與lastIndexOf，不同之處在于它是從最右邊的值開始計算的。我們直接去看源碼怎么實現(xiàn)吧

var ObjPro = Object.prototype,
    hasOwn = ObjPro.hasOwnProperty,
    nativeReduceRight = ObjPro.reduceRight;
   
Array.prototype.reduceRight = nativeReduceRight || function (callBack, initialVal) {
  if (typeof callBack != "function") return;
  
  var init = initialVal,
      len = this.length,
      i = len - 1;
      
  if (init === void(0)) {
    init = this[len - 1];
    i -= 1;
  }
  for (i; i > -1; i -=1) {
    if (hasOwn.call(this, i)) {
      init = callBack(init, this[i], i, this);
    }
  }    
  return init;
}

結(jié)尾

終于寫完了，斷斷續(xù)續(xù)快寫了兩天，歡迎大家看了以后提一些意見，函數(shù)實現(xiàn)的不一定都對，肯定有一些問題的地方，歡迎大家指正。

最后把代碼放到github上面了

github地址

各位大大，請讓我打個小廣告。???

博客地址

GPU云服務(wù)器云服務(wù)器數(shù)組方法數(shù)組操作方法數(shù)組實現(xiàn) 構(gòu)造方法數(shù)組

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91042.html

發(fā)表評論

登陸后可評論

0條評論

LiuRhoRamen

男|高級講師

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

TA的文章

esp-idf的基礎(chǔ)gpio配置（基于點燈）

閱讀 2016·2021-11-23 09:51
你知道前端對圖片的處理方式嗎？

閱讀 1270·2019-08-30 15:55
常見的軟件數(shù)據(jù)對接技術(shù)

閱讀 1645·2019-08-30 15:44
2018 淺談前端面試那些事

閱讀 786·2019-08-30 14:11
2017、2018面試分享（js面試題記錄）記得點贊分享哦；讓更多的人看到~~

閱讀 1176·2019-08-30 14:10
轉(zhuǎn)眼人到中年：前端老程序員無法忘懷的一次百度電話面試（二）

閱讀 946·2019-08-30 13:52
【移動適配】移動Web怎么做屏幕適配（三）

閱讀 2659·2019-08-30 12:50
小探究：CSSの漸變

閱讀 650·2019-08-29 15:04

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

一起來實現(xiàn)es5中新增的數(shù)組方法

相關(guān)文章

數(shù)組去重--這幾種方法夠不?

JS每日一題:Es6中新增的數(shù)據(jù)類型有哪些？使用場景？

JS每日一題:Es6中新增的數(shù)據(jù)類型有哪些？使用場景？

Javascript中Array方法的總結(jié)

發(fā)表評論

0條評論

LiuRhoRamen

男|高級講師

TA的文章

esp-idf的基礎(chǔ)gpio配置（基于點燈）

你知道前端對圖片的處理方式嗎？

常見的軟件數(shù)據(jù)對接技術(shù)

2018 淺談前端面試那些事

2017、2018面試分享（js面試題記錄）記得點贊分享哦；讓更多的人看到~~

轉(zhuǎn)眼人到中年：前端老程序員無法忘懷的一次百度電話面試（二）

【移動適配】移動Web怎么做屏幕適配（三）

小探究：CSSの漸變

最新活動

資訊專欄INFORMATION COLUMN

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

一起來實現(xiàn)es5中新增的數(shù)組方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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