浮點數取整
const x = 123.4545;x >> 0; // 123~~x; // 123x | 0; // 123Math.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_registryurl查詢參數轉json格式
// ES6const 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"http:// 方法二'2313123'.replace(//B(?=(/d{3})+(?!/d))/g, ','); // "2,313,123"http:// 方法三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. + 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; // 30b; // 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)// orvar 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); // 520parseInt(a); // 520Number(b); // NaNparseInt(b); // 520
parseInt方法第二個參數用于指定轉換的基數，ES5默認為10進制。
parseInt('10', 2); // 2parseInt('10', 8); // 8parseInt('10', 10); // 10parseInt('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 + ''; // 42String(a); // 4判斷對象的實例
// 方法一: ES3function Person(name, age) { if (!(this instanceof Person)) { return new Person(name, age); } this.name = name; this.age = age;}// 方法二: ES5function Person(name, age) { var self = this instanceof Person ? this : Object.create(Person.prototype); self.name = name; self.age = age; return self;}// 方法三：ES6function 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.30000000000000004isEqual(0.1 + 0.2, 0.3); // true0.7 + 0.1 + 99.1 + 0.1; // 99.99999999999999isEqual(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，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
