本系列使用 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)

不过我们分析代码主要还是学知识的，让我们来看看这几十行代码里有没有什么有趣的东西。

加号的奇妙使用

我在看过的一些源码中使用了相同的方法，这个加号的意义大家都知道吗？

加号其实是返回对象的数字表达式,大家可以试试下面这段代码

+(new Date())   // 1513429205460 (时间戳，结果可能不同)
+'3'            // 3

我之前见过的基本都是加号和Date对象组合来用，可以快速拿到时间戳进行运算。

其实加号还有一个奇妙的使用

+function() { console.log("Foo!"); }();

它强制语法分析器(parser)把加号后面的部分当作一个表达式(expression)，这个也可以用在立即执行函数(IIFE)里面。当然加号并不是唯一的选择，-、!、~等单目操作符(unary operator)其实都可以，所以我们经常看到下面这种立即执行函数

!function(){/* code */}();

全等于自己

其实这个应该挺常见的

var notANumber = +'keke'
notANumber === notANumber // false

只有NaN不全等于自己，这个也可以用来判断一个变量是不是NaN

本文章来源于午安煎饼计划Web组 - 梁王

每日源码分析 - lodash(clamp.js)

前言

正文