JavaScript 有用的代碼片段和 trick
浮點數取整
-
const x = 123.4545;
-
x >> 0; // 123
-
~~x; // 123
-
x | 0; // 123
-
Math.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_registry
url查詢參數轉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]
註:更多方法請參考《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-\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 = ‘貸款買房,也意味著你能給自己的資產加杠桿,能夠撬動更多的錢,來孳生更多的財務性收入。‘;
-
wordCount(text); // 38
特殊字符轉義
-
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"
-
-
// 方法二
-
‘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 }
使用 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;
-
}
匿名函數自執行寫法
-
( 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"
-
JavaScript 有用的代碼片段和 trick