国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

教你認清這8大殺手锏

alin / 3483人閱讀

摘要:但縱使如此,我也要技術這條路上一路走到黑。接下來你想不想一起看下下劃線是怎么實現的。這個迭代傳遞個參數和迭代的或者和最后一個引用的整個是從右側開始組合的元素的函數使用案例我們來看一下上面的執行過程是怎樣的。希望這篇文章對大家有點作用。

前言

underscore.js源碼分析第三篇,前兩篇地址分別是

那些不起眼的小工具?

(void 0)與undefined之間的小九九

本篇原文鏈接

源碼地址

?看了很多篇技術文章,卻依然寫不好前端。

從步入程序猿這個大坑開始到現在,已經看過數不清的技術文章和書籍,有的是零散的知識,有的是系列權威的教程,但為毛還寫不好摯愛的前端,聽說過一句話,這個世界又不是只有你一個人深愛而不得。但縱使如此,我也要技術這條路上一路走到黑。直到天涯迷了路,海角翻了船。

開始

今天想說幾個類似我們平常的工作中經常用到的幾個寶貝,姑且把他叫做殺手锏好了,因為實在是特別好用呀,他們分別是...

each

map

reduce

reduceRight

find

filter

every

some

接下來我們從下劃線underscore.js的視角,一步步看他們的內部運行的原理是什么....

1 _.each(list, iteratee, [context])

遍歷list中的所有元素,按順序用遍歷輸出每個元素,如果傳遞了context,則將iteratee函數中的this綁定到context上。

先來看一下怎么使用

let arr = ["name", "sex"]
let obj = {
  name: "qianlongo",
  sex: "boy"
}

// 不傳入context
// 遍歷數組
_.each(arr, console.log) 
// name 0 (2) ["name", "sex"]
// sex 1 (2) ["name", "sex"]

// 遍歷對象
_.each(obj, console.log)
// qianlongo name {name: "qianlongo", sex: "boy"}
// boy sex  {name: "qianlongo", sex: "boy"}


// 傳入context
_.each(arr, function (val, key, arr) {
  console.log(this[val])
}, obj)
// qianlongo
// boy

可以看出下劃線的each和原生的數組forEach有些類似也有不同的地方

原生的forEach只可以遍歷數組,而下劃線的each還可以遍歷對象。接下來你想不想一起看下下劃線是怎么實現的。come on!!!

源碼

_.each = _.forEach = function(obj, iteratee, context) {
  // 優化遍歷函數iteratee,將iteratee中的this動態設置為context
  iteratee = optimizeCb(iteratee, context); 
  var i, length;
  if (isArrayLike(obj)) { // 如果是類數組類型的obj
    for (i = 0, length = obj.length; i < length; i++) {
      // iteratee接收的三個參數分別是 數組的值,數組的索引,以及數組本身
      iteratee(obj[i], i, obj); 
    }
  } else { // 支持對象類型的數據迭代
    var keys = _.keys(obj); // 拿到obj自身的所有keys
    for (i = 0, length = keys.length; i < length; i++) {
      // iteratee接收的三個參數分別是 obj的屬性值,obj的屬性,obj本身
      iteratee(obj[keys[i]], keys[i], obj);
    }
  }
  return obj; // 最后將obj返回
};

?,其實也沒有那么難理解是吧!開始map函數之旅吧

2 _.map(list, iteratee, [context])

通過iteratee將list中的每個值映射到一個新的數組中(注:產生一個新的數組。y = f(x),類似高中學過的知識,將x通過f()映射為一個新的數

使用案例

let arr = ["qianlongo", "boy"]
let obj = {
  name: "qianlongo",
  sex: "boy"
}

// list是個數組的時候
_.map(arr, (val, index) => {
  return `hello : ${val}`
})
// ["hello : qianlongo", "hello : boy"]

// list是個對象的時候
_.map(obj, (val, key, obj) => {
  return `hello : ${val}`
})
// ["hello : qianlongo", "hello : boy"]

當然還可以傳入第三個參數context,其本質如each一般,也是讓iteratee函數中的this動態設置為context

源碼

 _.map = _.collect = function(obj, iteratee, context) {
  // 可以將這里的內部cb函數理解為綁定iteratee的this到context
  iteratee = cb(iteratee, context);
  // 非類數組對象就獲取obj的keys,這里如果是類數組最后得到的keys為undefined
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length,
      results = Array(length); // 創建一個和obj長度空間一樣的數組
  for (var index = 0; index < length; index++) {
    // 注意這里,keys存在則代表obj是個對象,所以要拿到keys中的值,否則是類數組的話,直接用index索引就好了
    var currentKey = keys ? keys[index] : index;
    // 看到了嗎,這里將iteratee執行后的返回值塞到了results數組中
    results[index] = iteratee(obj[currentKey], currentKey, obj);
  }
  return results; // 最后將映射之后的數組返回
};

通過源碼可以看到map的實現思路

創建一個即將返回的數組

遍歷list(可以為數組也可以為對象),將list的元素輸入到傳進來的iteratee函數中,并將其執行后的返回值填充進數組。這個iteratee負責映射規則

3 _.every(list, [predicate], [context])

當list中的所有的元素都可以通過predicate的檢測,那么結果返回true,否則false

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  name: "qianlongo",
  sex: "boy"
}

let result = _.every(arr, (val, key, arr) => {
  return val > 0
})
// false

let result2 = _.every(obj, (val, key, obj) => {
  return val.indexOf("o") > -1
})
// true

使用起來蠻簡單的,傳入一個謂詞函數(返回值是一個布爾值的函數),最后得到true或者false。

源碼

_.every = _.all = function(obj, predicate, context) {
  // 可以將這里的內部cb函數理解為綁定iteratee的this到context
  predicate = cb(predicate, context);
  // 短路寫法,非類數組則獲取其keys
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length;
  for (var index = 0; index < length; index++) {
    // keys若能轉化為"真" 則說明obj是對象類型
    var currentKey = keys ? keys[index] : index; 
    // 只要有一個不滿足就返回false,中斷迭代
    if (!predicate(obj[currentKey], currentKey, obj)) return false;
  }
  return true; // 否則所有元素都通過判斷返回true
};
4 _.some(list, [predicate], [context])

如果list中有任何一個元素通過 predicate的檢測就返回true。否則返回false,和every恰好有點相反的意思。

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  name: "qianlongo",
  sex: ""
}

let result = _.some(arr, (val, key, arr) => {
  return val > 0
})
// true 因為至少有一個元素 >0

let result2 = _.some(obj, (val, key, obj) => {
  return val.indexOf("o") > -1
})
// true 兩個都包含"o" 當然返回true

源碼中是怎么實現的呢,與every唯一不同的地方在返回true還是falase之處?

源碼

_.some = _.any = function(obj, predicate, context) {
  predicate = cb(predicate, context);
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length;
  for (var index = 0; index < length; index++) {
    var currentKey = keys ? keys[index] : index;
    if (predicate(obj[currentKey], currentKey, obj)) return true; // 只要有一個滿足條件就返回true
  }
  return false; // 所有都不滿足則返回false
};
5 _.find(list, predicate, [context])

遍歷list中的元素,返回第一個通過predicate函數檢測的值。

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  sex: "boy",
  name: "qianlongo"
}
let result = _.find(arr, (val, key, arr) => {
  return val > 0
})
// 3
let result2 = _.find(obj, (val, key, obj) => {
  return val.indexOf("o") > -1
})
// boy

源碼

_.find = _.detect = function(obj, predicate, context) {
  var key;
  if (isArrayLike(obj)) {
    // 當傳入的是類數組的時候,調用findIndex方法,結果是>= -1的數組
    key = _.findIndex(obj, predicate, context);
  } else {
    // 當傳入的是一個對象的時候,調用findKey,結果是一個字符串屬性或者undefined
    key = _.findKey(obj, predicate, context);
  }
  // 返回符合條件的value,否則沒有返回值,即默認的undefined
  if (key !== void 0 && key !== -1) return obj[key]; 
};

_.findIndex_.findKey在后面會一一分析,目前理解find函數知道他們怎么用就好。

6 _.filter(list, predicate, [context])

遍歷list,返回包含所有通過predicate檢測的元素(結果是個數組)

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  sex: "boy",
  name: "qianlongo",
  age: 100
}
let result = _.filter(arr, (val, key, arr) => {
  return val > 0
})
// [3, 6, 9]
let result2 = _.filter(obj, (val, key, obj) => {
  return `${val}`.indexOf("o") > -1 // 使用模板字符串是防止100沒有indexOf方法而報錯
})
// ["boy", "qianlongo"]

聰明的你是不是已經想到了源碼是怎么實現的了 ?

源碼

_.filter = _.select = function(obj, predicate, context) {
  var results = [];
  // 綁定predicate的this作用域到context
  predicate = cb(predicate, context);
  // 用each方法對obj進行遍歷
  _.each(obj, function(value, index, list) {
    // 符合predicate過濾條件的,就把對應的值塞到results數組中
    if (predicate(value, index, list)) results.push(value);
  });
  return results; // 最后返回
};

最后是reduce和reduceRight,兩個相對來說更難一些的api,雖然已經過了12點了,手動困乏?, 我們咬咬牙堅持一下,把最后兩個說完

7 _.reduce(list, iteratee, [memo], [context]),

別名為 inject 和 foldl, reduce方法把list中元素歸結為一個多帶帶的數值。Memo是reduce函數的初始值,reduce的每一步都需要由iteratee返回。這個迭代傳遞4個參數:memo, value 和 迭代的index(或者 key)和最后一個引用的整個 list

8 _.reduceRight(list, iteratee, memo, [context])

reducRight是從右側開始組合的元素的reduce函數

使用案例

var arr = [0, 1, 2, 3, 4, 5],
  sum = _.reduce(arr, (init, cur, i, arr) => {
    return init + cur;
  });    
  
  // 15

我們來看一下上面的執行過程是怎樣的。

第一回合

// 因為initialValue沒有傳入所以回調函數的第一個參數為數組的第一項
init = 0;
cur = 1;
=> init + cur = 1;

第二回合

init = 1;
cur = 2;
=> init + cur = 3;

第三回合

init = 3;
cur = 3;
=> init + cur = 6;

第四回合

init = 6;
cur = 4;
=> init + cur = 10;

第五回合

init = 10;
cur = 5;
=> init + cur = 15;

?媽媽啊,終于執行完了,這么多回合才結束,哪像人家格斗高手瞬間就把太極大師整掛了

知道了一步步執行流程,我們來看下源碼到底是怎么實現的。

源碼

// 源碼還是通過調用createReduce生成的,所以主要是看createReduce這個函數
_.reduce = _.foldl = _.inject = createReduce(1);

這尼瑪看起來好嚇人啊,不怕,我們一點點來分析

function createReduce(dir) {
    // Optimized iterator function as using arguments.length
    // in the main function will deoptimize the, see #1991.
    function iterator(obj, iteratee, memo, keys, index, length) { // 真正執行迭代的地方
      for (; index >= 0 && index < length; index += dir) {
        var currentKey = keys ? keys[index] : index; // 如果keys存在則認為是obj形式的參數,所以讀取keys中的屬性值,否則類數組只需要讀取索引index即可
        memo = iteratee(memo, obj[currentKey], currentKey, obj); // 接著就是執行外部傳入的回調了,并將結果賦值為memo,也就是我們最后要到的值
      }
      return memo;
    }

    return function(obj, iteratee, memo, context) {
      iteratee = optimizeCb(iteratee, context, 4); // 首先綁定一下this作用域
      var keys = !isArrayLike(obj) && _.keys(obj), // 如果不是類數組就讀取其keys
          length = (keys || obj).length,
          index = dir > 0 ? 0 : length - 1; // 默認開始迭代的位置,從左邊第一個開始還是右邊第一個
      // Determine the initial value if none is provided.
      if (arguments.length < 3) { // 如果沒有傳入初始化值,則將第一個值(左邊第一個或者右邊第一個)作為初始值
        memo = obj[keys ? keys[index] : index];
        index += dir; // 從索引為1開始或者索引為length - 2開始迭代
      }
      return iterator(obj, iteratee, memo, keys, index, length); // 接著開始進入自定義的迭代函數,請往上看
    };
  }
結語

夜深人靜,有點困乏了。希望這篇文章對大家有點作用。如果對前幾篇源碼分析的文章感興趣,歡迎前往頂部地址查看

不介意的話,在文章開頭的源碼地址那里點一個小星星吧?

不介意的話,在文章開頭的源碼地址那里點一個小星星吧?

不介意的話,在文章開頭的源碼地址那里點一個小星星吧?

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91721.html

相關文章

  • 教你認清8手锏

    摘要:但縱使如此,我也要技術這條路上一路走到黑。接下來你想不想一起看下下劃線是怎么實現的。這個迭代傳遞個參數和迭代的或者和最后一個引用的整個是從右側開始組合的元素的函數使用案例我們來看一下上面的執行過程是怎樣的。希望這篇文章對大家有點作用。 前言 underscore.js源碼分析第三篇,前兩篇地址分別是 那些不起眼的小工具? (void 0)與undefined之間的小九九 本篇原文鏈接 ...

    Elle 評論0 收藏0
  • 教你認清8手锏

    摘要:但縱使如此,我也要技術這條路上一路走到黑。接下來你想不想一起看下下劃線是怎么實現的。這個迭代傳遞個參數和迭代的或者和最后一個引用的整個是從右側開始組合的元素的函數使用案例我們來看一下上面的執行過程是怎樣的。希望這篇文章對大家有點作用。 前言 underscore.js源碼分析第三篇,前兩篇地址分別是 那些不起眼的小工具? (void 0)與undefined之間的小九九 本篇原文鏈接 ...

    Winer 評論0 收藏0
  • 悄悄地說一個bug

    摘要:客觀別急,今天真的是要說一個,也許你早已知曉,也許你時常躺槍于他手,悄悄地,我們慢慢開始。使用案例源碼用到了前面已經寫好的函數,所以認為獲取的屬性值,不包括原型返回一個副本,使其鍵和值對換。 前言 underscore.js源碼分析第四篇,前三篇地址分別是,如果你對這個系列感興趣,歡迎點擊watch,隨時關注動態。 教你認清這8大殺手锏 那些不起眼的小工具? (void 0)與unde...

    layman 評論0 收藏0
  • 當我們在說“并發、多線程”,說的是什么?

    摘要:兜底任務,處理數據不一致狀態的任務。什么是多線程多線程是并發的一種重要形式。通過具體的多線程問題引出多線程編程中的關鍵點和對應的工具與知識點,輕松學會多線程編程。 這篇文章的目的并不是想教你如何造火箭(面試造火箭,工作擰螺絲),而是想通過對原理和應用案例的有限度剖析來協助你構建起并發的思維,并將操作系統的理論知識與工程實踐結合起來,貫穿從學到會的全過程。當然,雖然我們是從實用角度出發,...

    sf_wangchong 評論0 收藏0
  • FCC 成都社區·前端周刊 第 9 期

    摘要:詳情行人臉識別庫是僅行代碼的人臉識別庫,最小只有。詳情開發大型應用這是根據上發表的演講整理的文章,分享了作者在開發大型應用后的一些心得。詳情每周一同步更新到歡迎 1. Node.js 10 將帶來什么? Node.js 10 的第一個版本將于本周二(4 月 24 日)發布,并將在 10 月份推出 LTS 版本,將帶來哪些更新? N-API,持續 HTTP/2 支持,ECMAScript...

    kid143 評論0 收藏0

發表評論

0條評論

alin

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<