一段JS的Array評測之旅(休閒娛樂划水伴侶)

前言

當清晨的第一縷陽光，映照在我臉龐。猶如一雙飽含溫情的手撫摸着撫摸着，我便起了牀。雨水洗刷過的街道，瀰漫着沁人心脾的清香。 街邊早餐鋪的油條在鍋中滋滋發出聲響，我知道這根熱氣騰騰新鮮出爐的油條，過一下子將會去到下一個地方。我三兩口就送它去了（就像B站美食up主徐大sao在重慶時的狠話二兩面我兩口就吃完了）我便來到了早晨的第一個打卡點，地鐵站🚞。車箱內真是人山人海挨肩擦背一點都不誇張，有時停站耳邊也會傳來工做人員的吶喊聲（擠嘛，這兒還能夠qi一個）下了車也是人頭攢動步履艱辛。在車箱裏結伴同行的人不多，你們都習慣低着頭看着手機這讓我想起了一句話擡頭看見夢想，低頭卻遇見了現實我也閉上了雙眼開始陷入沉思🤔，JS的數組api中屬於遍歷的有不少，它們各司其職。可是真正的使用場景是什麼？哪個在場景中性能更高，更快？便有了下文。

有看面試相關的小夥伴能夠瀏覽下好朋友正在火熱籌劃中的 面試彙總庫💪

若文章中的解答有誤，但願可以獲得小夥伴們的指正與諒解。但願能和你來一場知識的碰撞。

在計算以前，我須要一個計算運行時間函數,和一個實驗測試數組arr

function calcTime (func) {
 let start = new Date().getTime(); //開始時間
 func();                           //執行待測函數
 var end = new Date().getTime();   //結束時間
 return (end - start)+ "ms";       //返回函數執行須要時間
}

let arr = []                    // 建立一個我須要的測試數據
for(let i=0;i<1000000;i++) {
  arr.push(i)
}
複製代碼

Array 遍歷API

find()

find() 方法返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。

我如今有一個需求，從一個數組中，找出指定項。

// 使用find前
function foo(){
  for(let i=0;i<arr.length;i++){
    if(arr[i] === 50000) return;
  }
}
//使用find後
function findFoo(){
  arr.find( item => item === 50000)
}
calcTime(foo)    // 16ms 
calcTime(findFoo)   // 1ms  find更優
複製代碼

本次實驗環境是在JSBin保證了環境相同，設備相同，情景相同,全部實驗結果都會會根據你的電腦性能給出不一樣值。因此不要考慮絕對值，參考點是在相對值👆。

forEach,map

forEach() 方法對數組的每一個元素執行一次提供的函數。

map() 方法建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。

爲了不JSBin崩潰，本次arr長度爲1w

function foo(){
  for(let i=0;i<arr.length;i++){
    for(let j=0;j<arr.length;j++){}
  }
}
// 使用forEach
function foreachFoo(){
  arr.forEach(()=>{
    arr.forEach(()=>{})
  })
}
// 使用map
function fooMap(){
  arr.map(()=>{
    arr.map(()=>{})
  })
}
calcTime(foo)           // 39ms 
calcTime(foreachFoo)    // 649ms 
calcTime(foreachMap)    // 699ms  for()更優
複製代碼

filter

filter() 方法建立一個新數組, 其包含經過所提供函數實現的測試的全部元素。本次arr長度10w

function foo(){
    let newArr =[]
  for(let i=0;i<arr.length;i++){
    if(arr[i]>=50000){
      newArr.push(arr[i])
    }
  }
}
// 使用filter
function filterFoo(){
  letnewArr = arr.filter(item=> item>=50000 )
}

calcTime(foo)           // 59ms 
calcTime(filterFoo)    // 4ms    filter更優 
複製代碼

reduce

reduce() 方法對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。

function foo(){
  let sum = 0
  for(let i=0;i<arr.length;i++){
    sum = sum + arr[i]
  }
}
// 使用reduce
function reduceFoo(){
  arr.reduce((sum,item)=>sum +item)
}

calcTime(foo)           // 57ms
calcTime(reduceFoo)     // 4ms  reduce更優
複製代碼

經過簡單的幾個對比，能夠知道數組中創造filter,find,reduce都是有目的。仍是俗話說的好，術業有專攻。咱們做爲開發者首先應該知道每一個api的做用，而後考慮本身的業務場景選擇最佳的方法。 舉個🌰

前天看到一位掘友發的一個沸點

之前的寫法：

iconFliter(num){
    if(num>0 && nun<=30){
      return 'normal'     
    }
    if(num>30 && nun<=100){
      return 'orange'
    }
    if(num>100 && nun<=250){
      return 'yellow'     
    }
    if(num>250){
        return 'red'
    }
複製代碼

這樣寫並無問題，可是咱們能夠仔細思考下，咱們能夠借用現有的數據結構(對象,數組)他們的特色來完成，以下

// 業務中獨立的變量轉化成數組和對象結構
let datas = [{time:30,color:'normal'},{time:100,color:'orange'},{time:250,color:'yellow'}]

// 再經過高效的api進行處理
function iconFilter(num,data) {
	if (num<0) return 
   	let selectData =  data.find(item => num <= item.time)
   	return selectData ? selectData.color:'red' 
}
複製代碼

只要多思考，代碼確定會越寫越好。

數組總結

返回Boolean的方法

方法名	描述
some	檢測數組元素中是否有元素符合指定條件
every	檢測數值元素的每一個元素是否都符合條件。
includes	判斷一個數組是否包含一個指定的值。

修改原數組的方法(面試中常常被問起)

方法名	描述
push	向數組的末尾添加一個或更多元素，並返回新的長度
pop	刪除數組的最後一個元素並返回刪除的元素
unshift	向數組的開頭添加一個或更多元素，並返回新的長度
shift	刪除並返回數組的第一個元素
reverse	反轉數組的元素順序
splice	從數組中添加或刪除元素
sort	對數組的元素進行排序

剩下的方法就是不改變原數組的方法

一道題

平時業務中常常會對後端小夥伴返回的數組對象進行處理，此時我須要將citizenship(國籍)爲china的對象屬性name換成chineseName,新增一個屬性location值爲Asian，國籍爲america也要進行操做，你會怎麼作？以下所示嗎？平時你就是這種寫的嗎？

let datas = [{name:'張大娃',age:19,sex:'boy',citizenship:'china'},
        {name:'張老二',age:35,sex:'boy',citizenship:'china'}，
        {name:'趙二娃',age:21,sex:'boy',citizenship:'china'},···]
datas.forEach(item=>{
    if(item.citizenship === 'china'){
        item.chineseName = item.name
        item.location = 'Asian'
    }else if (item.citizenship === 'America') {
        item.americaName = item.name
        item.location = 'northAmerica'
    }
})
複製代碼

但願你能幫我優化一下上面的代碼

立刻就要打下班卡領取週末了，祝你們週末愉快每天開💓