JavaScript 有用的代码片段和 trick

本文内容来自知乎《有哪些短小却令人惊叹的 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()*0x10000000).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']

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]

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

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

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

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

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), {});

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:///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, '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);

3. // ES6：

4. var argArray = Array.from(arguments)

6. // or

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

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

7.  // ...

8. }

parseInt() or Number()

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

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

1. var a = '520';

2. var b = '520px';

4. Number(a); // 520

5. parseInt(a); // 520

7. Number(b); // NaN

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

6. a + ''; // 42

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

10. // 方法二: ES5

11. function Person(name, age) {

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

13.  self.name = name;

14.  self.age = age;

16.  return self;

17. }

19. // 方法三：ES6

20. function Person(name, age) {

21.  if (!new.target) {

22.    throw 'Peron must called with new';

23.  }

24.  this.name = name;

25.  this.age = age;

26. }

数据安全类型检查

1. // 对象

2. function isObject(value) {

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

4. }

6. // 数组

7. function isArray(value) {

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

9. }

11. // 函数

12. function isFunction(value) {

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

14. }

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

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

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

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

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

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

1. var suffix = ' name';

2. var person = {

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

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

5. }

7. person['first name']; // 'Nicholas'

8. person['last name']; // 'Zakas'

完~