专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
OSC开源社区  ·  Bun ... ·  2 天前  
程序员的那些事  ·  OpenAI ... ·  2 天前  
程序员小灰  ·  3个令人惊艳的DeepSeek项目，诞生了！ ·  3 天前  
OSC开源社区  ·  2024: 大模型背景下知识图谱的理性回归 ·  5 天前  
程序员小灰  ·  DeepSeek做AI代写，彻底爆了！ ·  6 天前  
51好读  ›  专栏  ›  SegmentFault思否

JavaScript 有用的代码片段和 trick

SegmentFault思否  · 公众号  · 程序员  · 2017-10-16 08:00

正文

本文内容来自知乎《有哪些短小却令人惊叹的 JavaScript 代码？》和文章《这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已》，同时也汇集了部分网上其它来源的内容。

浮点数取整 

  1. const x = 123.4545;
  2. x >> 0; // 123
  3. ~~x; // 123
  4. x | 0; // 123
  5. Math.floor(x); // 123

注意：前三种方法只适用于32个位整数，对于负数的处理上和 Math.floor 是不同的。 

  1. Math.floor(-12.53); // -13
  2. -12.53 | 0; // -12

生成6位数字验证码 

  1. // 方法一
  2. ('000000' + Math.floor(Math.random() *  999999)).slice(-6);
  4. // 方法二
  5. Math.random().toString().slice(-6);
  7. // 方法三




    

  8. Math.random().toFixed(6).slice(-6);
  10. // 方法四
  11. '' + Math.floor(Math.random() * 999999);

16进制颜色代码生成 

  1. (function() {
  2.   return '#'+('00000'+
  3.     (Math.random()*0x1000000<<0).toString(16)).slice(-6);
  4. })();

驼峰命名转下划线 

  1. 'componentMapModelRegistry'




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

url查询参数转json格式 

  1. // ES6
  2. const query = (search = '') => ((querystring = '') => (q => (querystring.split('&').forEach(item => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))), q))({}))(search.split('?')[1]);
  4. // 对应ES5实现
  5. var query = function(search) {
  6.   




    
if (search === void 0) { search = ''; }
  7.   return (function(querystring) {
  8.     if (querystring === void 0) { querystring = ''; }
  9.     return (function(q) {
  10.       return (querystring.split('&').forEach(function(item) {
  11.         return (function(kv) {
  12.           return kv[0] && (q[kv[0]] = kv[1]);
  13.         })(item.split(




    
'='));
  14.       }), q);
  15.     })({});
  16.   })(search.split('?')[1]);
  17. };
  19. query('?key1=value1&key2=value2'); // es6.html:14 {key1: "value1", key2: "value2"}

获取URL参数 

  1. function getQueryString(key){




    

  2.   var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
  3.   var r = window.location.search.substr(1).match(reg);
  4.   if(r!=null){
  5.       return  unescape(r[2]);
  6.   }
  7.   return null;
  8. }

n维数组展开成一维数组 

  1. var foo = [1, [2, 3], ['4', 5, ['6',7,[8]]], [9], 10];
  3. // 方法一
  4. // 限制：数组项不能出现`,`，同时数组项全部变成了字符数字
  5. foo.toString().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  6. 




    

  7. // 方法二
  8. // 转换后数组项全部变成数字了
  9. eval('[' + foo + ']'); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  11. // 方法三，使用ES6展开操作符
  12. // 写法太过麻烦，太过死板




    

  13. [1, ...[2, 3], ...['4', 5, ...['6',7,...[8]]], ...[9], 10]; // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]
  15. // 方法四
  16. JSON.parse(`[${JSON.stringify(foo).replace(/\[|]/g, '')}]`); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]




    

  18. // 方法五
  19. const flatten = (ary) => ary.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
  20. flatten(foo); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]
  21. 




    

  22. // 方法六
  23. function flatten(a) {
  24.   return Array.isArray(a) ? [].concat(...a.map(flatten)) : a;
  25. }
  26. flatten(foo); 




    
// [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

注：更多方法请参考《How to flatten nested array in JavaScript?》

日期格式化 

  1. // 方法一
  2. function format1(x, y) {




    

  3.   var z = {
  4.     y: x.getFullYear(),
  5.     M: x.getMonth() + 1,
  6.     d: x.getDate(),
  7.     h: x.getHours(),




    

  8.     m: x.getMinutes(),
  9.     s: x.getSeconds()
  10.   };
  11.   return y.replace(/(y+|M+|d+|h+|m+|s+)/




    
g, function(v) {
  12.     return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
  13.   });
  14. }
  15. 




    

  16. format1(new Date(), 'yy-M-d h:m:s'); // 17-10-14 22:14:41
  18. // 方法二
  19. Date




    
.prototype.format = function (fmt) { 
  20.   var o = {
  21.     "M+": this.getMonth() + 1, //月份 
  22.     "d+": this.getDate(), //日 
  23.     




    
"h+": this.getHours(), //小时 
  24.     "m+": this.getMinutes(), //分 
  25.     "s+": this.getSeconds(), //秒 
  26.     




    
"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
  27.     "S": this.getMilliseconds() //毫秒 
  28.   };
  29.   if (/(y+)/.test(fmt)){
  30.     fmt = fmt.replace(




    
RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  31.   } 
  32.   for (var k in o){
  33.     




    
if (new RegExp("(" + k + ")").test(fmt)){
  34.       fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  35.     }
  36.   }     




    

  37.   return fmt;
  38. }
  40. new




    
 Date().format('yy-M-d h:m:s'); // 17-10-14 22:18:17

统计文字个数 

  1. function wordCount(data) {
  2.   var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g;
  3.   




    
var m = data.match(pattern);
  4.   var count = 0;
  5.   if( m === null ) return count;
  6.   




    
for (var i = 0; i < m.length; i++) {
  7.     if (m[i].charCodeAt(0) >= 0x4E00) {
  8.       count += m[i].length;
  9.     } else {
  10.       count += 




    
1;
  11.     }
  12.   }
  13.   




    
return count;
  14. }
  16. var text = '贷款买房，也意味着你能给自己的资产加杠杆，能够撬动更多的钱，来孳生更多的财务性收入。';
  17. wordCount(text); 




    
// 38

特殊字符转义 

  1. function htmlspecialchars (str) {
  2.   




    
var str = str.toString().replace(/&/g, "&").replace(/g, "<").replace(/>/g, ">").replace(/"/g, '"');
  3.   return str;
  4. }
  5. 




    

  6. htmlspecialchars('&jfkds<>'); // "&jfkds<>"

动态插入js 

  1. function injectScript(src) {




    

  2.     var s, t;
  3.     s = document.createElement('script');
  4.     s.type = 'text/javascript';
  5.     s.async = 




    
true;
  6.     s.src = src;
  7.     t = document.getElementsByTagName('script')[0];
  8.     t.parentNode.insertBefore(s, t);




    

  9. }

格式化数量 

  1. // 方法一




    

  2. function formatNum (num, n) {
  3.   if (typeof num == "number") {
  4.     num = 




    
String(num.toFixed(n || 0));
  5.     var re = /(-?\d+)(\d{3})/;
  6.     while (re.test(num)) num = num.replace(re, "$1,$2");
  7.     




    
return num;
  8.   }
  9.   return num;
  10. }
  11. 




    

  12. formatNum(2313123, 3); // "2,313,123.000"
  14. // 方法二




    

  15. '2313123'.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // "2,313,123"
  17. // 方法三




    

  18. function formatNum(str) {
  19.   return str.split(''




    
).reverse().reduce((prev, next, index) => {
  20.     return ((index % 3) ? next : (next + ',')) + prev
  21.   });
  22. }




    

  24. formatNum('2313323'); // "2,313,323"

身份证验证 

  1. function




    
 chechCHNCardId(sNo) {
  2.   if (!this.regExpTest(sNo, /^[0-9]{17}[X0-9]$/)) {




    

  3.     return false;
  4.   }
  5.   sNo = sNo.toString();




    

  7.   var a, b, c;
  8.   a = parseInt(sNo.substr(




    
0, 1)) * 7 + parseInt(sNo.substr(1, 1)) * 9 + parseInt(sNo.substr(2, 1)) * 10;
  9.   a = a + parseInt(sNo.substr(3, 1)) * 5 + parseInt(sNo.substr(4, 1)) * 8 + parseInt(sNo.substr(5, 1)) * 4;
  10.   a = a + parseInt(sNo.substr(




    
6, 1)) * 2 + parseInt(sNo.substr(7, 1)) * 1 + parseInt(sNo.substr(8, 1)) * 6;
  11.   a = a + parseInt(sNo.substr(9, 1)) * 3 + parseInt(sNo.substr(10, 1)) * 7 + parseInt(sNo.substr(11, 1)) * 9




    
;
  12.   a = a + parseInt(sNo.substr(12, 1)) * 10 + parseInt(sNo.substr(13, 1)) * 5 + parseInt(sNo.substr(14, 1)) * 8;
  13.   a = a + parseInt(sNo.substr(15, 1)) * 4 + parseInt(sNo.substr(16, 1




    
)) * 2;
  14.   b = a % 11;
  16.   




    
if (b == 2) {
  17.     c = sNo.substr(17, 1).toUpperCase();
  18.   } 




    
else {
  19.     c = parseInt(sNo.substr(17, 1));
  20.   }
  21. 




    

  22.   switch (b) {
  23.     




    
case 0:
  24.       if (c != 1) {
  25.         




    
return false;
  26.       }
  27.       break;
  28.     




    
case 1:
  29.       if (c != 0) {
  30.         




    
return false;
  31.       }
  32.       




    
break;
  33.     case 2:
  34.       if (c != "X") {
  35.         




    
return false;
  36.       }
  37.       




    
break;
  38.     case 3:
  39.       




    
if (c != 9) {
  40.         return false;
  41.       }
  42.       




    
break;
  43.     case 4:
  44.       




    
if (c != 8) {
  45.         return false;
  46.       }




    

  47.       break;
  48.     case 5




    
:
  49.       if (c != 7) {
  50.         return false;
  51.       }




    

  52.       break;
  53.     




    
case 6:
  54.       if (c != 6) {
  55.         




    
return false;
  56.       }
  57.       break;
  58.     




    
case 7:
  59.       if (c != 5) {
  60.         




    
return false;
  61.       }
  62.       




    
break;
  63.     case 8:
  64.       if (c != 4) {
  65.         




    
return false;
  66.       }
  67.       




    
break;
  68.     case 9:
  69.       




    
if (c != 3) {
  70.         return false;
  71.       }




    

  72.       break;
  73.     case 10:
  74.       




    
if (c != 2) {
  75.         return false;
  76.       };




    

  77.   }
  78.   




    
return true;
  79. }

测试质数 

  1. function




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

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

  1. var




    
 arr = 'abcdaabc';
  3. var info = arr
  4.     .split(




    
'')
  5.     .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});
  6. 




    

  7. console.log(info); //{ a: 3, b: 2, c: 2, d: 1 }

使用 void0 来解决 undefined 被污染问题 

  1. undefined = 1;
  2. !!




    
undefined; // true
  3. !!void(0); // false

单行写一个评级组件 

  1. "★★★★★☆☆☆☆☆"




    
.slice(5 - rate, 10 - rate);

JavaScript 错误处理的方式的正确姿势 

  1. try




    
 {
  2.     something




    

  3. } catch (e) {
  4.     window.location.href =
  5.         




    
"http://stackoverflow.com/search?q=[js]+" +
  6.         e.message;
  7. }

匿名函数自执行写法 

  1. ( 




    
function() {}() );
  2. ( function() {} )();
  3. [ 




    
function() {}() ];
  5. ~ 




    
function() {}();
  6. ! function() {}();
  7. + function() {}();




    

  8. - function() {}();
  10. delete




    
 function() {}();
  11. typeof function() {}();
  12. void




    
 function() {}();
  13. new function() {}();
  14. new




    
 function() {};
  16. var




    
 f = function() {}();
  18. 1




    
, function() {}();
  19. 1 ^ function() {}();
  20. 1




    
 > function() {}();

两个整数交换数值 

  1. var




    
 a = 20, b = 30;
  2. a ^= b;




    

  3. b ^= a;
  4. a ^= b;




    

  6. a; 




    
// 30
  7. b; // 20

数字字符转数字 

  1. var




    
 a = '1';
  2. +a; 




    
// 1

最短的代码实现数组去重 

  1. [...new Set([1,






请到「今天看啥」查看全文


推荐文章
OSC开源社区  ·  Bun 1.2.3带来全新Glob实现——引领性能突破
2 天前
程序员的那些事  ·  OpenAI 奥特曼官宣早产儿！双父生子背后的科技狂人与程序员爱情。网友：人类首个“AGI宝宝”？
2 天前
程序员小灰  ·  3个令人惊艳的DeepSeek项目，诞生了！
3 天前
OSC开源社区  ·  2024: 大模型背景下知识图谱的理性回归
5 天前
程序员小灰  ·  DeepSeek做AI代写，彻底爆了！
6 天前
待字闺中  ·  否定需求：知道自己不想干什么
8 年前
编剧帮  ·  安宁长文回应剧版《温暖的弦》：黄晓明和曾经的占南弦“遭遇”完全重叠
7 年前
什么值得吃  ·  喝完 43 瓶三得利全系列气泡酒，前 5 名好喝到飞起！
7 年前
photoshop资源库  ·  沙化海报是这么玩的呢，你造吗？
7 年前
定量群学  ·  教统计学的老师，你确定你教对了吗？
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!