js开发技巧-实用型

目录

 1、按位或  |

 2、按位与 &

 3、按位取反 ~

 4、按位异或 ^=

 5、!!

 6、toString()

 7、>=和<=

 8、Number.EPSILON

 9、Number.MAX_SAFE_INTEGER

10、Location

11、+

---

 1、按位或  |
只要有一位为 1，则该位为 1。否则，该位为 0

// 用于取整
1.23 | 0 // 1
 
// parseInt取整：太小的数字会产生bug
parseInt(10.256);  // 10
parseInt(0.00000000454);  // 4

 2、按位与 &
两位同时为1，则该位为 1，否则，该位为 0

具有强制转换的功能，把false,true转换成0和1进行比较。偶尔可以当做逻辑与来使用。
1 & 1           // 1
1 & 0           // 0
1 & false         // 0
// 偶尔可当 逻辑与|| 使用（不建议）
1 & true          // 1
0 & true          // 0
1.23 & 1.456    // 1

 3、按位取反 ~
取补码 - 取反（包括符号位）- 取补码

知识储备：

二进制数在内存中是以补码的形式存放的
正数原码最高位为0（符号位），正数的补码、反码都是其本身
负数原码最高位为1（符号位），负数反码符号位不变，其余各位求反，补码： 反码末位+1

结论（可自行推导） ：

1)  所有 正整数 的按位取反是其本身 +1 的 负数
2)  所有 负整数 的按位取反是其本身+1 的 绝对值
3)  零的按位取反是 -1（0既不是正数也不是负数）

 
~1              // -2
~1.234          // -2
// 用法
～arr.indexOf(1) // 存在，等效于 > -1
!~arr.indexOf(1) // 不存在，等效于 === -1
 
// 类型转换，转换成数字
~~false === 0          ~~true === 1
~~undefined === 0      ~~!undefined === 1
~~null === 0           ~~!null === 1　　
~~"" === 0             ~~!"" === 1

 4、按位异或 ^=
两位相同取0，不同取1

// 两个整数交换
// ^=：不常用
var a = 10, b=20;
a ^= b; b ^= a; a ^= b;　// a:20 b:10
// 解构赋值：常用（推荐）
var a = 2,b = 'c';
[a,b] = [b,a] // a:c b:2

以上四种位运算  运算时均会去掉浮点数小数点后的数字 

 5、!!
类型转换，转换成Boolean值

!!false  // flase
!!undefined  // flase
!!null // flase
!!"" // false
!!0 // flase
!!其他 // true

 6、toString()
返回一个表示该对象的字符串

扩展：

当Object类型对象调用toString()时会返回[object Object] 

基于此方法，其他类型对象 都可以通过 Object.prototype.toString() 来检测对象类型

配合call或apply传入要检查的对象，例：
 
Object.prototype.toString.call(new Date); // [object Date]
Object.prototype.toString.call(new String); // [object String]
Object.prototype.toString.call(Math); // [object Math]
 
Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call(null); // [object Null]
 
{}.toString() // [object Object]
 
[1,2,3].toString() // 1,2,3
 
(3).toString() // '3'
 
function sum(a, b) {}
sum.toString() // 'function sum(a, b) {}'
 
const string = new String('foo');
console.log(string) // String {'foo'}
console.log(string.toString()) // 'foo'
 
const x = {
  value: 0,
  toString() {
    return ++this.value;
  }
}
x == 1 && x == 2 && x == 3;    // true
x == 1 && x == 2 && x == 1;    // false

 7、>=和<=
对象进行===时，比较的是内存地址，而 >= 将比较 隐式转换 toString() 后的值

{} === {} // false
// 会进行隐式转换 toString()
// 即[object Object] 与 [object Object] 进行比较
{} >= {}  // true
{} >= {a: 1} // true
 
{} <= {}  // true
{} <= {b: 1} // true

 8、Number.EPSILON

1 与Number可表示的 大于1的 最小的浮点数 之间的差值
0.3 - 0.2 !== 0.1  // true
0.3 - 0.2 - 0.1 <= Number.EPSILON // true

 9、Number.MAX_SAFE_INTEGER
该常量表示在 JavaScript 中最大的安全整数（maxinum safe integer)（2^53 - 1）
数据超过了安全值就变得不安全了

2 ** 53 === 2 ** 53 + 1;     // true

10、Location
Location 对象描述了与一个给定的 Window 对象关联的完整 URL，每个属性都描述了 URL 的不同特性给 location(不建议)、location.href 赋值可以直接跳转页面
location = 'http://baidu.com'
location.href = 'http://baidu.com' 

11、+
+ 作为一元操作符时，返回结果与Number转型函数作用相同

+true  // 1
+false  // 0
+null  // 0
+undefined  // NaN
 
+''  // 0
+11 // 11
+'11'  // 11
+'001'  // 1
+'0xaf'  // 175（如果字符串为十六进制数，则将其转换为十进制数值）
+'0a1'  // NaN
 
// 先调用valueOf方法，如果返回值是基本数据类型，则返回该值；
// 否则，在返回值的基础上调用toString方法
+{}  // NaN（返回[object Object]，由于是字符串，因此是NaN）
+['1']  // 1
+[1]  // 1

transform: scale(0.8);改变按钮的大小 不能设置宽高  设置宽高无效 color="red"设置选中后的颜色