那些精彩的JavaScript代碼片段
精彩的JavaScript代碼片段,分享給大家
1.根據(jù)給定的條件在原有的數(shù)組上,得到所需要的新數(shù)組
var a = [-1, -1, 1, 2, -2, -2, -3, -3, 3, -3];
function f(s, e) {
var ret = [];
for (var i in s) { // 根據(jù)原有的數(shù)組長度進行循環(huán)
ret.push(e(s[i]));
}
return ret;
}
f(a, function(n) {
return n > 0 ? n : 0
}); // 傳輸一個匿名函數(shù)作為邏輯判斷
2.比原生type或typeof更詳細的類型監(jiān)測方法
function type(p) {
/function.(\w*)\(\)/.test(p.constructor); //通過其構造函數(shù)來獲取對應的類型。
return RegExp.$1;
}
3.對象或數(shù)組的深拷貝,用于解決對象引用時值一改全改的問題。
var copyObject = function(obj) {
var result = {};
for (var x in obj) {
result[x] = typeof obj === "object" ? copyObject(obj[x]) : obj[x]
//如果拷貝的值仍然是一個對象,那么重復執(zhí)行當前方法。
}
return result;
}
4.通過正則表達式來獲取Cookie的值
function getCookie(name) {
if (name && RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) return RegExp.$2;
// (^| ) 不匹配第一個空格。
// ([^;]*) 只匹配除了;號之外的所有字符。
// (;|$) 匹配以;號或$為結尾的字符。
}
5.通過移位運算來替代”parseInt”
~~3.14 = > 3;
// ~~ 取整。~取當前數(shù)值的反碼,~~表示再次取反,也就是得到當前自身(說明,JS中的“位”運算會將數(shù)值自動轉換為整數(shù))
6.將數(shù)值轉換為16進制的字符串(常用于表示色彩)
(~~ (Math.random() * (1 << 24))).toString(16)
// ~~ 通過位運算來取整。
// << 左移位。將1的二進制數(shù)左移24位。而1<<24 == 2^24(RGB模式下最多可表示的色彩數(shù)量)
// toString(16) 將數(shù)值轉換為16進制的字符串輸出。
7.對象方法的兼容性檢查
if ('querySelector' in document) {}
8.NodeList || HTMLCollection || Object轉換為Array或具有Array的方法
NodeList: 是指通過集合方法獲得到的DOM節(jié)點列表,例如:document.getElementsByTagNmae,document.forms…等方法。
HTMLCollection: HTML塊,它與NodeList很像,但是NodeList只支持數(shù)字索引,而HTMLCollection可以支持名稱作為索引。
NodeList與HTMLCollection都具有以下類似: 具有數(shù)組的外觀,但沒有數(shù)組的方法 、具有l(wèi)ength屬性、支持索引來讀取內(nèi)容
function makeArray(obj) {
var rs = [],
len = obj.length;
try {
rs = [].slice.call(obj, 0);
} catch (e) { //for IE
for (var i = 0; j = obj[i++];) {
rs.push(j);
}
}
return rs;
}
9. 正則匹配清除兩側空格
var trim = function(v){
var patrn = /^\s*(.*?)\s+$/;
return (patrn.test(v))? RegExp.$1 : '
null ';
}
10. 時間格式化
function dateFormat(t){ // t 是以秒為單位的值。
var h = ~~(t/3600), // t除以3600,取整,得到的就是小時。
m = ~~(t%3600/60), // t求余3600,取模,得到的就是去除小時剩下的秒數(shù)(分鐘 + 秒),再除以60,取整,得到的就是分鐘。
s = ~~(t%3600%60); // t求余3600,再求余60,剩下的自然就是“秒數(shù)”。
return h+'小時'+m+'分'+s+'秒';
}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
在Ajax中使用Flash實現(xiàn)跨域數(shù)據(jù)讀取的實現(xiàn)方法
今天,小子再提供一種使用Flash進行跨域操作的方法。眾所周之,其實Flash的跨域操作也是有限制的,不過,F(xiàn)lash的跨域配置比簡單,只需要在站點根目錄下放置crossdomain.xml即可。2010-12-12
three.js 實現(xiàn)露珠滴落動畫效果的示例代碼
這篇文章主要介紹了three.js 實現(xiàn)露珠滴落動畫效果的示例代碼,非常不錯,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
JS script腳本中async和defer區(qū)別詳解
這篇文章主要介紹了JS script腳本中async和defer區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
javascript實現(xiàn)視頻彈幕效果(兩個版本)
這篇文章主要為大家詳細介紹了javascript實現(xiàn)視頻彈幕效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11
js es6系列教程 - 基于new.target屬性與es5改造es6的類語法
下面小編就為大家?guī)硪黄猨s es6系列教程 - 基于new.target屬性與es5改造es6的類語法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09

