JavaScript 有用的代碼片段和 trick
更新時(shí)間：2018年02月22日 10:04:23 作者：jenemy
這篇文章主要介紹了JavaScript 有用的代碼片段和 trick的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
浮點(diǎn)數(shù)取整
const x = 123.4545; x >> 0; // 123 ~~x; // 123 x | 0; // 123 Math.floor(x); // 123
注意：前三種方法只適用于32個(gè)位整數(shù)，對(duì)于負(fù)數(shù)的處理上和 Math.floor是不同的。
Math.floor(-12.53); // -13 -12.53 | 0; // -12
生成6位數(shù)字驗(yàn)證碼
// 方法一
('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進(jìn)制顏色代碼生成
(function() {
return '#'+('00000'+
(Math.random()*0x1000000<<0).toString(16)).slice(-6);
})();
駝峰命名轉(zhuǎn)下劃線(xiàn)
'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase(); // component_map_model_registry
url查詢(xún)參數(shù)轉(zhuǎn)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]);
// 對(duì)應(yīng)ES5實(shí)現(xiàn)
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參數(shù)
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維數(shù)組展開(kāi)成一維數(shù)組
var foo = [1, [2, 3], ['4', 5, ['6',7,[8]]], [9], 10];
// 方法一
// 限制：數(shù)組項(xiàng)不能出現(xiàn)`,`，同時(shí)數(shù)組項(xiàng)全部變成了字符數(shù)字
foo.toString().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
// 方法二
// 轉(zhuǎn)換后數(shù)組項(xiàng)全部變成數(shù)字了
eval('[' + foo + ']'); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 方法三，使用ES6展開(kāi)操作符
// 寫(xiě)法太過(guò)麻煩，太過(guò)死板
[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;
注：更多方法請(qǐng)參考《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(), //小時(shí)
"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
特殊字符轉(zhuǎn)義
function htmlspecialchars (str) {
var str = str.toString().replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"');
return str;
}
htmlspecialchars('&jfkds<>'); // "&jfkds<>"
動(dòng)態(tài)插入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);
}
格式化數(shù)量
// 方法一
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"
身份證驗(yàn)證
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;
}
測(cè)試質(zhì)數(shù)
function isPrime(n) {
return !(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))
}
統(tǒng)計(jì)字符串中相同字符出現(xiàn)的次數(shù)
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來(lái)解決 undefined被污染問(wèn)題
undefined = 1; !!undefined; // true !!void(0); // false
單行寫(xiě)一個(gè)評(píng)級(jí)組件
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
JavaScript 錯(cuò)誤處理的方式的正確姿勢(shì)
try {
something
} catch (e) {
window.location.href =
"http://stackoverflow.com/search?q=[js]+" +
e.message;
}
匿名函數(shù)自執(zhí)行寫(xiě)法
( 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() {}();
兩個(gè)整數(shù)交換數(shù)值
var a = 20, b = 30; a ^= b; b ^= a; a ^= b; a; // 30 b; // 20
數(shù)字字符轉(zhuǎn)數(shù)字
var a = '1'; +a; // 1
最短的代碼實(shí)現(xiàn)數(shù)組去重
[...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3]
用最短的代碼實(shí)現(xiàn)一個(gè)長(zhǎng)度為m(6)且值都n(8)的數(shù)組
Array(6).fill(8); // [8, 8, 8, 8, 8, 8]
將argruments對(duì)象轉(zhuǎn)換成數(shù)組
var argArray = Array.prototype.slice.call(arguments); // ES6： var argArray = Array.from(arguments) // or var argArray = [...arguments];
獲取日期時(shí)間綴
// 獲取指定時(shí)間的時(shí)間綴 new Date().getTime(); (new Date()).getTime(); (new Date).getTime(); // 獲取當(dāng)前的時(shí)間綴 Date.now(); // 日期顯示轉(zhuǎn)換為數(shù)字 +new Date();
使用 ~x.indexOf('y')來(lái)簡(jiǎn)化 x.indexOf('y')>-1
var str = 'hello world';
if (str.indexOf('lo') > -1) {
// ...
}
if (~str.indexOf('lo')) {
// ...
}
兩者的差別之處在于解析和轉(zhuǎn)換兩者之間的理解。
解析允許字符串中含有非數(shù)字字符，解析按從左到右的順序，如果遇到非數(shù)字字符就停止。而轉(zhuǎn)換不允許出現(xiàn)非數(shù)字字符，否者會(huì)失敗并返回NaN。
var a = '520'; var b = '520px'; Number(a); // 520 parseInt(a); // 520 Number(b); // NaN parseInt(b); // 520
parseInt方法第二個(gè)參數(shù)用于指定轉(zhuǎn)換的基數(shù)，ES5默認(rèn)為10進(jìn)制。
parseInt('10', 2); // 2
parseInt('10', 8); // 8
parseInt('10', 10); // 10
parseInt('10', 16); // 16
對(duì)于網(wǎng)上 parseInt(0.0000008)的結(jié)果為什么為8，原因在于0.0000008轉(zhuǎn)換成字符為"8e-7"，然后根據(jù) parseInt的解析規(guī)則自然得到"8"這個(gè)結(jié)果。
+ 拼接操作，+x or String(x)？
+運(yùn)算符可用于數(shù)字加法，同時(shí)也可以用于字符串拼接。如果+的其中一個(gè)操作符是字符串(或者通過(guò) 隱式強(qiáng)制轉(zhuǎn)換可以得到字符串)，則執(zhí)行字符串拼接；否者執(zhí)行數(shù)字加法。
需要注意的時(shí)對(duì)于數(shù)組而言，不能通過(guò) valueOf()方法得到簡(jiǎn)單基本類(lèi)型值，于是轉(zhuǎn)而調(diào)用 toString()方法。
[1,2] + [3, 4]; // "1,23,4"
對(duì)于對(duì)象同樣會(huì)先調(diào)用 valueOf()方法，然后通過(guò) toString()方法返回對(duì)象的字符串表示。
var a = {};
a + 123; // "[object Object]123"
對(duì)于 a+""隱式轉(zhuǎn)換和 String(a)顯示轉(zhuǎn)換有一個(gè)細(xì)微的差別： a+''會(huì)對(duì)a調(diào)用 valueOf()方法，而 String()直接調(diào)用 toString()方法。大多數(shù)情況下我們不會(huì)考慮這個(gè)問(wèn)題，除非真遇到。
var a = {
valueOf: function() { return 42; },
toString: function() { return 4; }
}
a + ''; // 42
String(a); // 4
判斷對(duì)象的實(shí)例
// 方法一: 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;
}
數(shù)據(jù)安全類(lèi)型檢查
// 對(duì)象
function isObject(value) {
return Object.prototype.toString.call(value).slice(8, -1) === 'Object'';
}
// 數(shù)組
function isArray(value) {
return Object.prototype.toString.call(value).slice(8, -1) === 'Array';
}
// 函數(shù)
function isFunction(value) {
return Object.prototype.toString.call(value).slice(8, -1) === 'Function';
}
讓數(shù)字的字面值看起來(lái)像對(duì)象
toString(); // Uncaught SyntaxError: Invalid or unexpected token ..toString(); // 第二個(gè)點(diǎn)號(hào)可以正常解析 .toString(); // 注意點(diǎn)號(hào)前面的空格 (2).toString(); // 2先被計(jì)算
對(duì)象可計(jì)算屬性名(僅在ES6中)
var suffix = ' name';
var person = {
['first' + suffix]: 'Nicholas',
['last' + suffix]: 'Zakas'
}
person['first name']; // "Nicholas"
person['last name']; // "Zakas"
數(shù)字四舍五入
// 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
在瀏覽器中根據(jù)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浮點(diǎn)數(shù)精度問(wèn)題
function isEqual(n1, n2, epsilon) {
epsilon = epsilon == undefined ? 10 : epsilon; // 默認(rèn)精度為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
格式化表單數(shù)據(jù)
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"
創(chuàng)建指定長(zhǎng)度非空數(shù)組
在JavaScript中可以通過(guò)new Array(3)的形式創(chuàng)建一個(gè)長(zhǎng)度為3的空數(shù)組。在老的Chrome中其值為[undefined x 3]，在最新的Chrome中為[empty x 3]，即空單元數(shù)組。在老Chrome中，相當(dāng)于顯示使用[undefined, undefined, undefined]的方式創(chuàng)建長(zhǎng)度為3的數(shù)組。
但是，兩者在調(diào)用map()方法的結(jié)果是明顯不同的
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]
多數(shù)情況我們期望創(chuàng)建的是包含undefined值的指定長(zhǎng)度的空數(shù)組，可以通過(guò)下面這種方法來(lái)達(dá)到目的：
var a = Array.apply(null, { length: 3 });
a; // [undefined, undefined, undefined]
a.map((v, i) => i); // [0, 1, 2]
總之，盡量不要?jiǎng)?chuàng)建和使用空單元數(shù)組。
以上所述是小編給大家介紹的JavaScript 有用的代碼片段和 trick，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Google Map API更新實(shí)現(xiàn)用戶(hù)自定義標(biāo)注坐標(biāo)
由于工作需要，又要開(kāi)始看Google Map API 代碼，今天再把我之前的GoogleMap類(lèi)，又更新了下，加了個(gè)簡(jiǎn)單的用戶(hù)自定義標(biāo)注坐標(biāo)的功能。看看吧(代碼沒(méi)怎么優(yōu)化，別見(jiàn)笑)2009-07-07
這篇文章主要介紹了詳解關(guān)于webpack多入口熱加載很慢的原因，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Javascript生成器（Generator）的介紹與使用
這篇文章主要給大家介紹了關(guān)于Javascript生成器（Generator）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01 
如何使用原生Js實(shí)現(xiàn)隨機(jī)點(diǎn)名詳解
這篇文章主要給大家介紹了關(guān)于如何使用原生Js實(shí)現(xiàn)隨機(jī)點(diǎn)名的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01 
預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存
這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
2023-10-10 
bootstrap table表格客戶(hù)端分頁(yè)實(shí)例
這篇文章主要為大家詳細(xì)介紹了bootstrap table表格客戶(hù)端分頁(yè)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08 
這篇文章主要介紹了JS繼承用法,實(shí)例分析了拷貝繼承、類(lèi)繼承及原型繼承等的使用技巧,需要的朋友可以參考下
2015-02-02 
《JavaScript高級(jí)程序設(shè)計(jì)》閱讀筆記（三） ECMAScript中的引用類(lèi)型
ECMAScript中的引用類(lèi)型，主要包括Object類(lèi)、Boolean類(lèi)、Number類(lèi)、String類(lèi)、instanceof運(yùn)算符
2012-02-02 
前端實(shí)現(xiàn)文本超出指定行數(shù)顯示"展開(kāi)"和"收起"效果詳細(xì)步驟
本文介紹如何使用JavaScript原生代碼實(shí)現(xiàn)文本折疊展開(kāi)效果,并提供方法指導(dǎo)如何在Vue或React等框架中修改實(shí)現(xiàn),詳細(xì)介紹了創(chuàng)建整體框架、設(shè)置樣式及利用JS控制元素的步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10