[ 问题描述 ]

在网上看到了两种设置随机颜色的取值代码。但不知道"~~"是干什么用的？

var a = (~~(Math.random() * 255));           //"~~"是什么运算符？
var b = Math.floor((Math.random() * 255));

[ 符号用法 ]

首先，颜色rgb值的三个参数都是0~255的整数。而~~和Math.floor()的作用都是将小数转化为整数。但是对于负数它们的运算结果会有一些不同。

Math.floor() 方法：将数字向下舍入到最接近的整数，并返回结果。如果传递的参数是整数，则该值不会被舍入。
~~ 两个按位非操作符，作用是干掉数字的小数部分。和强制类型转换的结果基本一样。

若想获得更好的可读性，使用Math.floor。若想最小化它，使用波浪号~~ 。

~(5.5)   // => -6
~(-6)    // => 5
~~5.5    // => 5  (same as Math.trunc(5.5) and Math.floor(5.5))
~~(-5.5) // => -5 (same as Math.trunc(-5.5) but NOT the same as Math.floor(-5.5), which would give -6 )//Math.floor(): 该方法将数字向下舍入到最接近的整数，并返回结果。如果传递的参数是整数，则该值不会被舍入。console.log( Math.floor( 8.0), Math.floor( 8.4), Math.floor( 8.5), Math.floor( 8.6) ); // 8 8 8 8console.log( Math.floor(-8.0), Math.floor(-8.4), Math.floor(-8.5), Math.floor(-8.6) ); // -8 -9 -9 -9console.log( Math.floor( 0.0), Math.floor( 0.5), Math.floor(-0.0), Math.floor(-0.4), Math.floor(-0.6) ); // 0 0 -0 -1 -1//~~: 做两次按位取反的操作（和强制类型转换基本一样）console.log( ~~( 8.0), ~~( 8.4), ~~( 8.5), ~~( 8.6) ); //8 8 8 8console.log( ~~(-8.0), ~~(-8.4), ~~(-8.5), ~~(-8.6) ); //-8 -8 -8 -8console.log( ~~( 0.0), ~~( 0.5), ~~(-0.0), ~~(-0.4), ~~(-0.6) ); // 0 0 0 0 0

[ 原理讲解 ]

1. 按位取反(~)的结果

先来复习一下原码/反码/补码：
– - 真值位正时：原码、反码和补码与真值完全相同（最高位是符号位正: 0; 负: 1）；
– - 真值位负时：原码与真值相等；反码是真值的数值位取反；补码是反码的最低为加一。

正整数取反：~(8) = ?   （正数：原码、反码和补码与真值完全相同；）
原/反/补码：0000 1000
----------------------
按位取反 ~：1111 0111 （补码符号位是1 => 真值为负数 => 原码才是真值）1111 0110 （反码）1000 1001 （原码 => 真值为-9）∴ ~8 = -9
=====================================================================================
负整数取反：~(-8) = ?  （负数：原码、反码和补码与真值完全相同；）原　码　：1000 1000反　码　：1111 0111补　码　：1111 1000
----------------------
按位取反 ~：0000 0111 （补码符号位是0 => 真值为正数 => 补码就是真值 => 真值为7）∴ ~(-8) = 7
=====================================================================================
负整数取反：~(0) = ?  （负数：原码、反码和补码与真值完全相同；）
原/反/补码：0000 0000
----------------------
按位取反 ~：1111 1111 （补码符号位是1 => 真值为负数 => 原码才是真值）1111 1110 （反码）1000 0001 （原码 => 真值为-9）∴ ~0 = -1

可以得出两个结论：

假设x是一个整数，无论是正数还是负数，~x = -(x+1)。
假设x是一个整数，无论是正数还是负数，~~x = x。

2. JavaScript 中数字的存储方式

根据 ECMAScript 标准，JavaScript 中只有一种数字类型Number：一种64位双精度浮点型的数字数据类型(基于 IEEE 754 标准) (double-precision 64-bit floating point format) 。
取值范围：-(2⁵³-1) 到 2⁵³-1。
JavaScript 并没有为整数给出一种特定的类型。除了能够表示浮点数外，还有一些带符号的值：+Infinity，-Infinity 和 NaN (非数值，Not-a-Number)。

3. JavaScript 中位运算的操作数：32位有符号整数

JavaScript 将数字存储为 64位双精度浮点数，但在执行位运算之前，会将数字转换为 32位有符号整数。超过 32 位的数字将丢弃其最高有效位。

如下例子中，超过 32 位的整数转换为 32 位整数：

Before: 11100110111110100000000000000110000000000001
After:              10100000000000000110000000000001

然后，将运算符应用于每对位，按位构造结果。执行按位操作后，将结果转换回 64 位数

 9 (base 10) = 00000000000000000000000000001001 (base 2)--------------------------------
~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)

⚠️：由于使用32位表示形式，所以 ~-1和~4294967295 (2³²-1) 的结果均为0。

const a = 5;           // 00000000000000000000000000000101
const b = -3;          // 11111111111111111111111111111101
const c = -1;          // 11111111111111111111111111111111
const d = 4294967295;  // 01111111111111111111111111111111console.log(~a);       // 11111111111111111111111111111010   // expected output: -6
console.log(~b);       // 00000000000000000000000000000010   // expected output: 2
console.log(~c);       // 00000000000000000000000000000000   // expected output: 0
console.log(~d);       // 10000000000000000000000000000000   // expected output: 0

[ 参考资料 ]

JavaScript 位运算符 https://www.w3school.com.cn/js/js_bitwise.asp
按位非 (~)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT
JavaScript 数据类型和数据结构
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures
ECMAScript® 2022 Language Specification 语言规范
https://tc39.es/ecma262/#sec-bitwise-not-operator
What is the “double tilde” (~~) operator in JavaScript?
https://stackoom.com/question/P3Ur

(转载)JavaScript：双波浪号“~~“ 与 Math.floor()相关推荐

JavaScript：双波浪号“~~“ 与 Math.floor()
[ 问题描述 ] 在网上看到了两种设置随机颜色的取值代码.但不知道"~~"是干什么用的? var a = (~~(Math.random() * 255)); //"~~ ...
什么是JavaScript中的“双波浪号”（~~）运算符？ [重复]
本文翻译自:What is the "double tilde" (~~) operator in JavaScript? [duplicate] This question al ...
Javascript的~(波浪号)用法
原理 js中在变量名前加"~" 是位运算NOT,按位取反. var iNum1 = 25; //25 二进制原码等于 0000000000000000000000000001100 ...
js的向下取整_【转载】Javascript使用Math.floor方法向下取整
在Javascript的数值运算中,很多时候需要对最后计算结果向下取整,Math.floor是javascript中对计算结果向下取整的函数,它总是将数值向下舍入为最接近的整数.此外Math.ceil ...
JavaScript中双叹号(!!)和单叹号(!)
转自:JavaScript中双叹号(!!)作用经常看到这样的例子: var a: var b=!!a; a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不 ...
Javascript Math.ceil与Math.round与Math.floor区别
Javascript Math.ceil()与Math.round()与Math.floor()区别: Math.ceil()向上舍入 alert(Math.ceil(20.1)) //输出 21 a ...
JavaScript 的 Math.floor() 函数
Math.floor() 返回小于或等于一个给定数字的最大整数. 可以理解 Math.floor()为向下取整. 与其相对的是 Math.ceil() ,这个是向上取整. 如下面的代码: Math.f ...
JavaScript Math floor
JavaScript Math floor var floor = Math.floor(5.5); console.log(floor);//5
如何使用JavaScript Math.floor生成范围内的随机整数-已解决
快速解决方案 (Quick Solution) function randomRange(myMin, myMax) {return Math.floor(Math.random() * (myMax ...

(转载)JavaScript：双波浪号“~~“ 与 Math.floor()