每日原始碼分析 - lodash(clamp.js)

樑王發表於2017-12-18
原始碼LAMPJS

本系列使用 lodash 4.17.4

前言

本檔案無對引用其他檔案的引用

正文

/**
 * Clamps `number` within the inclusive `lower` and `upper` bounds.
 *
 * @since 4.0.0
 * @category Number
 * @param {number} number The number to clamp.
 * @param {number} lower The lower bound.
 * @param {number} upper The upper bound.
 * @returns {number} Returns the clamped number.
 * @example
 *
 * clamp(-10, -5, 5)
 * // => -5
 *
 * clamp(10, -5, 5)
 * // => 5
 */
function clamp(number, lower, upper) {
  number = +number
  lower = +lower
  upper = +upper
  lower = lower === lower ? lower : 0
  upper = upper === upper ? upper : 0
  if (number === number) {
    number = number <= upper ? number : upper
    number = number >= lower ? number : lower
  }
  return number
}

export default clamp
複製程式碼

使用方式

// clamp函式的使用
// A low life whose power level is only 5
var me = {
    powerLevel:5
}

me.drinkElixirOfWrath = function() {
    this.powerLevel += 30
}
me.drinkElixirOfWrath() // I am now full of power!

// Hey, you are not allowed to be a monster after the founding of new China
me.powerLevel = clamp(me.powerLevel, null, 10)   // Aww

me.powerLevel // 10
複製程式碼

使用場景

我儘量總結一下clamp函式實際的應用場景

1. 輸入框移除裁剪

var height = 180  // centimeter

// after input
height = 500

height = clamp(height, null, 270)
複製程式碼

2. ...

好吧其實我感覺使用的地方挺多的，但我一下沒想到具體的使用，請實際在專案中有用過或者有想法的人在評論區告知我，感激不盡。

原始碼分析

其實ES 2017的Math擴充套件裡面已經有了原生的實現了。點我檢視

Math.clamp(x, lower, upper)
複製程式碼

不過我們分析程式碼主要還是學知識的，讓我們來看看這幾十行程式碼裡有沒有什麼有趣的東西。

加號的奇妙使用

每日原始碼分析 - lodash(clamp.js)
我在看過的一些原始碼中使用了相同的方法，這個加號的意義大家都知道嗎？

加號其實是返回物件的數字表示式,大家可以試試下面這段程式碼

+(new Date())   // 1513429205460 (時間戳，結果可能不同)
+'3'            // 3
複製程式碼

我之前見過的基本都是加號和Date物件組合來用，可以快速拿到時間戳進行運算。

其實加號還有一個奇妙的使用

+function() { console.log("Foo!"); }();
複製程式碼

它強制語法分析器(parser)把加號後面的部分當作一個表示式(expression)，這個也可以用在立即執行函式(IIFE)裡面。 當然加號並不是唯一的選擇，-、!、~等單目操作符(unary operator)其實都可以，所以我們經常看到下面這種立即執行函式

!function(){/* code */}();
複製程式碼

全等於自己

每日原始碼分析 - lodash(clamp.js)
其實這個應該挺常見的

var notANumber = +'keke'
notANumber === notANumber // false
複製程式碼

只有NaN不全等於自己，這個也可以用來判斷一個變數是不是NaN

本文章來源於午安煎餅計劃Web組 - 樑王

相關文章