本文內(nèi)容來自知乎《有哪些短小卻令人驚嘆的 JavaScript 代碼扔字？》和文章《這些JavaScript編程黑科技，裝逼指南捌显，高逼格代碼吠式，讓你驚嘆不已》陡厘，同時也匯集了部分網(wǎng)上其它來源的內(nèi)容抽米。
const x = 123.4545;
x >> 0; // 123
~~x; // 123
x | 0; // 123
Math.floor(x); // 123
注意：前三種方法只適用于32個位整數(shù)，對于負(fù)數(shù)的處理上和Math.floor是不同的糙置。
Math.floor(-12.53); // -13
-12.53 | 0; // -12
生成6位數(shù)字驗證碼
// 方法一
('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);
})();
駝峰命名轉(zhuǎn)下劃線
'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase(); // component_map_model_registry
url查詢參數(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]);
// 對應(yīng)ES5實現(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ù)組展開成一維數(shù)組
var foo = [1, [2, 3], ['4', 5, ['6',7,[8]]], [9], 10];
// 方法一
// 限制：數(shù)組項不能出現(xiàn)`,`云茸，同時數(shù)組項全部變成了字符數(shù)字
foo.toString().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
// 方法二
// 轉(zhuǎn)換后數(shù)組項全部變成數(shù)字了
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]
注：更多方法請參考《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
統(tǒng)計文字個數(shù)
function wordCount(data) {
?var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\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 = '貸款買房标捺，也意味著你能給自己的資產(chǎn)加杠桿，能夠撬動更多的錢揉抵，來孳生更多的財務(wù)性收入亡容。';
wordCount(text); // 38
特殊字符轉(zhuǎn)義
function htmlspecialchars (str) {
?var str = str.toString().replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"');
?return str;
}
htmlspecialchars('&jfkds<>'); // "&jfkds<>"
動態(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"
身份證驗證
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;
}
測試質(zhì)數(shù)
function isPrime(n) {
?return !(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))
}
統(tǒng)計字符串中相同字符出現(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來解決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;
}
匿名函數(shù)自執(zhí)行寫法
( 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() {}();
兩個整數(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
最短的代碼實現(xiàn)數(shù)組去重
[...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3]
用最短的代碼實現(xiàn)一個長度為m(6)且值都n(8)的數(shù)組
Array(6).fill(8); // [8, 8, 8, 8, 8, 8]
將argruments對象轉(zhuǎn)換成數(shù)組
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();
// 獲取當(dāng)前的時間綴
Date.now();
// 日期顯示轉(zhuǎn)換為數(shù)字
+new Date();
使用~x.indexOf('y')來簡化x.indexOf('y')>-1
var str = 'hello world';
if (str.indexOf('lo') > -1) {
?// ...
}
if (~str.indexOf('lo')) {
?// ...
}
parseInt()orNumber()
兩者的差別之處在于解析和轉(zhuǎn)換兩者之間的理解。
解析允許字符串中含有非數(shù)字字符冤今，解析按從左到右的順序闺兢，如果遇到非數(shù)字字符就停止。而轉(zhuǎn)換不允許出現(xiàn)非數(shù)字字符戏罢，否者會失敗并返回NaN屋谭。
var a = '520';
var b = '520px';
Number(a); // 520
parseInt(a); // 520
Number(b); // NaN
parseInt(b); // 520
parseInt方法第二個參數(shù)用于指定轉(zhuǎn)換的基數(shù)，ES5默認(rèn)為10進制帖汞。
parseInt('10', 2); // 2
parseInt('10', 8); // 8
parseInt('10', 10); // 10
parseInt('10', 16); ?// 16
對于網(wǎng)上parseInt(0.0000008)的結(jié)果為什么為8，原因在于0.0000008轉(zhuǎn)換成字符為"8e-7"凑术，然后根據(jù)parseInt的解析規(guī)則自然得到"8"這個結(jié)果翩蘸。
+ 拼接操作，+x or String(x)淮逊？
+運算符可用于數(shù)字加法催首，同時也可以用于字符串拼接。如果+的其中一個操作符是字符串(或者通過 隱式強制轉(zhuǎn)換可以得到字符串)泄鹏，則執(zhí)行字符串拼接郎任；否者執(zhí)行數(shù)字加法。
需要注意的時對于數(shù)組而言备籽，不能通過valueOf()方法得到簡單基本類型值舶治，于是轉(zhuǎn)而調(diào)用toString()方法。
[1,2] + [3, 4]; // "1,23,4"
對于對象同樣會先調(diào)用valueOf()方法车猬，然后通過toString()方法返回對象的字符串表示霉猛。
var a = {};
a + 123; // "[object Object]123"
對于a+""隱式轉(zhuǎn)換和String(a)顯示轉(zhuǎn)換有一個細(xì)微的差別：a+''會對a調(diào)用valueOf()方法，而String()直接調(diào)用toString()方法珠闰。大多數(shù)情況下我們不會考慮這個問題惜浅，除非真遇到。
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;
}
數(shù)據(jù)安全類型檢查
// 對象
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ù)字的字面值看起來像對象
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"
