看完前端各种风骚操作，我眼睛被亮瞎了！ - 文章 - 开发者社区

一、实现一个快速评分组件

const getRate = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
console.log(getRate(0)); // ☆☆☆☆☆
console.log(getRate(1)); // ★☆☆☆☆
console.log(getRate(2)); // ★★☆☆☆
console.log(getRate(3)); // ★★★☆☆
console.log(getRate(4)); // ★★★★☆
console.log(getRate(5)); // ★★★★★

这个都不用多解释了，简直写的太妙了！

二、巧用位运算

用位运算可以实现很多功能，比如乘2、除2（或者2的倍数），向下取整这些计算操作，而且性能很高！

let num = 3.14159;
console.log(~~ num);  // 向下取整，输出3
console.log(2 >> 1); // >>表示右移运算符，除2，输出1
console.log(2 << 1); // <<表示左3移运算符，乘2，输出4

并且，利用~符,即按位取反运算符（NOT operator），还可以和字符串的indeOf方法配合使用。

const str = 'acdafadfa'
if (~str.indexOf('ac')) {
  console.log('包含')
}

其实原理很简单，举几个例子大家就明白了：

~-1的结果是0。
~0的结果是-1。
~1的结果是-2，~2的结果是-3。

<顺便吆喝一句，技术大厂年前捞人，前后端测试，感兴趣可以试试，待遇给的还可以~>

三、漂亮随机码

const str = Math.random().toString(36).substring(2, 10)
console.log(str); // 随机输出8位随机码

这个在要为每个用户生成一个随机码的时候特别好用，具体随机码多少位可以自己控制，如果要的随机码位数特别长，可以把这个函数多调用一次，然后把结果进行字符串拼接。

四、史上最NB的报错处理

try {
  const str = '';
  str.map(); // Uncaught TypeError: str.map is not a function
} catch(e) {
  window.open("https://stackoverflow.com/search?q=js+" + e.message);
}

这应该是史上最NB的报错处理了，一般来说，抛出错误时应该打印日志并上报，这里直接带着报错信息给人家重定向到stackoverflow去了，顺便stackoverflow搜索了下这个报错，直接搜一波错误解决方案，而且这个网站是全英文的，顺便还能学一波英语，对于开发者来说，这简直太妙了！不过记得上线的时候，记得在跳转前加一个if(process.env.NODE_ENV === 'development')，不然上到线上一旦报错可就惨了!

五、倒序排序的简写

const arr = [1, 2, 3, 4, 5];
for (let i = arr.length - 1; i >= 0; i--) {
    console.log(arr[i]);      
}

可简写为：

const arr = [1, 2, 3, 4, 5];
for(let i = arr.length; i--;) {
    console.log(arr[i]);
}

代码解释：

先来回顾下for循环的书写结构，即for (初始化表达式; 条件表达式; 递增表达式),初始化表达式只会执行一次，而条件表达式和递增表达式在每次循环时都会执行一次，而正好这个倒序循环的终止执行条件为i==0，所以就可以把条件表达式和递增表达式合而为一了，主打的就是一个简洁。

六、在控制台输出一个键盘图形

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`
    `)())

这段代码会在浏览器控制台中打印出一个键盘图形，不得不说写出这段代码的人真的太有才了！

以上就是我总结的一些前端代码的风骚操作，大家有没有更风骚的操作呢？欢迎大家留言分享！

——转载自作者：程序员小寒