第二十三: ES6 数值扩展与Math新增

1. 数字进制新增

1.1. 定义二进制字面量

二进制:(b:Binary)

let a = 0b10;
console.log(a);  // 2

如果后面写的不符合二进制就报错

let a = 0b1234;
// 报错

以前还学过其他进制

let b = 0O666;
console.log(b);   //八进制  Math.pow(8,2)*6 +8*6 +1*6
let a = 0Xccc;
console.log(a);   // 十六进制  Math.pow(16,2)*12 +16*12 +1*12

背景颜色采用随机色

 #box {
    width: 200px;
    height: 200px;
    border: 10px solid pink;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <script>
    // 背景颜色采用随机色(16进制颜色值)
    // box.style.backgroundColor = "#" + Math.random().toString(16).substr(2,6);
    //十六进制的随机数,数字的toString()方法可以传参数,就是变成几进制
    // new Number(10)数值上的toString是重写的toString,可以传“进制”参数   substr(截取位置,截取几位)
    // 背景颜色采用随机色(RGB颜色值写三个值)
    let a =Math.floor(Math.random()*256);
    let b =Math.floor(Math.random()*256);
    let c =Math.floor(Math.random()*256);
    box.style.backgroundColor = `rgb(${a},${b},${c})`;  //``字符串模板

2. Number新增方法

2.1.数字的变化

以前使用方法有

parseInt() parseFloat(

以前的方法都是挂着window身上的,ES6改变了现在挂载在Number自己身上。和 Number.isNaN()的用法完全一样。现在parseInt(),parseFloat()两个方法也挂着到了Number上。

2.1.1.Number.parseInt()、Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。

// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。

Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true

2.1.2.Number.isFinite()、Number.isNaN()

Number.isFinite()

Number.isFinite()用来检查一个数值是否为有限的(finite)。

  1. 用法
    Number.isFinite()
  2. 参数
    需要判断的数字
    let a = 33;
    let b = true;
    let c = '3';
    let d = 12.3;
    console.log(Number.isFinite(a));   // true
    console.log(Number.isFinite(b));   // false
    console.log(Number.isFinite(c));   // false
    console.log(Number.isFinite(d));   // true
    
    Number.isFinite(15); // true
    Number.isFinite(0.8); // true
    Number.isFinite(NaN); // false
    Number.isFinite(Infinity); // false
    Number.isFinite(-Infinity); // false
    Number.isFinite('foo'); // false
    Number.isFinite('15'); // false
    Number.isFinite(true); // false

是数字就返回true,不是就返回false,不会进行隐式类型转换,NaN,'3'都是false

Number.isNaN()

Number.isNaN()用来检查一个值是否为NaN。

和全局函数 isNaN() 相比,该方法不会强制将参数转换成数字,只有在参数是真正的数字类型,且值为 NaN 的时候才会返回 true。

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

// 下面这几个如果使用全局的 isNaN() 时,会返回 true。
Number.isNaN("NaN");      // false,字符串 "NaN" 不会被隐式转换成数字 NaN。
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

// 下面的都返回 false
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");

2.1.3. Number.isInteger()

Number.isInteger()用来判断一个值是否为整数。需要注意的是,在 JavaScript 内部,整数和浮点数是同样的储存方法,所以 3 和 3.0 被视为同一个值。

Number.isInteger()

    let a = 33;
    let aa =33.00;
    let bb =33.00001;
    let b = '3';
    let c = 12.3;
    console.log(Number.isInteger(a));   // true
    console.log(Number.isInteger(aa));   // true
    console.log(Number.isInteger(bb));   // true
    console.log(Number.isInteger(b));   // false
    console.log(Number.isInteger(c));   // false

就是你肉眼看,是整数就是true,不是就是false,不会进行类型转换

    Number.isInteger(25) // true
    Number.isInteger(25.0) // true
    Number.isInteger(25.1) // false
    Number.isInteger("15") // false
    Number.isInteger(true) // false

3.Math 对象的扩展

ES6 在 Math 对象上新增与数学相关的方法。所有这些方法都是静态方法,只能在 Math 对象上调用。

3.1. 截取,保留整数部分 Math.trunc()

Math.trunc方法用于去除一个数的小数部分,返回整数部分。

Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0

let a = 25;
let b = 12.25;
let c = 12.99;
console.log(Math.trunc(a));    // 25
console.log(Math.trunc(b));    // 12
console.log(Math.trunc(c));    // 12
  • 对于非数值,Math.trunc内部使用Number方法将其先转为数值。
  • 对于空值和无法截取整数的值,返回NaN。

3.1.1 简写运算符

~~2.3
~~-2.3

3.2. Math.sign()

Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

它会返回五种值。

  • 参数为正数,返回+1;
  • 参数为负数,返回-1;
  • 参数为 0,返回0;
  • 参数为-0,返回-0;
  • 其他值,返回NaN。
    Math.sign(-5) // -1
    Math.sign(5) // +1
    Math.sign(0) // 0
    Math.sign(-0) // -0
    Math.sign(NaN) // NaN
    
    Math.sign('')  // 0
    Math.sign(true)  // 1
    Math.sign(false)  // 0
    Math.sign(null)  // 0
    Math.sign('9')  // 1
    Math.sign('foo')  // NaN
    Math.sign()  // NaN
    Math.sign(undefined)  // NaN

如果是其他数据类型,比如字符串,布尔值,会先转成数字类型,在判断是正数还是负数,转不了就NaN

3.3. Math.cbrt()

Math.cbrt方法用于计算一个数的立方根。

对于非数值,Math.cbrt方法内部也是先使用Number方法将其转为数值。

Math.cbrt(-1) // -1
Math.cbrt(0)  // 0
Math.cbrt(1)  // 1
Math.cbrt(27)  // 3
console.log(Math.cbrt(-8));
console.log(Math.pow(-2,3));   //某数的几次幂

3.4. Math.hypot()

Math.hypot方法返回所有参数的平方和的平方根。

Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755
Math.hypot();            // 0
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5');   // 7.0710678118654755
Math.hypot(-3);          // 3

4. 指数运算符

ES2016 新增了一个指数运算符(**)。

2 ** 2 // 4
2 ** 3 // 8

指数运算符可以与等号结合,形成一个新的赋值运算符(**=)。

let a = 1.5;
a **= 2;
// 等同于 a = a * a;

let b = 4;
b **= 3;
// 等同于 b = b * b * b;
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容