海阔凭鱼跃，天高任鸟飞。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[c]++ || (p[c] = 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); // 12320.用字符串返回一个键盘图形 惊 ????！！！
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，如果你碰巧也是成都的，那就赶快进来吧。
我是秦爱德，一个在互联网夹缝求生的程序员！
发表回复