首頁猿問 Javascript中的array...

Javascript中的array.reduce的問題及一個奇怪的拋出異常

JavaScript

天涯盡頭無女友 2018-09-18 09:13:43

今天看到javascript的函數式編程的一篇文章，講的是用reduce這個函數統計一個字符串中各字母出現的次數，代碼如下：`var res = str.split('').reduce((pre, cur) => (pre[cur]++ || (pre[cur] = 1), pre), {})`然后我不知道上式中箭頭函數的右邊部分中的pre是什么意思，箭頭函數右邊不就是要返回的表達式嗎，為什么上面上面的式子里面還多了個pre？然后我試著改寫了一下：var res = str.split('') .reduce(function(pre,cur){ console.log(pre) ; console.log(cur) ; if( pre[cur] === 1) { pre[cur]++; } else pre[cur] = 1; }, {});結果報錯為：if( pre[cur] === 1) ^ TypeError: Cannot read property 'd' of undefined為什么會報這樣的錯？誰能回答下這兩個問題嗎？？感激不盡。百度谷歌了好久都找不到答案。。

查看完整描述

1 回答

胡子哥哥

TA貢獻1825條經驗獲得超6個贊

先改寫一下，讓你看得清楚些。

const str = 'ddd'const initialVal = {}let res = str.split('').reduce((pre, cur) => (pre[cur]++ || (pre[cur] = 1), pre), initialVal)

語法上的`confusion`

可以繁寫為：

(pre, cur) => {  return pre[cur]++ || (pre[cur] = 1), pre}

形如 return 1, 3, 4 總是返回最后一個合法的值。

這里用這種偏門寫法主要是為了能在一行中寫完，使其既執行語句，還能返回值pre，供給下一次遍歷消費。

算是片面追求短小。

加了注釋的ES5寫法

var str = 'ddd';// cache 是 reduce 函數進行累加操作時候的初始值。// 在這里，它主要用來緩存字符串中出現的字符和它們的出現次數。
// 遍歷結束后，它的結構可能是 { d: 3 } 。var cache = {};var res = str.split('').reduce(function (pre, cur) {  
// pre 是一個 plain Object, 初始值為 cache ，可能形如 { d: 1 }。
  // 而 cur 是當前遍歷到的字符，可能為 d。
  var cachedTimes = pre[cur]; // 所以這一步是在向buffer（緩存）中詢問，是否已經緩存過 d，并且得到它的次數。

  if (cachedTimes) { 
    pre[cur] += 1; // 如果有值，說明已經緩存過，加上這次訪問，其次數應該 + 1
  } else {
    pre[cur] = 1; // 如果為undefined，說明沒有緩存過，在緩存中注冊一下，次數為1
  }  return pre; // 把修改后的 pre 傳給下一次遍歷消費。}, cache);

在js中，使用cache表來緩存遍歷次數是一個常見的優化辦法。因為js中訪問屬性是很快的。

你改寫的函數的錯誤之處

額，其實講到這里你應該很明白了。然而你的reduce的回調函數體中并沒有返回累計結果，傳給下一次遍歷。所以第二次遍歷時，pre為undefined。
你的str中第二個字符估計是d，undefined.d當然報錯啦。

PS 這種寫法會更優雅嗎？

反對回復 2018-10-21

1 回答
0 關注
853 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript中的array.reduce的問題及一個奇怪的拋出異常

Javascript中的array.reduce的問題及一個奇怪的拋出異常

1 回答

語法上的confusion

你改寫的函數的錯誤之處

添加回答

語法上的`confusion`