微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

JavaScript 有用的代码片段和 trick

2018-02-17 21:44 前端大全

(点击上方公众号,可快速关注)


作者:jenemy

https://segmentfault.com/a/1190000011557368


本文内容来自知乎《有哪些短小却令人惊叹的 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);

  3. // 方法二

  4. Math.random().toString().slice(-6);

  5. // 方法三

  6. Math.random().toFixed(6).slice(-6);

  7. // 方法四

  8. '' + 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]);

  3. // 对应ES5实现

  4. var query = function(search) {

  5.  if (search === void 0) { search = ''; }

  6.  return (function(querystring) {

  7.    if (querystring === void 0) { querystring = ''; }

  8.    return (function(q) {

  9.      return (querystring.split('&').forEach(function(item) {

  10.        return (function(kv) {

  11.          return kv[0] && (q[kv[0]] = kv[1]);

  12.        })(item.split('='));

  13.      }), q);

  14.    })({});

  15.  })(search.split('?')[1]);

  16. };

  17. 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];

  2. // 方法一

  3. // 限制:数组项不能出现`,`,同时数组项全部变成了字符数字

  4. foo.toString().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

  5. // 方法二

  6. // 转换后数组项全部变成数字了

  7. eval('[' + foo + ']'); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  8. // 方法三,使用ES6展开操作符

  9. // 写法太过麻烦,太过死板

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

  11. // 方法四

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

  13. // 方法五

  14. const flatten = (ary) => ary.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

  15. flatten(foo); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

  16. // 方法六

  17. function flatten(a) {

  18.  return Array.isArray(a) ? [].concat(...a.map(flatten)) : a;

  19. }

  20. 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. format1(new Date(), 'yy-M-d h:m:s'); // 17-10-14 22:14:41

  16. // 方法二

  17. Date.prototype.format = function (fmt) {

  18.  var o = {

  19.    "M+": this.getMonth() + 1, //月份

  20.    "d+": this.getDate(), //日

  21.    "h+": this.getHours(), //小时

  22.    "m+": this.getMinutes(), //分

  23.    "s+": this.getSeconds(), //秒

  24.    "q+": Math.floor((this.getMonth() + 3) / 3), //季度

  25.    "S": this.getMilliseconds() //毫秒

  26.  };

  27.  if (/(y+)/.test(fmt)){

  28.    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

  29.  }

  30.  for (var k in o){

  31.    if (new RegExp("(" + k + ")").test(fmt)){

  32.      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

  33.    }

  34.  }    

  35.  return fmt;

  36. }

  37. 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. }

  15. var text = '贷款买房,也意味着你能给自己的资产加杠杆,能够撬动更多的钱,来孳生更多的财务性收入。';

  16. wordCount(text); // 38

特殊字符转义

 
           
  1. function htmlspecialchars (str) {

  2.  var str = str.toString().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, '&quot;');

  3.  return str;

  4. }

  5. htmlspecialchars('&jfkds<>'); // "&amp;jfkds&lt;&gt;"

动态插入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. formatNum(2313123, 3); // "2,313,123.000"

  12. // 方法二

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

  14. // 方法三

  15. function formatNum(str) {

  16.  return str.split('').reverse().reduce((prev, next, index) => {

  17.    return ((index % 3) ? next : (next + ',')) + prev

  18.  });

  19. }

  20. 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();

  6.  var a, b, c;

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

  8.  a = a + parseInt(sNo.substr(3, 1)) * 5 + parseInt(sNo.substr(4, 1)) * 8 + parseInt(sNo.substr(5, 1)) * 4;

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

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

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

  12.  a = a + parseInt(sNo.substr(15, 1)) * 4 + parseInt(sNo.substr(16, 1)) * 2;

  13.  b = a % 11;

  14.  if (b == 2) {

  15.    c = sNo.substr(17, 1).toUpperCase();

  16.  } else {

  17.    c = parseInt(sNo.substr(17, 1));

  18.  }

  19.  switch (b) {

  20.    case 0:

  21.      if (c != 1) {

  22.        return false;

  23.      }

  24.      break;

  25.    case 1:

  26.      if (c != 0) {

  27.        return false;

  28.      }

  29.      break;

  30.    case 2:

  31.      if (c != "X") {

  32.        return false;

  33.      }

  34.      break;

  35.    case 3:

  36.      if (c != 9) {

  37.        return false;

  38.      }

  39.      break;

  40.    case 4:

  41.      if (c != 8) {

  42.        return false;

  43.      }

  44.      break;

  45.    case 5:

  46.      if (c != 7) {

  47.        return false;

  48.      }

  49.      break;

  50.    case 6:

  51.      if (c != 6) {

  52.        return false;

  53.      }

  54.      break;

  55.    case 7:

  56.      if (c != 5) {

  57.        return false;

  58.      }

  59.      break;

  60.    case 8:

  61.      if (c != 4) {

  62.        return false;

  63.      }

  64.      break;

  65.    case 9:

  66.      if (c != 3) {

  67.        return false;

  68.      }

  69.      break;

  70.    case 10:

  71.      if (c != 2) {

  72.        return false;

  73.      };

  74.  }

  75.  return true;

  76. }

测试质数

 
           
  1. function isPrime(n) {

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

  3. }

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

 
           
  1. var arr = 'abcdaabc';

  2. var info = arr

  3.    .split('')

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

  5. 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() {}() ];

  4. ~ function() {}();

  5. ! function() {}();

  6. + function() {}();

  7. - function() {}();

  8. delete function() {}();

  9. typeof function() {}();

  10. void function() {}();

  11. new function() {}();

  12. new function() {};

  13. var f = function() {}();

  14. 1, function() {}();

  15. 1 ^ function() {}();

  16. 1 > function() {}();

两个整数交换数值

 
           
  1. var a = 20, b = 30;

  2. a ^= b;

  3. b ^= a;

  4. a ^= b;

  5. a; // 30

  6. b; // 20

数字字符转数字

 
           
  1. var a = '1';

  2. +a; // 1

最短的代码实现数组去重

 
           
  1. [...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3]

用最短的代码实现一个长度为m(6)且值都n(8)的数组

 
           
  1. Array(6).fill(8); // [8, 8, 8, 8, 8, 8]

将argruments对象转换成数组

 
           
  1. var argArray = Array.prototype.slice.call(arguments);

  2. // ES6:

  3. var argArray = Array.from(arguments)

  4. // or

  5. var argArray = [...arguments];

获取日期时间缀

 
           
  1. // 获取指定时间的时间缀

  2. new Date().getTime();

  3. (new Date()).getTime();

  4. (new Date).getTime();

  5. // 获取当前的时间缀

  6. Date.now();

  7. // 日期显示转换为数字

  8. +new Date();

使用 ~x.indexOf('y')来简化 x.indexOf('y')>-1

 
           
  1. var str = 'hello world';

  2. if (str.indexOf('lo') > -1) {

  3.  // ...

  4. }

  5. if (~str.indexOf('lo')) {

  6.  // ...

  7. }

parseInt() or Number()

两者的差别之处在于解析转换两者之间的理解。

解析允许字符串中含有非数字字符,解析按从左到右的顺序,如果遇到非数字字符就停止。而转换不允许出现非数字字符,否者会失败并返回NaN。

 
           
  1. var a = '520';

  2. var b = '520px';

  3. Number(a); // 520

  4. parseInt(a); // 520

  5. Number(b); // NaN

  6. parseInt(b); // 520

parseInt方法第二个参数用于指定转换的基数,ES5默认为10进制。

 
           
  1. parseInt('10', 2); // 2

  2. parseInt('10', 8); // 8

  3. parseInt('10', 10); // 10

  4. parseInt('10', 16);  // 16

对于网上 parseInt(0.0000008)的结果为什么为8,原因在于0.0000008转换成字符为"8e-7",然后根据 parseInt的解析规则自然得到"8"这个结果。

+ 拼接操作,+x or String(x)?

+运算符可用于数字加法,同时也可以用于字符串拼接。如果+的其中一个操作符是字符串(或者通过 隐式强制转换可以得到字符串),则执行字符串拼接;否者执行数字加法。

需要注意的时对于数组而言,不能通过 valueOf()方法得到简单基本类型值,于是转而调用 toString()方法。

 
           
  1. [1,2] + [3, 4]; // "1,23,4"

对于对象同样会先调用 valueOf()方法,然后通过 toString()方法返回对象的字符串表示。

 
           
  1. var a = {};

  2. a + 123; // "[object Object]123"

对于 a+""隐式转换和 String(a)显示转换有一个细微的差别: a+''会对a调用 valueOf()方法,而 String()直接调用 toString()方法。大多数情况下我们不会考虑这个问题,除非真遇到。

 
           
  1. var a  = {

  2.  valueOf: function() { return 42; },

  3.  toString: function() { return 4; }

  4. }

  5. a + ''; // 42

  6. String(a); // 4

判断对象的实例

 
           
  1. // 方法一: ES3

  2. function Person(name, age) {

  3.  if (!(this instanceof Person)) {

  4.    return new Person(name, age);

  5.  }

  6.  this.name = name;

  7.  this.age = age;

  8. }

  9. // 方法二: ES5

  10. function Person(name, age) {

  11.  var self = this instanceof Person ? this : Object.create(Person.prototype);

  12.  self.name = name;

  13.  self.age = age;

  14.  return self;

  15. }

  16. // 方法三:ES6

  17. function Person(name, age) {

  18.  if (!new.target) {

  19.    throw 'Peron must called with new';

  20.  }

  21.  this.name = name;

  22.  this.age = age;

  23. }

数据安全类型检查

 
           
  1. // 对象

  2. function isObject(value) {

  3.  return Object.prototype.toString.call(value).slice(8, -1) === 'Object'';

  4. }

  5. // 数组

  6. function isArray(value) {

  7.  return Object.prototype.toString.call(value).slice(8, -1) === 'Array';

  8. }

  9. // 函数

  10. function isFunction(value) {

  11.  return Object.prototype.toString.call(value).slice(8, -1) === 'Function';

  12. }

让数字的字面值看起来像对象

 
           
  1. 2.toString(); // Uncaught SyntaxError: Invalid or unexpected token

  2. 2..toString(); // 第二个点号可以正常解析

  3. 2 .toString(); // 注意点号前面的空格

  4. (2).toString(); // 2先被计算

对象可计算属性名(仅在ES6中)

 
           
  1. var suffix = ' name';

  2. var person = {

  3.  ['first' + suffix]: 'Nicholas',

  4.  ['last' + suffix]: 'Zakas'

  5. }

  6. person['first name']; // "Nicholas"

  7. person['last name']; // "Zakas"



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 淘宝 flexible.js 漏洞修补:记一次 rem 踩坑记录 使用 JavaScript 实现机器学习和神经学网络 我们不仅仅是前端er —— 折腾服务器武装自己 宝宝不开森,新年不要学 JavaScript 了 前端框架三巨头年度走势对比:Vue 增长率最高
猜您喜欢 Pokémon GO 火爆背后的云支持 Cocos独立游戏精品《时空旅途》获App Store全球推荐 iOS完全自学手册——[三]Objective-C语言速成,利用Objective-C创建自己的对象 [随笔]DTCC大会归来,为何云计算厂商都在搞数据库? 从贝叶斯的角度看正则项