前端开发小窍门

块级作用于

（function f（）{}）
let a
const b

字符串类型转换数字类型

使用~~和"+"转换数字类型，利用隐式转换，字符格式的数字

+null
//0
+undefined
//NaN
+true
//1
+false
//0
+[]
//0
+{}
//NaN
+"21221"
//21221
+'2121qqqq'
//NaN

~~"2w"
//0
~~"2223232"
//2223232
~~{}
//0
~~[]
//0
~~undefined
//0
~~null
//0
~~true
//1
~~false
//0

注意：

“~~”计算数字位数不能超过10位数，超出会报错，如下：

~~'1000000000'// 10位数字
1000000000
~~'10000000000' // 11位数字
1410065408

“+” 正号
正号不会对数字产生任何影响，对于非Number类型的值，会将其先转化为Number类型，再进行运算
“-” 负号
负号可以对数字进行符号的取反,对于非Number类型的值，会将其先转化为Number类型，再进行运算

js取反我只知道个！，但是~为什么也叫取反，他返回的又不是boolean类型？

_1，2 的二进制又不是 -2 ，-3 ，怎么会转换成这么奇怪的值？

网友解答：

按位取反还真和boolean没多大关系，大体流程是这样的：

就来看看~1的计算步骤：

将1(这里叫：原码)转二进制 ＝ 00000001
按位取反 ＝ 11111110
发现符号位(即最高位)为1(表示负数)，将除符号位之外的其他数字取反 ＝ 10000001
末位加1取其补码 ＝ 10000010
转换回十进制 ＝ -2
有网友对上面的答案进行了三点补充，如下：

按位取反的运算规则这么奇怪并不是JavaScript独有的，而是所有的计算机语言都是这样的。这样做的主要原因是为了为了统一减法和加法，在计算机中，减法会变成加一个负数，而负数会以补码的形式存储。而这样主要是因为补码和数字的十进制数有这么转换关系，负数：补码(x) = -x - 1，正数：补码(x) = x
因为补码是针对负数存在的，那么只要数据类型有无符号数，就没有这样的烦恼了，比如C语言有无符号整型，就能对无符号整型直接按位取反。
如果没有无符号类型，而且也只是想要按位取反，而不是附带补码的按位取反，需要另外的方法。让全1的数据和当前数据做按位抑或就行了。比如，你有一个32位的数据a，需要对它做按位取反，那么这样就行了：0xFFFF ^ a

```javascript
var a = 0x8321;
console.log(a.toString(2));
console.log((0xFFFF ^ a).toString(2));

//1000001100100001
//111110011011110   => 左边最高位是0，被隐藏了。
下面举个例子：

var n = -4.9;
console.log(n); //4.9
n = ~n;
console.log(n);//3
n = ~n;
console.log(n);//4
例2：

var n = 4.2;
console.log(n); //4.2
n = ~n;
console.log(n);//-5
n = ~n;
console.log(n);//4
例3：

var n = 4;
console.log(n); //4
n = ~n;
console.log(n);//-5
n = ~n;
console.log(n);//4

!!，简化判断变量是否为null，undefined，""

!!null
//false
!!undefined
//false
!!""
//false
!!{}
//true
!![]
//true
!!0
//false

二进制运算
参考地址：https://jingyan.baidu.com/article/a3f121e4919494fc9052bb0f.html

& （按位与）
与运算赋值
与运算是二进制数按位做相与运算再赋值，其运算规则是：
0&0=0; 0&1=0; 1&0=0; 1&1=1
即：两位同时为1，结果才为1，否则为0。

^ （按位异或）
异或运算赋值
异或运算是二进制数按位做异或运算再赋值，其运算规则是：
0^0=0； 0^1=1； 1^0=1； 1^1=0
即：如果两个相应位为“异”（值不同），则该位结果为1，否则为0。

| （按位或）
或运算赋值
或运算是二进制数按位做或运算再赋值，其运算规则是：
0|0=0； 0|1=1； 1|0=1； 1|1=1
即：两位只要有一个为1，其值为1，其它都为0。

&=（与运算赋值）
a &= b (a与b做 相与运算，结果赋值给a)
^= （异或运算赋值）
a ^= b (a与b做 异或运算，结果赋值给a)
|= （或运算赋值）
a |= b (a与b做 或运算，结果赋值给a)

[] == false  //true
+[] //0
+false //0
双等号，会隐式转换两端的值类型，再进行对比
new Array(0) //[]
new Array(1) //[empty]空值有下标
当new Array()括号中的值是单独一个数字，这个数字指定的是这个数组的length长度

js数字转换

parseInt(num,8);   //八进制转十进制
parseInt(num,16);   //十六进制转十进制
parseInt(num).toString(8)  //十进制转八进制
parseInt(num).toString(16)   //十进制转十六进制
parseInt(num,2).toString(8)   //二进制转八进制
parseInt(num,2).toString(16)  //二进制转十六进制
parseInt(num,8).toString(2)   //八进制转二进制
parseInt(num,8).toString(16)  //八进制转十六进制
parseInt(num,16).toString(2)  //十六进制转二进制
parseInt(num,16).toString(8)  //十六进制转八进制

JS判断一个对象中是否存在此属性

MDN 上对in运算符的介绍：如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

'name' in test        //true
'un' in test             //true
'toString' in test    //true
'age' in test           //false

示例中可以看出，值为undefined的属性也可正常判断。
这种方式的局限性就是无法区分自身和原型链上的属性，在只需要判断自身属性是否存在时，这种方式就不适用了。这时需要hasOwnProperty()

test.hasOwnProperty('name')        //true   自身属性
test.hasOwnProperty('age')           //false  不存在
test.hasOwnProperty('toString')    //false  原型链上属性

可以看到，只有自身存在该属性时，才会返回true。适用于只判断自身属性的场景。
判断对象属性的参考链接