前言
如果對技術很自信,請直接看 實現的源碼
如果想回顧一下基礎,請按文章順序閱讀
說到迭代方法,最先想到的是什么?forEach還是map,迭代的方法ES5提供了5種方法
以下定義來自 JavaScript高級程序設計
每個方法都接收兩個參數
- 在每一項上運行的函數
- 運行該函數的作用域對象(影響this的值)
傳入這些方法中的函數會接收3個參數
- 數組項的值
- 該項在數組的位置
- 數組對象本身
迭代函數執行后可能會也可能不會影響返回結果 (霧..)
ES5提供的迭代函數
- forEach(): 對數組中的每一項運行給定函數,無返回值
- every(): 對數組中的每一項運行給定函數,如果該函數每一項都返回
true,則返回true - some(): 對數組中的每一項運行給定函數,如果該函數任意一項返回
true,則返回true - map(): 對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組
- filter(): 對數組中的每一項運行給定函數,該函數會返回true的項組成的數組
參數說明
let array = [1,2,3,4,5,6,7,8,9]
array.forEach((element,index,array) => {
console.log(`當前遍歷元素${element}`);
console.log(`當前元素位置${index}`);
console.log(`數組本身${array}`);
})
> 當前遍歷元素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
forEach可以說是最常用的一個迭代方法了,該方法沒有返回值,與for循環的效果一樣
forEach的第二個參數,js高程上說明 是運行該函數的作用域對象,可以看一下經典的例子
let obj2 = {
name: '張三',
times:[1,2,3],
print:function () {
this.times.forEach(function(res) {
console.log(this.name);
},this)
}
}
// 迭代函數內部的function默認指向windows 第二個參數調整了this指向
obj2.print()
// 張三
// 張三
// 張三
如果這么寫看不太懂的話,看箭頭函數的寫法一下子就能明白
let obj2 = {
name: '張三',
times:[1,2,3],
print:function () {
this.times.forEach(res => {
console.log(name);
})
}
}
// 箭頭函數this指向父級,所以他不需要調整this
obj2.print()
// 張三
// 張三
// 張三
every(判斷函數)
對數組中的每一項運行給定函數,如果該函數每一項都返回
true,則返回true
默認返回false
var array = [1,2,3,4,5,6,7,8,9]
var result = array.every(e => {})
console.log(result); //
> false
全部ture才會返回true
var array = [1,2,3,4,5,6,7,8,9]
var result = array.every(e => {
return e > 0
})
console.log(result);
> true
var array = [1,2,3,4,5,6,7,8,9]
var result = array.every(e => {
return e > 1
})
console.log(result);
> false
some(判斷函數)
對數組中的每一項運行給定函數,如果該函數任意一項返回
true,則返回true
默認返回false
var array = [1,2,3,4,5,6,7,8,9]
var result = array.some(e => {})
console.log(result); //
> false
全部false才會返回false
var array = [1,2,3,4,5,6,7,8,9]
var result = array.some(e => {
return e > 8
})
console.log(result);
var array = [1,2,3,4,5,6,7,8,9]
var result = array.some(e => {
return e > 9
})
console.log(result);
> false
以上兩個都不是很常用,但是毫無疑問在特定的需求下,這個要比用forEach代碼要簡潔很多
filter(過濾函數)
對數組中的每一項運行給定函數,該函數會返回true的項組成的數組
var array = [1,2,3,4,5,6,7,8,9]
var result = array.filter(e => {
return e>5
})
console.log(result);
> [6, 7, 8, 9]
上面的例子,array數組里面大於5的數會被過濾出來,filter函數在日常當中比較常用
map(處理函數)
對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組
var array = [1,2,3,4,5,6,7,8,9]
var result = array.map(e => {
return e>5
})
console.log(result);
> [false, false, false, false, false, true, true, true, true]
var array = [1,2,3,4,5,6,7,8,9]
var result = array.map(e => {
return e*2
})
console.log(result);
> [2, 4, 6, 8, 10, 12, 14, 16, 18]
forEach(迭代函數)
對數組中的每一項運行給定函數,無返回值
var array = [1,2,3,4,5,6,7,8,9]
var arraypush = []
var result = array.forEach(e => {
if (e > 5) {
arraypush.push(e)
}
})
console.log(arraypush);
> [6, 7, 8, 9]
最純粹的迭代函數,似乎forEach是處理外部數組最好的選擇
到這里,我想起了我第一次使用filter函數的時候,我驚呆了,這函數太強大了!
如此好用的工具函數,不自己實現一遍怎么能做到完全了解
以下函數為自己實現的,並不是源碼,若有錯誤請指點!
實現forEach
首先明顯forEach是Array上的原型鏈上的函數所以第一件事就是創建一個原型方法
Array.prototype.MyforEach = function (){}
forEact 第一個參數為一個匿名函數 第二個參數為this指向 所以
Array.prototype.MyforEach = function (fn,obj){}
forEach會迭代調用它的數組所以內部肯定是循環
Array.prototype.MyforEach = function (fn,obj){
let len = this.length
for (let index = 0; index < len; index++) {
fn(this[index],index,this)
}
}
但是我們還沒有考慮this指向的事情,所以還需要添加一些調整this的代碼
Array.prototype.MyforEach = function (fn,obj){
let len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
fn(this[index],index,this)
}
}
運行一下試試,就用之前的例子
var array = [1,2,3,4,5,6,7,8,9]
Array.prototype.MyforEach = function (fn,obj){
let len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
fn(this[index],index,this)
}
}
var obj2 = {
name: '張三',
times:[1,2,3],
print:function () {
this.times.MyforEach(function(res) {
console.log(this.name);
},this)
}
}
obj2.print()
> 張三
> 張三
> 張三
實現map
map與forEach的區別是
- map中如果是運算,會返回每次函數調用的新的結果組成的數組
- map中如果是判斷,會返回每次迭代結果組成的數組
所以只要在迭代函數內部創建一個數組,每次迭代都push進去,最后返回出去就好啦
Array.prototype.Mymap = function (fn,obj){
var resultData = []
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
resultData.push(fn(this[index],index,this))
}
return resultData
}
運行一下
var array = [1,2,3,4,5,6,7,8,9,]
var result = array.Mymap(e => {
return e*2
})
console.log(result);
> [2, 4, 6, 8, 10, 12, 14, 16, 18]
實現 some every
some與every都會有一個特點 默認返回false
不同的地方在於
some要求 全部返回false返回false
every要求 全部返回true返回true
// -- every --
Array.prototype.Myevery = function (fn,obj) {
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
if (fn(this[index],index,this) == undefined) { // 無返回值 默認返回false
return false
}else if (fn(this[index],index,this) !== true) { // 出現一個不為 true 就停止迭代 返回結果
return false
}
}
return true
}
// -- some --
Array.prototype.Mysome = function (fn,obj) {
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
if (fn(this[index],index,this) == undefined) {
return false
} else if (fn(this[index],index,this) !== false) {
return true
}
}
return false
}
實現fliter
相信到這里,你也可以直接實現一個fliter函數了,僅僅是多添加一個數組
Array.prototype.Myfilter = function (fn, obj) {
let resultData = []
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
if (fn(this[index],index,this) === true) {
resultData.push(this[index]) // 注意不是push函數結果
}
}
return resultData
}
// -- 運行 --
var array = [1,2,3,4,5,6,7,8,9]
var result = array.Myfilter(e => {
return e>5
})
console.log(result);
> [6, 7, 8, 9]
perfect! 😝
原來很多東西,並沒有想象的那么復雜
后記
想起了之前掘金上的 停止學習框架 一文,以及后面各位大佬的 駁 ....停止學習框架,說到底都是為了告訴我們,不管學習什么,都要打好基礎,作為前端開發者,最最基礎的就是打好JavaScript的基礎,基礎扎實,學習框架都不是困難事情