关于javascript:20个你可能不知道的javascript奇巧淫技内附参考链接

海阔凭鱼跃，天高任鸟飞。Hey 你好！我是秦爱德。????

hello 各位师兄你们好，我又来了????

作为干货系列的开篇，博主特意收集总结了对于 javascript 日常开发中那些好用然而些许费解的 20 个小技巧，能让咱们的代码写法显得更为 简洁优雅 ，同时也能晋升代码 逼格（手动滑稽????????）

注释开始

1. 一句代码实现多维数组扁平化

const arr = [1, 2, 3, [4, [5, 6, [7,8]]]];
// 形式 1：console.log(arr.flat(Infinity));
// 形式 2：console.log(arr.join().split(','));
// 形式 3：console.log(arr.toString().split(','));
// 在查阅材料中，博主发现原来 join()、toString()函数式能够逾越层级的，于是便有了形式 2、3

参考链接

2. 一句代码生成一个 [1-100] 的数组

// 形式 1
const arr1 = [...Array(100).keys()] 
// 形式 2
const arr2 = Array.from(Array(100), (e, i) => i + 1)

参考链接

3. 一句代码实现数组去重

const arr = [1, 2, 2, 3, 4, 5, 5, 3]
// 形式 1：const newArr1 = [...new Set(arr)]
// 形式 2
const newArr2 = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);

参考链接

4. 一句代码求两个数组交加和差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let intersect = new Set([...a].filter(x => b.has(x)));
let difference = new Set([...a].filter(x => !b.has(x)));

参考链接

5. 一句代码获取数组最大值和最小值

let numbers = [1, 3, 5, 5, 6, -3, 10]
let max = Math.max(...numbers)
let min = Math.min(...numbers)

参考链接

6. 一句代码求字符串反转

let str = 'hello 秦爱德';
console.log([...str].reverse().join(''))

7. 一句代码统计字符串中雷同字符呈现的次数

let str = 'aaabbbccddeegggggggllllssgjwd';
let strInfo = str.split('').reduce((p, c) => (p++ || (p = 1), p), {});
console.log(strInfo)

8. 短路条件语句“&&”

if (istrue) {callback()
}
// 以上代码等同于 istrue && callback()

9. 用操作符“||”来设置默认值

let a = a || 'default value'

10. 比“||”操作符更优的“??”

let a = a ?? 'default value'
// 与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果应用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比方为假值（例如，'' 或 0）时。

参考链接

11. 可选链操作符“?.”

let a = {name:'秦爱德'}
console.log(a.type?.job)
// 可选链操作符 (?.) 容许读取位于连贯对象链深处的属性的值，而不用明确验证链中的每个援用是否无效。在援用为空(nullish) (null 或者 undefined) 的状况下不会引起谬误，该表达式短路返回值是 undefined。

参考链接

12. 应用 Object.is()作比拟

Object.is(0 , 0); // true

参考链接

13. 残余参数

function sum(...args) {}
// 残余参数语法容许咱们将一个不定数量的参数示意为一个数组。

参考链接

14. 隐式本义（字符串转数字）

let a = '1';
console.log(Number(a));
console.log(+a);
// 应用隐式本义可更简略疾速

15. 删除数组最初两个元素

let a = [1,2,4,5];
a.length = a.length - 2;

16. 数字金额千分位格式化

let a = 123456789;
console.log(a.toLocaleString('en-US')) //123,456,789

参考链接

17. 数字补 0 操作

const a1 = (num, len = 2) => (`0${num}`).slice(-len)
const a2 = (num, len = 2) => (`${num}`).padStart(len, '0')
a1(8)
a2(78,5)

18. 双位操作符

Math.floor(5.9) === 5  //true
简写后
~~5.9 === 5  //true
// 能够应用双位操作符来代替 Math.floor()。双否定位操作符的劣势在于它执行雷同的操作运行速度更快。

19. 小数取整

let num = 123.456

// 罕用办法
console.log(parseInt(num)); // 123
// 按位或
console.log(num | 0); // 123
//“双按位非”操作符
console.log(~~ num); // 123
// 左移操作符
console.log(num << 0); // 123
// 按位异或
console.log(num ^ 0); // 123

20. 用字符串返回一个键盘图形 惊 ????！！！

console.log((_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)())

以上就是诚意满满干货系列开篇，其它几个系列我将同步更新，下一个系列也在构思当中，敬请期待！！！

感激

点赞???? 再看，已成习惯！该系列继续更新，你们的一键三连就是我继续写作的最大能源，如果对本篇博客有任何意见和倡议，欢送师兄们留言！欢送来扰！????????

本文首发于公众号「前端秦爱德」，欢送关注。

感兴趣的小伙伴还能够退出我的「秦爱德前端交换群」，我在成都下班儿，群里有少量成都外乡优良大佬以及美女 HR，如果你碰巧也是成都的，那就赶快进来吧。

我是秦爱德，一个在互联网夹缝求生的程序员！