[[419162]]

本文轉載自微信公眾號「前端發(fā)現(xiàn)」，作者前端發(fā)現(xiàn)者。轉載本文請聯(lián)系前端發(fā)現(xiàn)公眾號。

說到處理數(shù)組的方法，想必大家都不陌生了，今天我們一起來學習下理數(shù)組常見場景下的方法。

首先來看看 reduce 方法可以傳入哪些參數(shù)

function(pre,cur,index,arr) 

• pre:必需，初始值或計算結束后的返回值
• cur:非必需，當前處理的元素
• index:非必需，當前處理元素的索引
• arr:非必需，當前元素所屬的數(shù)組對象

直接看看

const list = [1,2,3,4,5] 
const result = list.reduce(function (pre, cur, index, arr) { 
  console.log('pre:' + pre, 'cur:' + cur, 'index:' + index) 
  return pre + cur 
}) 
console.log(result) 
 
// => pre:1 cur:2 index:1 
// => pre:3 cur:3 index:2 
// => pre:6 cur:4 index:3 
// => pre:10 cur:5 index:4 
// => 15 

可以看到，第一輪pre的值是數(shù)組的第一個值，然后當前處理元素直接是元素的第二個數(shù)據(jù)，索引是數(shù)組的1。第二輪的pre就是第一次邏輯處理 return pre + cur 返回的結果(即3)。以此類推...共循環(huán)4輪。

再來看個相乘的處理邏輯的:

const list = [1,2,3,4,5] 
const result = list.reduce(function (pre, cur, index, arr) { 
  console.log('pre:' + pre, 'cur:' + cur, 'index:' + index) 
  return pre * cur 
}) 
console.log(result) 
 
// => pre:1 cur:2 index:1 
// => pre:2 cur:3 index:2 
// => pre:6 cur:4 index:3 
// => pre:24 cur:5 index:4 
// => 120 

看著這么復雜，能舉個再簡單的例子嗎?別問，問就是有!

const result = list.reduce((pre, cur) => pre + cur) 
console.log(result) // => 15 

簡單后再來個高級點的嘗鮮下。

數(shù)組去重

將數(shù)組傳輸之前，我們先來了解下 reduce 的另外一個，即 initialValue。它是代表傳遞給函數(shù)的初始值，「可以理解為給pre設置了默認的值」。

const list = [1,1,3,5,5,7,9] 
let arr = list.reduce((pre,cur)=>{ 
  if(!pre.includes(cur)){ 
    return pre.concat(cur) 
  }else{ 
    return pre 
  } 
},[]) // => 給pre設置默認的空數(shù)組[] 
console.log(arr) // => [1, 3, 5, 7, 9] 

可以看到list數(shù)組的長度為7，共循環(huán)7次(設置默認的空數(shù)組，導致cur第一輪是數(shù)組的第一個數(shù)據(jù))。每循環(huán)一次就判斷pre數(shù)組里存不存在當前循環(huán)的元素，若不存在則加入到pre數(shù)組去，否則就直接退出當前循環(huán)。

數(shù)組二維轉一維

let arr = [1,2,[4, 6], [1, 6], [2, 2]] 
let newArr = arr.reduce((pre,cur)=>{ 
  return pre.concat(cur) 
},[]) 
console.log(newArr) // => [1, 2, 4, 6, 1, 6, 2, 2] 

這里其實也就是利用了數(shù)組的 concat 方法，跟上面的使用也是大同小異，理順一下就可以理解的了。

數(shù)組多維轉一維

let arr = [1, 2, [4, 6], [1, 6, [3, 6]], [1, [3, 4, [1, 2]], [2, 2]]] 
const newArr = (arr) => { 
  return arr.reduce((pre, cur) => { 
    return pre.concat(Array.isArray(cur) ? newArr(cur) : cur) 
  }, []) 
} 
console.log(newArr(arr)) // => [1, 2, 4, 6, 1, 6, 3, 6, 1, 3, 4, 1, 2, 2, 2] 

這里使用了 三目運算 、 concat 數(shù)據(jù)拼接 、遞歸 的思路完成。先判斷當前處理的元素(有可能是數(shù)組)是不是數(shù)組(Array.isArray(cur)),如果是再次執(zhí)行newArr,否則就直接處理當前元素，即將cur拼接進之前處理的數(shù)組中。

計算元素出現(xiàn)個數(shù)

講解這個之前我們先來回憶下for...in的用法:

for...in 聲明用于對數(shù)組或者對象的屬性進行循環(huán)/迭代操作。

直接上

var arr = ['張三','李四','王五']     
for (let x in arr)   
{   
  console.log(x) 
  // => 張三 
  // => 李四 
  // => 王五 
}   

可以看到當arr為數(shù)組時 x 相當于 for 循環(huán)的?? 標

那當arr為對象呢?

const obj = {   
  name: "張三",   
  age: 18,   
  height: "180"   
}   
for(let key in obj){   
  console.log(key)  
  // => name 
  // => age 
  // => height 
}   

可以看到當循環(huán)的“對象”是對象時，循環(huán)的單項就是對象的屬性。

所以我們可以根據(jù)這個特性來判斷對象是否為數(shù)組/對象的元素/屬性。

// 數(shù)組時判斷下標 
let arr = ["a","b","2","3"]  
console.log("b" in arr) // => false 
console.log(2 in arr) // => true 
 
// 對象時判斷屬性 
let obj = {a:"a",b:"b",c:"2",d:"3"}  
console.log("b" in obj) // => true 
console.log(2 in obj) // => false 

好的，回憶完這些知識，我們來看看怎么完成這個需求

let names = ['張三', '李四', '張三', '王五', '王五', '王五'] 
let total = names.reduce((pre,cur)=>{ 
  if(cur in pre){ 
    pre[cur]++ 
    console.log("判斷為真:") 
    console.log(pre) 
  }else{ 
    pre[cur] = 1 
    console.log("判斷為假:") 
    console.log(pre) 
  } 
  return pre 
},{}) 
console.log(total); // => {張三: 2, 李四: 1, 王五: 3} 

首先先傳入一個{}對象，說明初始的pre為{}。那么第一輪判斷if的時候就變成 '張三' in {} 很明顯此時判斷條件是 false 。所以就執(zhí)行 else 里面的邏輯后變成:{'張三':1}。第二輪時 李四 也是如此。當?shù)谌啎r再次遇到“張三”,此時對象是 {'張三':1,'李四':1} ,所以if判斷是 true ,所以張三直接+1。來看看打印情況:

判斷為假: 
// => {張三: 1} 
判斷為假: 
// => {張三: 1, 李四: 1} 
判斷為真: 
// => {張三: 2, 李四: 1} 
判斷為假: 
// => {張三: 2, 李四: 1, 王五: 1} 
判斷為真: 
// => {張三: 2, 李四: 1, 王五: 2} 
判斷為真: 
// => {張三: 2, 李四: 1, 王五: 3} 

屬性求和

const list = [ 
  { 
    name: '張三', 
    age: 18 
  }, 
  { 
    name: '李四', 
    age: 20 
  }, 
  { 
    name: '王五', 
    age: 22 
  } 
] 
let total = list.reduce((pre, cur) => { 
  console.log(cur)  
  // => {name: '張三', age: 18} 
  // => {name: '李四', age: 20} 
  // => {name: '王五', age: 22} 
  return cur.age + pre 
}, 0) 
console.log(total) // => 60 

如此是不是省了使用 map 去求和呢?更簡便可以這么寫:

let total = list.reduce((pre, cur) => cur.age + pre, 0) 

到此，今日的前端發(fā)現(xiàn)知識分享就到此結束了。