JavaScript 有用的代码片段和 trick

浮点数取整

> 0; // 123 ~~x; // 123 x | 0; // 123 Math.floor(x); // 123

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

生成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进制颜色代码 生成

驼峰命名转下划线

url查询参数转json格式

((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参数

n维数组展开成一维数组

ary.reduce((a,b) => a.concat(Array.isArray(b) ? flatten(b) : b),[]); flatten(foo); // [1,10] // 方法六 function flatten(a) { return Array.isArray(a) ? [].concat(...a.map(flatten)) : a;

注：更多方法请参考《nofollow" target="_blank" href="https://stackoverflow.com/questions/27266550/how-to-flatten-nested-array-in-javascript">How to flatten nested array in JavaScript?》

日期格式化

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

特殊字符转义

/g,">").replace(/"/g,'"'); return str; } htmlspecialchars('&jfkds<>'); // "&jfkds<>"

动态插入js

格式化数量

{ return ((index % 3) ? next : (next + ',')) + prev }); } formatNum('2313323'); // "2,323"

身份证验证

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

测试质数

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

(p[k]++ || (p[k] = 1),p),{}); console.log(info); //{ a: 3,b: 2,c: 2,d: 1 }

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

单行写一个评级组件

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

匿名函数自执行写法

function() {}();

两个整数交换数值

数字字符转数字

最短的代码实现数组去重

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

将argruments对象转换成数组

// 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

-1) { // ... } if (~str.indexOf('lo')) { // ... }

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

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

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

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

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

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

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

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

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

判断对象的实例

方法一: 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 isFunction(value) { return Object.prototype.toString.call(value).slice(8,-1) === 'Function'; }

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

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

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

数字四舍五入

>> 31 ? 0 : p | 0) v *= p; return (v + 0.5 + (v >> 31) | 0) / p } round(123.45353,2); // 123.45

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

-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

JavaScript浮点数精度问题

格式化表单数据

创建指定长度非空数组

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

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

i); // [empty × 3] b.map((v,i) => i); // [0,2]

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

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

以上所述是小编给大家介绍的JavaScript 有用的代码片段和 trick。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/js/33652.html