JavaScript 有用的代码片段和 trick

浮点数取整

const x = 123.4545;
x >> 0; // 123
~~x; // 123
x | 0; // 123
math.floor(x); // 123

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

math.floor(-12.53); // -13
-12.53 | 0; // -12

生成6位数字验证码

// 方法一
('000000' + math.floor(math.random() * 999999)).slice(-6);
// 方法二
math.random().tostring().slice(-6);
// 方法三
math.random().tofixed(6).slice(-6);
// 方法四
'' + math.floor(math.random() * 999999);

16进制颜色代码生成

(function() {
 return '#'+('00000'+
 (math.random()*0x1000000<<0).tostring(16)).slice(-6);
})();

驼峰命名转下划线

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

url查询参数转json格式

// es6
const query = (search = '') => ((querystring = '') => (q => (querystring.split('&').foreach(item => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))), q))({}))(search.split('?')[1]);

// 对应es5实现
var query = function(search) {
 if (search === void 0) { search = ''; }
 return (function(querystring) {
 if (querystring === void 0) { querystring = ''; }
 return (function(q) {
  return (querystring.split('&').foreach(function(item) {
  return (function(kv) {
   return kv[0] && (q[kv[0]] = kv[1]);
  })(item.split('='));
  }), q);
 })({});
 })(search.split('?')[1]);
};
query('?key1=value1&key2=value2'); // es6.html:14 {key1: "value1", key2: "value2"}

获取url参数

function getquerystring(key){
 var reg = new regexp("(^|&)"+ key +"=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
 if(r!=null){
  return unescape(r[2]);
 }
 return null;
}

n维数组展开成一维数组

var foo = [1, [2, 3], ['4', 5, ['6',7,[8]]], [9], 10];
// 方法一
// 限制：数组项不能出现`,`，同时数组项全部变成了字符数字
foo.tostring().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
// 方法二
// 转换后数组项全部变成数字了
eval('[' + foo + ']'); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 方法三，使用es6展开操作符
// 写法太过麻烦，太过死板
[1, ...[2, 3], ...['4', 5, ...['6',7,...[8]]], ...[9], 10]; // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]
// 方法四
json.parse(`[${json.stringify(foo).replace(/\[|]/g, '')}]`); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]
// 方法五
const flatten = (ary) => ary.reduce((a, b) => a.concat(array.isarray(b) ? flatten(b) : b), []);
flatten(foo); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]
// 方法六
function flatten(a) {
 return array.isarray(a) ? [].concat(...a.map(flatten)) : a;

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

日期格式化

// 方法一
function format1(x, y) {
 var z = {
 y: x.getfullyear(),
 m: x.getmonth() + 1,
 d: x.getdate(),
 h: x.gethours(),
 m: x.getminutes(),
 s: x.getseconds()
 };
 return y.replace(/(y+|m+|d+|h+|m+|s+)/g, function(v) {
 return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
 });
}

format1(new date(), 'yy-m-d h:m:s'); // 17-10-14 22:14:41

// 方法二
date.prototype.format = function (fmt) { 
 var o = {
 "m+": this.getmonth() + 1, //月份 
 "d+": this.getdate(), //日 
 "h+": this.gethours(), //小时 
 "m+": this.getminutes(), //分 
 "s+": this.getseconds(), //秒 
 "q+": math.floor((this.getmonth() + 3) / 3), //季度 
 "s": this.getmilliseconds() //毫秒 
 };
 if (/(y+)/.test(fmt)){
 fmt = fmt.replace(regexp.$1, (this.getfullyear() + "").substr(4 - regexp.$1.length));
 } 
 for (var k in o){
 if (new regexp("(" + k + ")").test(fmt)){
  fmt = fmt.replace(regexp.$1, (regexp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 }
 }  
 return fmt;
}
new date().format('yy-m-d h:m:s'); // 17-10-14 22:18:17

特殊字符转义

function htmlspecialchars (str) {
 var str = str.tostring().replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"');
 return str;
}
htmlspecialchars('&jfkds<>'); // "&jfkds<>"

动态插入js

function injectscript(src) {
 var s, t;
 s = document.createelement('script');
 s.type = 'text/javascript';
 s.async = true;
 s.src = src;
 t = document.getelementsbytagname('script')[0];
 t.parentnode.insertbefore(s, t);
}

格式化数量

// 方法一
function formatnum (num, n) {
 if (typeof num == "number") {
 num = string(num.tofixed(n || 0));
 var re = /(-?\d+)(\d{3})/;
 while (re.test(num)) num = num.replace(re, "$1,$2");
 return num;
 }
 return num;
}
formatnum(2313123, 3); // "2,313,123.000"
// 方法二
'2313123'.replace(/\b(?=(\d{3})+(?!\d))/g, ','); // "2,313,123"
// 方法三
function formatnum(str) {
 return str.split('').reverse().reduce((prev, next, index) => {
 return ((index % 3) ? next : (next + ',')) + prev
 });
}
formatnum('2313323'); // "2,313,323"

身份证验证

function chechchncardid(sno) {
 if (!this.regexptest(sno, /^[0-9]{17}[x0-9]$/)) {
 return false;
 }
 sno = sno.tostring();

 var a, b, c;
 a = parseint(sno.substr(0, 1)) * 7 + parseint(sno.substr(1, 1)) * 9 + parseint(sno.substr(2, 1)) * 10;
 a = a + parseint(sno.substr(3, 1)) * 5 + parseint(sno.substr(4, 1)) * 8 + parseint(sno.substr(5, 1)) * 4;
 a = a + parseint(sno.substr(6, 1)) * 2 + parseint(sno.substr(7, 1)) * 1 + parseint(sno.substr(8, 1)) * 6;
 a = a + parseint(sno.substr(9, 1)) * 3 + parseint(sno.substr(10, 1)) * 7 + parseint(sno.substr(11, 1)) * 9;
 a = a + parseint(sno.substr(12, 1)) * 10 + parseint(sno.substr(13, 1)) * 5 + parseint(sno.substr(14, 1)) * 8;
 a = a + parseint(sno.substr(15, 1)) * 4 + parseint(sno.substr(16, 1)) * 2;
 b = a % 11;

 if (b == 2) {
 c = sno.substr(17, 1).touppercase();
 } else {
 c = parseint(sno.substr(17, 1));
 }

 switch (b) {
 case 0:
  if (c != 1) {
  return false;
  }
  break;
 case 1:
  if (c != 0) {
  return false;
  }
  break;
 case 2:
  if (c != "x") {
  return false;
  }
  break;
 case 3:
  if (c != 9) {
  return false;
  }
  break;
 case 4:
  if (c != 8) {
  return false;
  }
  break;
 case 5:
  if (c != 7) {
  return false;
  }
  break;
 case 6:
  if (c != 6) {
  return false;
  }
  break;
 case 7:
  if (c != 5) {
  return false;
  }
  break;
 case 8:
  if (c != 4) {
  return false;
  }
  break;
 case 9:
  if (c != 3) {
  return false;
  }
  break;
 case 10:
  if (c != 2) {
  return false;
  };
 }
 return true;
}

测试质数

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

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

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 }

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

undefined = 1;
!!undefined; // true
!!void(0); // false

单行写一个评级组件

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

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

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

匿名函数自执行写法

( function() {}() );
( function() {} )();
[ function() {}() ];
~ function() {}();
! function() {}();
+ function() {}();
- function() {}();
delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};
var f = function() {}();
1, function() {}();
1 ^ function() {}();
1 > function() {}();

两个整数交换数值

var a = 20, b = 30;
a ^= b;
b ^= a;
a ^= b;
a; // 30
b; // 20

数字字符转数字

var a = '1';
+a; // 1

最短的代码实现数组去重

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

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

array(6).fill(8); // [8, 8, 8, 8, 8, 8]

将argruments对象转换成数组

var argarray = array.prototype.slice.call(arguments);

// es6：
var argarray = array.from(arguments)

// or
var argarray = [...arguments];

获取日期时间缀

// 获取指定时间的时间缀
new date().gettime();
(new date()).gettime();
(new date).gettime();
// 获取当前的时间缀
date.now();
// 日期显示转换为数字
+new date();

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

var str = 'hello world';
if (str.indexof('lo') > -1) {
 // ...
}
if (~str.indexof('lo')) {
 // ...
}

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

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

var a = '520';
var b = '520px';
number(a); // 520
parseint(a); // 520
number(b); // nan
parseint(b); // 520

parseint方法第二个参数用于指定转换的基数，es5默认为10进制。

parseint('10', 2); // 2
parseint('10', 8); // 8
parseint('10', 10); // 10
parseint('10', 16); // 16

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

+ 拼接操作，+x or string(x)？

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

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

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

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

var a = {};
a + 123; // "[object object]123"

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

var a = {
 valueof: function() { return 42; },
 tostring: function() { return 4; }
}
a + ''; // 42
string(a); // 4

判断对象的实例

// 方法一: es3
function person(name, age) {
 if (!(this instanceof person)) {
  return new person(name, age);
 }
 this.name = name;
 this.age = age;
}
// 方法二: es5
function person(name, age) {
 var self = this instanceof person ? this : object.create(person.prototype);
 self.name = name;
 self.age = age;
 return self;
}
// 方法三：es6
function person(name, age) {
 if (!new.target) {
  throw 'peron must called with new';
 }
 this.name = name;
 this.age = age;
}

数据安全类型检查

// 对象
function isobject(value) {
 return object.prototype.tostring.call(value).slice(8, -1) === 'object'';
}
// 数组
function isarray(value) {
 return object.prototype.tostring.call(value).slice(8, -1) === 'array';
}
// 函数
function isfunction(value) {
 return object.prototype.tostring.call(value).slice(8, -1) === 'function';
}

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

tostring(); // uncaught syntaxerror: invalid or unexpected token
..tostring(); // 第二个点号可以正常解析
 .tostring(); // 注意点号前面的空格
(2).tostring(); // 2先被计算

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

var suffix = ' name';
var person = {
 ['first' + suffix]: 'nicholas',
 ['last' + suffix]: 'zakas'
}
person['first name']; // "nicholas"
person['last name']; // "zakas"

数字四舍五入

// v: 值，p: 精度
function (v, p) {
 p = math.pow(10, p >>> 31 ? 0 : p | 0)
 v *= p;
 return (v + 0.5 + (v >> 31) | 0) / p
}
round(123.45353, 2); // 123.45

在浏览器中根据url下载文件

function download(url) {
 var ischrome = navigator.useragent.tolowercase().indexof('chrome') > -1;
 var issafari = navigator.useragent.tolowercase().indexof('safari') > -1;
 if (ischrome || issafari) {
  var link = document.createelement('a');
  link.href = url;
  if (link.download !== undefined) {
   var filename = url.substring(url.lastindexof('/') + 1, url.length);
   link.download = filename;
  }
  if (document.createevent) {
   var e = document.createevent('mouseevents');
   e.initevent('click', true, true);
   link.dispatchevent(e);
   return true;
  }
 }
 if (url.indexof('?') === -1) {
  url += '?download';
 }
 window.open(url, '_self');
 return true;
}

快速生成uuid

function uuid() {
 var d = new date().gettime();
 var uuid = 'xxxxxxxxxxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  var r = (d + math.random() * 16) % 16 | 0;
  d = math.floor(d / 16);
  return (c == 'x' ? r : (r & 0x3 | 0x8)).tostring(16);
 });
 return uuid;
};
uuid(); // "33f7f26656cb-499b-b73e-89a921a59ba6"

javascript浮点数精度问题

function isequal(n1, n2, epsilon) {
 epsilon = epsilon == undefined ? 10 : epsilon; // 默认精度为10
 return n1.tofixed(epsilon) === n2.tofixed(epsilon);
}
0.1 + 0.2; // 0.30000000000000004
isequal(0.1 + 0.2, 0.3); // true
0.7 + 0.1 + 99.1 + 0.1; // 99.99999999999999
isequal(0.7 + 0.1 + 99.1 + 0.1, 100); // true

格式化表单数据

function formatparam(obj) {
 var query = '', name, value, fullsubname, subname, subvalue, innerobj, i;
 for(name in obj) {
  value = obj[name];
  if(value instanceof array) {
   for(i=0; i<value.length; ++i) {
    subvalue = value[i];
    fullsubname = name + '[' + i + ']';
    innerobj = {};
    innerobj[fullsubname] = subvalue;
    query += formatparam(innerobj) + '&';
   }
  }
  else if(value instanceof object) {
   for(subname in value) {
    subvalue = value[subname];
    fullsubname = name + '[' + subname + ']';
    innerobj = {};
    innerobj[fullsubname] = subvalue;
    query += formatparam(innerobj) + '&';
   }
  }
  else if(value !== undefined && value !== null)
   query += encodeuricomponent(name) + '=' + encodeuricomponent(value) + '&';
 }
 return query.length ? query.substr(0, query.length - 1) : query;
}
var param = {
 name: 'jenemy',
 likes: [0, 1, 3],
 membercard: [
  { title: '1', id: 1 },
  { title: '2', id: 2 }
 ]
}
formatparam(param); // "name=12&likes%5b0%5d=0&likes%5b1%5d=1&likes%5b2%5d=3&membercard%5b0%5d%5btitle%5d=1&membercard%5b0%5d%5bid%5d=1&membercard%5b1%5d%5btitle%5d=2&membercard%5b1%5d%5bid%5d=2"

创建指定长度非空数组

在javascript中可以通过new array(3)的形式创建一个长度为3的空数组。在老的chrome中其值为[undefined x 3]，在最新的chrome中为[empty x 3]，即空单元数组。在老chrome中，相当于显示使用[undefined, undefined, undefined]的方式创建长度为3的数组。

但是，两者在调用map()方法的结果是明显不同的

var a = new array(3);
var b = [undefined, undefined, undefined];
a.map((v, i) => i); // [empty × 3]
b.map((v, i) => i); // [0, 1, 2]

多数情况我们期望创建的是包含undefined值的指定长度的空数组，可以通过下面这种方法来达到目的：

var a = array.apply(null, { length: 3 });
a; // [undefined, undefined, undefined]
a.map((v, i) => i); // [0, 1, 2]

总之，尽量不要创建和使用空单元数组。

以上所述是小编给大家介绍的javascript 有用的代码片段和 trick，希望对大家有所帮助