有哪些短小却令人惊叹的 JavaScript 代码

最新推荐文章于 2025-01-17 14:11:47 发布

转载最新推荐文章于 2025-01-17 14:11:47 发布 · 1.1k 阅读

文章标签：

#javascript

转载专栏收录该内容

15 篇文章

订阅专栏

本文分享了一些有趣的JavaScript代码片段，包括错误处理、评级组件、数组扁平化等实用技巧。

之前在知乎上面看到的一些极其有意思的短小精悍的js代码，在这里做个记录：
1、JavaScript 错误处理的方式的正常姿势。

try{ something}catch(e){ window.location.href="http://stackoverflow.com/search?q=[js]+"+e.message;}

2、单行写一个评级组件："★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

3、为什么 ++[[]][+[]]+[+[]] = 10？

4、这个正则表达式可以测质数……

function isPrime(n) {
  return !(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))
}

5、我给个最简单的：

1e3 => 1000
60e3 => 60000
经常用在 setTimeout 之类的地方，不用数零了。

另外，经常用 !! 将空/非空转化为真正的 bool 值，例如:
console.log("GC enabled?", !!global.gc)

我还有一个写 ES6 函数小习惯，
somePromise().then( _ = > doSomething() )，
其中 "_" 用来替代 somePromise().then( () = > doSomething() ) 的写法。括号多了很干扰，虽然凭空多声明了一个变量。

6、将n维数组破开成一维(string-array)

var foo0 = [ 1 , [ 2 , 3 ], [ 4 , 5 , [ 6 , 7 ,[ 8 ]]], [ 9 ], 10 ]; var foo1 = foo0 . join ( ',' ). split ( ',' ); console . log ( foo1 ); //["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

7、统计字符串中相同字符出现的次数。

var arr = 'abcdaabc' ; var info = arr . split ( '' ) . reduce (( p , k ) => ( p [ k ] ++ || ( p [ k ] = 1 ), p ), {}); console . log ( info ); //{ a: 3, b: 2, c: 2, d: 1 }

8、 getSelection=false;

      前端写代码会检测一些变量判断浏览器是否有响应特性,然后做降级处理.尝试通过剪贴板赋值功能附带版权信息时,知乎的js会判断getSelection.所以我们可以在知乎的js脚本执行之前运行这行代码,假装自己是垃圾浏览器,从而不会被加入版权信息.
     
 (7月17,知乎改代码了,所以要用下面不优雅的一段.)

var concatPre = Array.prototype.concat;
Array.prototype.concat = function (arg1) {
    function checkExtra(arr){
        return arr && arr.slice && arr[3] === "著作权归作者所有，转载请联系作者获得授权。";
    }
    if (checkExtra(this)||checkExtra(arg1)) {
        return [];
    } else {
        return concatPre.apply(this, arguments);
    }
 };

另外附赠一段

var tipStyle="color: white;font-size: 22px;display: inline-block;position: absolute;top: 0;bottom: 0;line-height: 22px;margin: auto;height: 22px;";
$(".zu-top").append($("<span style='"+tipStyle+"left: 10px;"+"'>"+decodeURI("%E6%B0%91%E4%B8%BB")+"</span>")).append($("<span style='"+tipStyle+"right: 10px;"+"'>"+decodeURI("%E8%87%AA%E7%94%B1")+"</span>"));

9、生成6位的数字验证码
console.log(('000000' + Math.floor(Math.random() * 999999)).slice(-6));

10、再补充一个大/小驼峰命名转下划线/连接符命名

'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase();
// component_map_model_registry

11、'?key1=value1&key2=value2' 转换成json

<span style="font-size:18px;">export const query = (search = '') => ((querystring = '') => (q => (querystring.split('&').forEach(item => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))), q))({}))(search.split('?')[1]);</span>

个人觉得第9，10,11个还是比较实用的，其他的可能更偏向于趣味性。