這篇文章主要為大家展示了“好用的JavaScript代碼片段有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“好用的JavaScript代碼片段有哪些”這篇文章吧。

創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：響應(yīng)式網(wǎng)站建設(shè)、品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機(jī)等移動端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運營、VI設(shè)計、云產(chǎn)品.運維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。

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ù)組長度進(jìn)行循環(huán)
    ret.push(e(s[i]));
  }
  return ret;
}
f(a, function(n) {
  return n > 0 ? n : 0
}); // 傳輸一個匿名函數(shù)作為邏輯判斷

2.比原生type或typeof更詳細(xì)的類型監(jiān)測方法

function type(p) {
  /function.(\w*)\(\)/.test(p.constructor); //通過其構(gòu)造函數(shù)來獲取對應(yīng)的類型。
  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]
    //如果拷貝的值仍然是一個對象,那么重復(fù)執(zhí)行當(dāng)前方法。
  }　　
  return result;
}

4.通過正則表達(dá)式來獲取Cookie的值

function getCookie(name) {
  if (name && RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) return RegExp.$2;
  // (^| ) 不匹配第一個空格。
  // ([^;]*) 只匹配除了;號之外的所有字符。
  // (;|$) 匹配以;號或$為結(jié)尾的字符。
}

5.通過移位運算來替代”parseInt”

~~3.14 = > 3;

// ~~ 取整。~取當(dāng)前數(shù)值的反碼,~~表示再次取反，也就是得到當(dāng)前自身（說明，JS中的“位”運算會將數(shù)值自動轉(zhuǎn)換為整數(shù)）

6.將數(shù)值轉(zhuǎn)換為16進(jìn)制的字符串（常用于表示色彩）

(~~ (Math.random() * (1 << 24))).toString(16)

// ~~ 通過位運算來取整。
// << 左移位。將1的二進(jìn)制數(shù)左移24位。而1<<24 == 2^24(RGB模式下最多可表示的色彩數(shù)量)
// toString(16) 將數(shù)值轉(zhuǎn)換為16進(jìn)制的字符串輸出。

7.對象方法的兼容性檢查

if ('querySelector' in document) {}

8.NodeList || HTMLCollection || Object轉(zhuǎn)換為Array或具有Array的方法

NodeList: 是指通過集合方法獲得到的DOM節(jié)點列表，例如：document.getElementsByTagNmae,document.forms…等方法。
HTMLCollection: HTML塊，它與NodeList很像，但是NodeList只支持?jǐn)?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. 正則匹配清除兩側(cè)空格

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+'秒';
}

以上是“好用的JavaScript代碼片段有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！