【JS经验分享】你真的会写JS吗？满满干货，建议读三遍(2)

大家好，最近准备总结一下JS的经验，分享分享，有不对的欢迎讨论哈~

JS作为前端的基础技能，每一位前端开发都要运用熟练，但你真的会写JS吗？js全称JavaScript，是运行在浏览器上的脚本语言，连续多年被评为全球最受欢迎的编程语言。

文接上篇【JS经验分享】你真的会写JS吗？满满干货，建议读三遍(1)_啥咕啦呛的博客-CSDN博客，我们继续修炼JS，打磨JS，让自己的代码看起来舒服，写起来简洁，用起来容易。

目录

 11.默认参数

 12.字符连接用模板字符串

13.类型转换

string强制转换为数字

使用Boolean过滤数组中的所有假值

14.巧用find查找对象数组中属性为特定值的对象

 15.按位运算符方法仅适用于32位整数

16.在数组中查找最大值和最小值

17.数学指数幂函数的简写

18.取整 |0

19.判断奇偶数 &1

20.计算取整

---

 11.默认参数

add = (test1 = 1, test2 = 2) => (test1 + test2);
add() //output: 3

 12.字符连接用模板字符串

const welcome = `Hi ${test1} ${test2}`;

13.类型转换

string强制转换为数字

常用：也可以使用 +来转化字符串为数字

let test1 = +'123'; 
let test2 = +'12.3';

 可以用 *1来转化为数字(实际上是调用 .valueOf方法) 然后使用 Number.isNaN来判断是否为 NaN，或者使用 a!==a 来判断是否为 NaN，因为 NaN!==NaN

'32' * 1         
// 32

'ds' * 1            
// NaN

null * 1            
// 0

undefined * 1       
// NaN

1  * { valueOf: ()=>'3' }  
// 3

其他类型用加号转数字后：

+ '123'            
// 123

+ 'ds'             
// NaN

+ ''               
// 0

+ null             
// 0

+ undefined       
// NaN

+ { valueOf: ()=>'3' }    
// 3

使用Boolean过滤数组中的所有假值

我们知道JS中有一些假值：false， null， 0， ""， undefined， NaN，怎样把数组中的假值快速过滤呢，可以使用Boolean构造函数来进行一次转换

const compact = arr => arr.filter(Boolean)

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])         
// [ 1, 2, 3, 'a', 's', 34 ]

14.巧用find查找对象数组中属性为特定值的对象

filteredData = data.find(data => data.type === 'test1' && data.name === name);

 15.按位运算符方法仅适用于32位整数

可以使用双位操作符来替代 Math.floor()。双否定位操作符的优势在于它执行相同的操作运行速度更快。

~~1.9 === 1 // true

不过要注意，对整数来说 ~~ 运算结果与 Math.floor() 运算结果相同，而对于负数来说不相同：

~~4.5            
// 4

Math.floor(4.5)        
// 4

~~-4.5        
// -4

Math.floor(-4.5)        
// -5

16.在数组中查找最大值和最小值

const arr = [1, 2, 3]; 
Math.max(…arr); // 3
Math.min(…arr); // 1

17.数学指数幂函数的简写

2**3 // 8

18.取整 |0

对一个数字 |0可以取整，负数也同样适用， num|0

20.15 | 0         
// 20

-20.15 | 0        
// -20

~~number ：取整之中最快的，位运算

var num1 = ~~20.15,  //20
    num2 = ~~(-20.15);  //-20

number^0

var num1 = 20.15^0,  //20
    num2 = (-20.15)^0;  //-20

number<<0

var num1 = 20.15 << 0,  //20
    num2 = (-20.15) << 0,  //-20

19.判断奇偶数 &1

 对一个数字 &1可以判断奇偶数，负数也同样适用， num&1

const num=3;

!!(num & 1)                    
// true

!!(num % 2)                    
// true

20.计算取整

四舍五入Math.round(number)：Math.round()是Math对象中的一个函数，将数值四舍五入为最接近的整数。

var num1 = Math.round(20.1),  //20
    num2 = Math.round(20.5),  //21
    num3 = Math.round(20.9),  //21
    num4 = Math.round(-20.1),  //-20
    num5 = Math.round(-20.5),  //-20 注意这里是-20而不是-21
    num6 = Math.round(-20.9);  //-21

向上取整Math.ceil(number) ：Math.ceil()取向上最接近的整数。

var num1 = Math.ceil(20.1),  //21
    num2 = Math.ceil(20.5),  //21
    num3 = Math.ceil(20.9),  //21
    num4 = Math.ceil(-20.1),  //-20
    num5 = Math.ceil(-20.5),  //-20
    num6 = Math.ceil(-20.9);  //-20

向下取整Math.floor(number) ： Math.floor()`取向下最接近的整数。

var num1 = Math.floor(20.1),  //20
    num2 = Math.floor(20.5),  //20
    num3 = Math.floor(20.9),  //20
    num4 = Math.floor(-20.1),  //-21
    num5 = Math.floor(-20.5),  //-21
    num6 = Math.floor(-20.9),  //-21

细节很多，干货满满，建议读三遍。每次分享10个小技巧，欢迎关注我持续更新这个专题哦~~