摘要:在老的中其值為,在最新的中為,即空單元數組。在老中,相當于顯示使用的方式創建長度為的數組。判斷是否為中文判斷是否為常見中文符號中文標點符號,。
本文內容來自知乎《有哪些短小卻令人驚嘆的 JavaScript 代碼?》和文章《這些JavaScript編程黑科技,裝逼指南,高逼格代碼,讓你驚嘆不已》,同時也匯集了部分網上其它來源的內容。浮點數取整
const x = 123.4545; x >> 0; // 123 ~~x; // 123 x | 0; // 123 Math.floor(x); // 123
生成6位數字驗證碼注意:前三種方法只適用于32個位整數,對于負數的處理上和Math.floor是不同的。
Math.floor(-12.53); // -13 -12.53 | 0; // -12
// 方法一 ("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格式
// 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; } flatten(foo); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10] // 方法七 var flatten = function(arr) { var result = []; var flat = function* (a) { var length = a.length; for (var i = 0; i < length; i++) { var item = a[i]; if (typeof item !== "number") { yield * flat(item); } else { yield item; } } } for (var f of flat(arr)) { result.push(f); } return result; }
注:更多方法請參考《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 wordCount(data) { var pattern = /[a-zA-Z0-9_u0392-u03c9]+|[u4E00-u9FFFu3400-u4dbfuf900-ufaffu3040-u309fuac00-ud7af]+/g; var m = data.match(pattern); var count = 0; if( m === null ) return count; for (var i = 0; i < m.length; i++) { if (m[i].charCodeAt(0) >= 0x4E00) { count += m[i].length; } else { count += 1; } } return count; } var text = "貸款買房,也意味著你能給自己的資產加杠桿,能夠撬動更多的錢,來孳生更多的財務性收入。"; wordCount(text); // 38特殊字符轉義
function htmlspecialchars (str) { var str = str.toString().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 }使用void 0來解決undefined被污染問題
undefined = 1; !!undefined; // true !!void(0); // false單行寫一個評級組件
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);JavaScript 錯誤處理的方式的正確姿勢
try { something } catch (e) { window.location.href = "http://stackoverflow.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")) { // ... }parseInt() or Number()
兩者的差別之處在于解析和轉換兩者之間的理解。
解析允許字符串中含有非數字字符,解析按從左到右的順序,如果遇到非數字字符就停止。而轉換不允許出現非數字字符,否者會失敗并返回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"; }讓數字的字面值看起來像對象
2.toString(); // Uncaught SyntaxError: Invalid or unexpected token 2..toString(); // 第二個點號可以正常解析 2 .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創建指定長度非空數組 在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]總之,盡量不要創建和使用空單元數組。
debounce方法debounce()方法用來延遲執行函數。
var debounce = function (func, threshold, execAsap) { var timeout; return function debounced() { var obj = this, args = arguments; function delayed() { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; }判斷客戶端var browser = { v: (function() { var u = navigator.userAgent, app = navigator.appVersion, p = navigator.platform; return { trident: u.indexOf("Trident") > -1, //IE內核 presto: u.indexOf("Presto") > -1, //opera內核 webKit: u.indexOf("AppleWebKit") > -1, //蘋果、谷歌內核 gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐內核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端 ios: !!u.match(/i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android終端或uc瀏覽器 iPhone: u.indexOf("iPhone") > -1, //是否為iPhone或者QQHD瀏覽器 iPad: u.indexOf("iPad") > -1, //是否iPad weixin: u.indexOf("MicroMessenger") > -1, //是否微信 webApp: u.indexOf("Safari") == -1, //是否web應該程序,沒有頭部與底部 UCB: u.match(/UCBrowser/i) == "UCBrowser", QQB: u.match(/MQQBrowser/i) == "MQQBrowser", win: p.indexOf("Win") > -1, //判斷是否是WIN操作系統 mac: p.indexOf("Mac") > -1 //判斷是否是Mac操作系統 }; })() }計算輸入字符數并且區分中英文英文、數字包括英文符號占一個長度,中文和中文標點符號占二個長度,這里也只處理常見的中文符號。
// 判斷是否為中文 export const isChinese = ch => { const HAN_REGEX = /[u2E80-u2E99u2E9B-u2EF3u2F00-u2FD5u3005u3007u3021-u3029u3038-u303Bu3400-u4DB5u4E00-u9FD5uF900-uFA6DuFA70-uFAD9]/; return !!ch.match(HAN_REGEX); }; // 判斷是否為常見中文符號 export const isChinesePunctuation = ch => { // 中文標點符號 ·?。ぁǎ尽浚俊?,。《》;:‘’“”「」 const HAN_PUNCTUATION_REGEX = /[u0026u0023u0031u0038u0033u003buff01uffe5u2026u2026uff08uff09u2014u2014u3010u3011uff1fu3001uff0cu3002u300au300buff1buff1au2018u2019u201cu201du300cu300d]/; return !!ch.match(HAN_PUNCTUATION_REGEX); }; // 判斷是否英文字母,包含數字 export const isEnglish = ch => { const code = ch.codePointAt(0); return (code > 64 && code < 91) || (code > 96 && code < 123) || (code > 48 && code < 58); } // 統計字符串的長度,中文占二個字節,英文占一個字節 export const getChCount = str => { const trimmedStr = str.trim(); let count = 0; for (let i = 0; i < trimmedStr.length; i++) { // 先判斷英文,實測發現中文符號在編碼上解析出來的有可能和英文一樣,導致統計錯誤 if (isEnglish(trimmedStr[i])) { count += 1; } else if (isChinese(trimmedStr[i]) || isChinesePunctuation(trimmedStr[i])) { count += 2; } else { count += 1; } } return count; }注意:上面并沒有完整的測試,使用時請多測試一下,及時反饋。根據字節顯示大小/** * 解析字節,例如: * 1000000 bytes -> { size: 976.6, unit: "kB" } * * @param bytes 字節大小 * @returns {{size: number, unit: (string|string|string|string|string|string|string|string)}} */ export const parseBytes = (bytes: number): { size: number, unit: string } => { let i = -1; const byteUnits = [ "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB" ]; do { bytes = bytes / 1024; i++; } while (bytes > 1024); return { size: parseFloat(Math.max(bytes, 0.1).toFixed(1)), unit: byteUnits[ i ] }; };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89062.html
摘要:前端日報精選精讀殺雞用牛刀讓網頁渲染如絲順滑從上下文,到作用域彩蛋理解閉包網頁轉圖片技術分享中文第期反擊爬蟲,前端工程師的腦洞可以有多大浮點數陷阱及解法有用的代碼片段和免費的計算機編程類中文書籍,歡迎投稿核心特性理解 2017-10-15 前端日報 精選 精讀《css-in-js 殺雞用牛刀》WebRender:讓網頁渲染如絲順滑從上下文,到作用域(彩蛋:理解閉包)Vue 2.5 re...
摘要:如果你正在尋找編程技巧,或是想了解編程界發生了哪些新鮮事那么,今天我們帶來的年最佳開發者博客列表,一定是你的菜。地址它是為數不多的印度開發者博客中,能夠提供有價值信息的博客。地址又一個專注前端開發的博客。 如果你正在尋找編程技巧,或是想了解編程界發生了哪些新鮮事?那么,今天我們帶來的 2019 年最佳開發者博客列表,一定是你的菜。這些博客將會幫助你發現新的工具,并帶給你編程技巧的啟發。...
摘要:如果你正在尋找編程技巧,或是想了解編程界發生了哪些新鮮事那么,今天我們帶來的年最佳開發者博客列表,一定是你的菜。地址它是為數不多的印度開發者博客中,能夠提供有價值信息的博客。地址又一個專注前端開發的博客。 如果你正在尋找編程技巧,或是想了解編程界發生了哪些新鮮事?那么,今天我們帶來的 2019 年最佳開發者博客列表,一定是你的菜。這些博客將會幫助你發現新的工具,并帶給你編程技巧的啟發。...
摘要:如果你正在尋找編程技巧,或是想了解編程界發生了哪些新鮮事那么,今天我們帶來的年最佳開發者博客列表,一定是你的菜。地址它是為數不多的印度開發者博客中,能夠提供有價值信息的博客。地址又一個專注前端開發的博客。 如果你正在尋找編程技巧,或是想了解編程界發生了哪些新鮮事?那么,今天我們帶來的 2019 年最佳開發者博客列表,一定是你的菜。這些博客將會幫助你發現新的工具,并帶給你編程技巧的啟發。...
閱讀 3236·2021-11-24 09:39
閱讀 2912·2021-09-09 11:34
閱讀 3190·2021-09-07 09:58
閱讀 2299·2019-08-30 13:07
閱讀 2859·2019-08-29 15:09
閱讀 1560·2019-08-29 13:01
閱讀 2300·2019-08-26 12:18
閱讀 1911·2019-08-26 10:28