第 50 题：实现 (5).add(3).minus(2) 功能 #88

LiuMengzhou · 2019-04-08T17:12:13Z

Number.prototype.add = function(n) {
  return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
  return this.valueOf() - n;
};

zeroone001 · 2019-04-08T23:23:12Z

Number.prototype.add = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this + number;
};
Number.prototype.minus = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this - number;
};
console.log((5).add(3).minus(2));

扩展

Object.prototype.add
Object.prototype.minus

也是可以的

yeyi361936738 · 2019-04-09T00:31:29Z

Number.prototype.add =  function(n){
  return this + n
}
Number.prototype.minus =  function(n){
  return this - n
}
console.log((5).add(3).minus(2))//6

jjeejj · 2019-04-09T01:47:49Z

Number.prototype.add = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this + number;
};
Number.prototype.minus = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this - number;
};
console.log((5).add(3).minus(2));

扩展

Object.prototype.add
Object.prototype.minus

也是可以的

这个方法，可以扩展到数字字符串类型和排除 NaN 值

Number.prototype.add = function (value) {
    let  number = parseFloat(value);
    if (typeof number !== 'number' || Number.isNaN(number)) {
        throw new Error('请输入数字或者数字字符串～');
    };
    return this + number;
};
Number.prototype.minus = function (value) {
    let  number = parseFloat(value);
    if (typeof number !== 'number' || Number.isNaN(number)) {
        throw new Error('请输入数字或者数字字符串～');
    }
    return this - number;
};
console.log((5).add(3).minus(2));

对于在 Object 上添加原型方法是不建议的，因为这个影响太大，会影响所有以Object 构造的对象

noctiomg · 2019-04-09T01:52:00Z

首先看到题干第一反应和楼上几位一样，链式操作+给Number/Object对象添加方法。

Number.prototype.add = function(i=0){
	return this.valueOf()+i
}
Number.prototype.minus = function(i=0){
	return this.valueOf()-i
}

不知道是否是考虑的不周全，就仔细想想，感觉会有一些好玩的知识点在里面，就做了一些小实验。
在 Chrome 的 DevTools 里，我们可以做这个实验：

这里问题就来了——JS的经典的浮点数陷阱。
在简单地搜索之后，我在 GitHub 上搜到了一位阿里大佬的解法，然后参考了一下他的解法和楼上大佬们的解法，对我上面的答案进行了如下修正：

Number.MAX_SAFE_DIGITS = Number.MAX_SAFE_INTEGER.toString().length-2
Number.prototype.digits = function(){
	let result = (this.valueOf().toString().split('.')[1] || '').length
	return result > Number.MAX_SAFE_DIGITS ? Number.MAX_SAFE_DIGITS : result
}
Number.prototype.add = function(i=0){
	if (typeof i !== 'number') {
        	throw new Error('请输入正确的数字');
    	}
	const v = this.valueOf();
	const thisDigits = this.digits();
	const iDigits = i.digits();
	const baseNum = Math.pow(10, Math.max(thisDigits, iDigits));
	const result = (v * baseNum + i * baseNum) / baseNum;
	if(result>0){ return result > Number.MAX_SAFE_INTEGER ? Number.MAX_SAFE_INTEGER : result }
	else{ return result < Number.MIN_SAFE_INTEGER ? Number.MIN_SAFE_INTEGER : result }
}
Number.prototype.minus = function(i=0){
	if (typeof i !== 'number') {
        	throw new Error('请输入正确的数字');
    	}
	const v = this.valueOf();
	const thisDigits = this.digits();
	const iDigits = i.digits();
	const baseNum = Math.pow(10, Math.max(thisDigits, iDigits));
	const result = (v * baseNum - i * baseNum) / baseNum;
	if(result>0){ return result > Number.MAX_SAFE_INTEGER ? Number.MAX_SAFE_INTEGER : result }
	else{ return result < Number.MIN_SAFE_INTEGER ? Number.MIN_SAFE_INTEGER : result }
}

【大数加减：直接通过 Number 原生的安全极值来进行判断，超出则直接取安全极值】
【超级多位数的小数加减：取JS安全极值位数-2作为最高兼容小数位数】

这样就能相对比较完善地解决这个问题了~希望大家多多补充

hqzh · 2019-04-09T13:35:12Z

Number.prototype.add = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this + number;
};
Number.prototype.minus = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this - number;
};
console.log((5).add(3).minus(2));

扩展

Object.prototype.add
Object.prototype.minus

也是可以的

这个方法，可以扩展到数字字符串类型和排除 NaN 值

Number.prototype.add = function (value) {
    let  number = parseFloat(value);
    if (typeof number !== 'number' || Number.isNaN(number)) {
        throw new Error('请输入数字或者数字字符串～');
    };
    return this + number;
};
Number.prototype.minus = function (value) {
    let  number = parseFloat(value);
    if (typeof number !== 'number' || Number.isNaN(number)) {
        throw new Error('请输入数字或者数字字符串～');
    }
    return this - number;
};
console.log((5).add(3).minus(2));

对于在 Object 上添加原型方法是不建议的，因为这个影响太大，会影响所有以Object 构造的对象

function MyNumber(){
MyNumber.prototype= new Number().__proto__
MyNumber.prototype.add =  function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this + number;
};
}

pengcc · 2019-04-09T15:39:22Z

// 辅助函数当然也可以写到方法里去，但是要重复写
// get decimal places
const getDeimalPlaces = (num) => {
	const _num = parseFloat(num);
	if (Number.isNaN(_num)) {
		throw('This is not a Number!');
	}
	const _strArr = _num.toString().split('.');
	
	return _strArr.length > 1 ? _strArr[1].length : 0;
}

const getMaxDecimalPlaces = (x, y) => Math.max(getDeimalPlaces(x), getDeimalPlaces(y));

const calculateFloatSafely = (num, decimalPlaces) => parseFloat(num.toFixed(decimalPlaces));

Number.prototype.add = function (num) {
	const DECIMAL_PLACES = getMaxDecimalPlaces(this, num);
	return calculateFloatSafely((this + num), DECIMAL_PLACES);
}

Number.prototype.minus = function (num) {
	const DECIMAL_PLACES = getMaxDecimalPlaces(this, num);
	return calculateFloatSafely((this - num), DECIMAL_PLACES);
}

// usage
console.log((5).add(3).minus(2)); // 6
console.log((5.08).add(3.12).minus(2.1)); // 6.1
console.log((10.021).add(3.58).minus(2.102));// 11.499

FanShiDe · 2019-04-10T01:06:54Z

Number.prototype.add = function(num) {
	return this + num;
};
Number.prototype.minus = function(num) {
	return this - num;
}

bran-nie · 2019-04-10T11:20:04Z

let myFun = {
    add(number) {
        if (typeof number !== 'number') {
            throw new Error('请输入数字')
    	}
    	return this + number
    },
    minus(number) {
        if (typeof number !== 'number') {
            throw new Error('请输入数字')
    	}
    	return this - number
    }
}

// 挂载到原型上
Object.assign(Number.prototype, myFun)

;(5).add(3).minus(2)
// 6

让一让，我分享一个比较简便、便于维护的方法。🙈
将需要增加到Number原型上的方法，集中到一个对象里面，再用assign进行合并。

不过望大佬指出不同意见，本人小白一个

Hillkinsh · 2019-04-10T15:58:26Z

Function.prototype.method = function (name, fn) {
this.prototype[name] = fn;
return this
}
Number.method('add', function (a) {
return this + a
})
Number.method('minus', function (a) {
return this - a
})

IAMSBLOL · 2019-07-19T02:17:08Z

Number.prototype.add=function(x){ return this+x}
Number.prototype.minus=function(x){return this-x}

mongonice · 2019-07-24T08:24:25Z

Number.prototype.add = function (num) {
    return this + num
}
Number.prototype.minus = function (num) {
    return this - num
}

console.log((5).add(3).minus(2))   // 6

safarishi · 2019-07-30T14:54:49Z

Number.prototype.add = function(n) {
  return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
  return this.valueOf() - n;
};

how to realize in typescript ?

zzNire · 2019-08-09T07:10:23Z

我的一个疑惑

为什么 8.add(1) 不行，而 8['add'](1)以及(8).add(1)可以

上面代码中，调用方法之所以写成8['add']，而不是8.add，是因为数值后面的点，会被解释为小数点，而不是点运算符。

将数值放在圆括号中，数字就会自动转化为基本包装类型，就可以使用点运算符调用方法了。

参考

webbobola · 2019-08-30T04:46:50Z

	class MyNumber extends Number {
			constructor(e) {
				super(e);
			}
			add(n=0) {
				if(typeof n !== "number") {
					throw new Error("Please enter the correct data type")
				}
				return new MyNumber(this+n);
			}
			minus(n=0) {
				if(typeof n !== "number") {
					throw new Error("Please enter the correct data type")
				}
				return new MyNumber(this-n);
			}
		}
                  var a=new MyNumber (10);
		console.log(a.minus(-1).add(2))

aeolusheath · 2019-10-11T07:42:10Z

 Number.prototype.add = function(num) {
   return this + num
 }
 Number.prototype.minus = function(num) {
   return this - num
 }

5.add(3)报错，因为js引擎将5.识别为一个数字，一个数字+add(3)报错。
5add(3)是报同样的错。

ScholatLouis · 2019-10-11T13:46:52Z

```js
 Number.prototype.add = function(num) {
   return this + num
 }
 Number.prototype.minus = function(num) {
   return this - num
 }
5.add(3)报错，因为js引擎将5.识别为一个数字，一个数字+add(3)报错。
5add(3)是报同样的错。

5..add(3)就可以了

huatten · 2019-11-21T08:27:18Z

~function () {
  function verify(n) {
    n = Number(n)
    return isNaN(n) ? 0 : n;
  }
  function add(n) {
    n = verify(n)
    return this + n;
  }
  function minus(n) {
    n = verify(n)
    return this - n;
  }
  ["add", "minus"].forEach(item => {
    Number.prototype[item] = eval(item)
  })
}()

(5).add(2).minus(3)    // 4

yygmind · 2019-12-16T03:25:16Z

例： 5 + 3 - 2，结果为 6

blade254353074 · 2020-03-20T09:06:42Z

Number.prototype.add = function(i = 0){
	return parseFloat((this + i).toPrecision(12))
}
Number.prototype.minus = function(i = 0){
	return parseFloat((this - i).toPrecision(12))
}

2.1.minus(1.9) // 0.2

arixse · 2020-05-04T14:27:21Z

思路：将add和minus方法挂在到Number的原型上面，并且在每个函数中返回Number类型的结果

Number.prototype.add = function(num) {
      return Number(this + num)
}
Number.prototype.minus = function(num) {
      return Number(this - num)
}

fariellany · 2020-05-24T08:44:32Z

let myFun = {
    add(number) {
        if (typeof number !== 'number') {
            throw new Error('请输入数字')
    	}
    	return this + number
    },
    minus(number) {
        if (typeof number !== 'number') {
            throw new Error('请输入数字')
    	}
    	return this - number
    }
}

// 挂载到原型上
Object.assign(Number.prototype, myFun)

;(5).add(3).minus(2)
// 6

让一让，我分享一个比较简便、便于维护的方法。🙈
将需要增加到Number原型上的方法，集中到一个对象里面，再用assign进行合并。

不过望大佬指出不同意见，本人小白一个

牛皮

long-joan · 2020-05-25T07:18:06Z

Number.prototype.add = function(n){return this.toString()*1 + n}
Number.prototype.minus = function(n){return this.toString()*1 - n}
console.log((5).add(3).minus(2))

SnailOwO · 2020-07-14T07:25:14Z

Number.prototype.add = function(n){return this.toString()*1 + n}
Number.prototype.minus = function(n){return this.toString()*1 - n}
console.log((5).add(3).minus(2))

你这和调用valueOf有啥区别...

SnailOwO · 2020-07-14T07:46:57Z

想问下,(5)为啥就变成Number Object了,真的有点好奇js那是怎么处理的

SnailOwO · 2020-07-14T08:00:52Z

想问下,(5)为啥就变成Number Object了,真的有点好奇js那是怎么处理的
明白了...(5) === Number(5)

libin1991 · 2020-08-27T11:59:28Z

XXXXXLXL · 2020-11-29T10:51:30Z

Number.prototype.add = function (val) {
    return this + val
}

Number.prototype.minus = function (val) {
    return this - val
}

jiangmingwen · 2021-02-02T04:02:45Z


class Num  {
    num = 0
    constructor(num){
        this.num = num
    }

    add(count){
        this.num += count
        return this
    }

    minus(count){
        this.num -= count 
        return this
    }

}
console.log(new Num(5).add(3).minus(2).num )

lianglei777 · 2021-02-28T08:22:30Z

为什么我将function改成箭头函数，就不对了？？

zizifn · 2021-12-29T17:16:38Z


class Num  {
    num = 0
    constructor(num){
        this.num = num
    }

    add(count){
        this.num += count
        return this
    }

    minus(count){
        this.num -= count 
        return this
    }

}
console.log(new Num(5).add(3).minus(2).num )

看到其他答案，都改number 原型链，就不怕该出bug啊。这可是动了基本类型啊。。

Dylan0916 · 2022-04-05T03:30:29Z

为什么我将function改成箭头函数，就不对了？？

因你例子的 arrow function 的 this 会指向 window，所以 add 是回传 window.valueOf() - n，为 NaN，自然在 call minus 时会炸掉

XW666 · 2022-08-18T06:18:35Z

 class MyNumber {
    constructor(num) {
      this.num = num
    }
    add(count) {
      let m = count + this.num
      return new MyNumber(m)
    }
    minus(count) {
      let m = this.num - count
      return new MyNumber(m)
    }
  }
  let m = new MyNumber(2)
  console.log('MyNumber', m.add(3).minus(1))

ScholatLouis · 2022-08-18T06:18:55Z

您的来信已收到，我会尽快回复，谢谢

kangkai124 mentioned this issue Apr 10, 2019

每天一道题，早日BAT kangkai124/blog#12

Open

Jogiter mentioned this issue Apr 11, 2019

常见前端面试题 Jogiter/jogiter.github.com#6

Open

yangxy6 mentioned this issue Jul 9, 2019

面试题库#1——实现(5).add(2).mintes(3)=4 yangxy6/FE_Learning#1

Open

yygmind mentioned this issue Jul 14, 2019

前端 100 问：能搞懂80%的请把简历给我 yygmind/blog#43

Open

yygmind added the 编程题 label Dec 16, 2019

lovelmh13 mentioned this issue Feb 23, 2020

实现 (5).add(3).minus(2) 功能（Number里的this和this.value） lovelmh13/One-question-a-day#42

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

第 50 题：实现 (5).add(3).minus(2) 功能 #88

第 50 题：实现 (5).add(3).minus(2) 功能 #88

LiuMengzhou commented Apr 8, 2019

zeroone001 commented Apr 8, 2019 •

edited

Loading

yeyi361936738 commented Apr 9, 2019 •

edited

Loading

jjeejj commented Apr 9, 2019

noctiomg commented Apr 9, 2019 •

edited

Loading

hqzh commented Apr 9, 2019

pengcc commented Apr 9, 2019 •

edited

Loading

FanShiDe commented Apr 10, 2019

bran-nie commented Apr 10, 2019 •

edited

Loading

Hillkinsh commented Apr 10, 2019

IAMSBLOL commented Jul 19, 2019

mongonice commented Jul 24, 2019 •

edited

Loading

safarishi commented Jul 30, 2019

zzNire commented Aug 9, 2019 •

edited

Loading

webbobola commented Aug 30, 2019 •

edited

Loading

aeolusheath commented Oct 11, 2019

ScholatLouis commented Oct 11, 2019

huatten commented Nov 21, 2019

yygmind commented Dec 16, 2019

blade254353074 commented Mar 20, 2020

arixse commented May 4, 2020

fariellany commented May 24, 2020

long-joan commented May 25, 2020

SnailOwO commented Jul 14, 2020

SnailOwO commented Jul 14, 2020

SnailOwO commented Jul 14, 2020

libin1991 commented Aug 27, 2020

XXXXXLXL commented Nov 29, 2020

jiangmingwen commented Feb 2, 2021 •

edited

Loading

lianglei777 commented Feb 28, 2021

zizifn commented Dec 29, 2021

Dylan0916 commented Apr 5, 2022 •

edited

Loading

XW666 commented Aug 18, 2022

ScholatLouis commented Aug 18, 2022 via email

第 50 题：实现 (5).add(3).minus(2) 功能 #88

第 50 题：实现 (5).add(3).minus(2) 功能 #88

Comments

LiuMengzhou commented Apr 8, 2019

zeroone001 commented Apr 8, 2019 • edited Loading

yeyi361936738 commented Apr 9, 2019 • edited Loading

jjeejj commented Apr 9, 2019

noctiomg commented Apr 9, 2019 • edited Loading

hqzh commented Apr 9, 2019

pengcc commented Apr 9, 2019 • edited Loading

FanShiDe commented Apr 10, 2019

bran-nie commented Apr 10, 2019 • edited Loading

Hillkinsh commented Apr 10, 2019

IAMSBLOL commented Jul 19, 2019

mongonice commented Jul 24, 2019 • edited Loading

safarishi commented Jul 30, 2019

zzNire commented Aug 9, 2019 • edited Loading

webbobola commented Aug 30, 2019 • edited Loading

aeolusheath commented Oct 11, 2019

ScholatLouis commented Oct 11, 2019

huatten commented Nov 21, 2019

yygmind commented Dec 16, 2019

blade254353074 commented Mar 20, 2020

arixse commented May 4, 2020

fariellany commented May 24, 2020

long-joan commented May 25, 2020

SnailOwO commented Jul 14, 2020

SnailOwO commented Jul 14, 2020

SnailOwO commented Jul 14, 2020

libin1991 commented Aug 27, 2020

XXXXXLXL commented Nov 29, 2020

jiangmingwen commented Feb 2, 2021 • edited Loading

lianglei777 commented Feb 28, 2021

zizifn commented Dec 29, 2021

Dylan0916 commented Apr 5, 2022 • edited Loading

XW666 commented Aug 18, 2022

ScholatLouis commented Aug 18, 2022 via email

zeroone001 commented Apr 8, 2019 •

edited

Loading

yeyi361936738 commented Apr 9, 2019 •

edited

Loading

noctiomg commented Apr 9, 2019 •

edited

Loading

pengcc commented Apr 9, 2019 •

edited

Loading

bran-nie commented Apr 10, 2019 •

edited

Loading

mongonice commented Jul 24, 2019 •

edited

Loading

zzNire commented Aug 9, 2019 •

edited

Loading

webbobola commented Aug 30, 2019 •

edited

Loading

jiangmingwen commented Feb 2, 2021 •

edited

Loading

Dylan0916 commented Apr 5, 2022 •

edited

Loading