記錄數(shù)組的一些高階方法

分成以下兩類:會改變原數(shù)組的和不會改變原數(shù)組的

一、會改變原數(shù)組的

1 .sort()
之前寫過一篇 點擊這里查看

二、不會改變原數(shù)組的

  1. concat
    連接兩個數(shù)組,并且返回一個新數(shù)組
  var arr = [1,2,32,23,4,2,2,2]
  var arr2 = [6,7,8]
  var c = arr.concat(arr2)
  console.log(c)   //  [1, 2, 32, 23, 4, 2, 2, 2, 6, 7, 8]

如果是傳一個空數(shù)組,那么會復(fù)制原來的數(shù)組,并且返回一個新數(shù)組;如果不加[ ],直接在里面寫arr.concat(1,2,3),和寫一個數(shù)組進去是一樣的效果,估計是瀏覽器自動糾錯的功能
這個不算高階。。。

  1. map和forEach

map有地圖的意思,還有映射的意思,可以這樣理解,地圖上的每一個點在真實世界里面都有一個對應(yīng)的映射。

在map和forEach這些數(shù)組的方法里面,會傳進去一個函數(shù)作為map方法的一個參數(shù),這個函數(shù)里面的第一個參數(shù)指的是數(shù)組的value,第二格參數(shù)指的是數(shù)組的key,有時也會有第三個參數(shù),指的是數(shù)組本身。

如下函數(shù)是map的一個用法

let score = [29,50,62,95,59]

let result = score.map(function(x,y){
  return x >= 60 ? '及格':'不及格'
})

console.log(result) // ["不及格", "不及格", "及格", "及格", "不及格"]

上面的map返回的是三元運算符的結(jié)果

  var arr = [1,2,32,23,4,2,2,2]
  var c = arr.map(function(x,y){
    return x*2
  })
  console.log(c)    //  [2, 4, 64, 46, 8, 4, 4, 4]

可以確定的是map會使遍歷原數(shù)組,需要一個變量來接住map運算產(chǎn)生的結(jié)果,并且原數(shù)組是不會改變的。

阮一峰的教程上是這樣解釋的:

map方法對數(shù)組的所有成員依次調(diào)用一個函數(shù),根據(jù)函數(shù)結(jié)果返回一個新數(shù)組。

map和forEach類似,區(qū)別是map會返回一個數(shù)組,內(nèi)置的函數(shù)會傳三個參數(shù),第一個是value,第二個是key,第三個是這個數(shù)組本身,如果單純的return 第三個參數(shù),那么會打印length次,因為內(nèi)部會循環(huán)length次。而forEach則不會返回。

下面來一個forEach的例子

let score = [29,50,62,95,59]

score.forEach(function(x,y){
  console.log(x*2)     // 29, 50, 62, 95, 59  在控制臺上分行顯示
})

console.log(score)  // [29, 50, 62, 95, 59]

forEach方法默認(rèn)不會生成一個新數(shù)組,它是針對數(shù)組進行某項操作,最后的return 的結(jié)果是undefined

但是,也可以稍微改裝一下,讓它和map變成一樣的結(jié)果,也可以間接地返回一個數(shù)組,但是仍然是有區(qū)別的

let score = [29,50,62,95,59]
let c = []
score.forEach(function(x,y){
  c.push(x * 2)
})

console.log(c)  // [58, 100, 124, 190, 118]
  1. filter
    和map類似,return 一個結(jié)果,返回符合這個結(jié)果的所有值
  var arr = [1,2,32,23,4,2,2,2]
  var c = arr.filter(function(x,y){
    return x % 2 == 0
  })
  console.log(c)  // [1, 32, 4, 2] 

filter本身有過濾的意思,它只會返回符合條件的結(jié)果,并且把這個結(jié)果扔進一個數(shù)組

  1. reduce
var arr = [1,2,3,1,2,2,2,1,2]
console.log(arr.reduce(function(x,y){
  return x +y
},0))  // 16

reduce會在函數(shù)后再跟一個參數(shù),默認(rèn)從這個參數(shù)開始計算,用來接收每次遍歷計算出來的結(jié)果,上面的結(jié)果是表示從0開始,計算arr這個數(shù)組的和。如果return是用來計算乘法的,后面就用1來接收;也可以一個用空數(shù)組來接收。y代表當(dāng)前值,x代表之前的一個值、一般都是代表用來做每次遍歷接收值用的數(shù)。

上面的代碼全部都是用x和y之類的作為變量名,把他們都換一個名字,就比較好理解了。

var arr = [1,2,3]
let a = arr.reduce(function(temp,item,index){
  return temp + item
},0)
console.log(a)

reduce里面的函數(shù)有三個參數(shù),第一個參數(shù)是運算時的中間變量,第二個參數(shù)是數(shù)組里面的value,第三個是數(shù)組的下標(biāo)。

在運算時,內(nèi)部會像一個遞歸一樣,執(zhí)行多次,temp的初始值默認(rèn)是undefined,也可以給它一個初始值,就像上例一樣,在初始值處給它0,后面就遞歸的完成temp = temp + item的計算,計算完成后temp被返回出去。

比喻一下,范偉在打劫的時候,手上會拿一個袋子,這時候他說:“打打打打打... 劫,ip 、ic 、IQ卡,統(tǒng)統(tǒng)告訴我密碼”,然后,他就拿著這個袋子去收東西,這個袋子,就是中間變量temp,默認(rèn)里面是沒有的(undefined),當(dāng)然,范偉也可能會把自己的錢包放里面(函數(shù)后面再給一個數(shù)),范偉會往車廂里面走,別人的卡會依次被他收進袋子里面,收到最后最后一個人,就是最終范偉打劫所得的財產(chǎn)

再練習(xí)一個reduce
求下面這個數(shù)組里面奇數(shù)的和
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
如下:

let arr2 = arr1.reduce(function(temp, value){
  if(value % 2 === 1){
    temp = temp + value
  }
  return temp
})

值得一提的是 ,但我這樣寫的時候:

let arr2 = arr1.reduce(function(temp, value){
  if(value % 2 === 1){
    temp = temp + value
    return temp
  }
})

得出的結(jié)果是 NaN,后來才想明白,如果只在符合條件的時候return temp,那么這個函數(shù)會在不符合條件的時候默認(rèn)添加一個 return undefined,undefined 和 前面 temp里面的數(shù)字相加,就會得出NaN的結(jié)果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容