99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋(píng)果6袋
6
麥子學(xué)院

前端人員必知的12個(gè)javascript技巧

發(fā)布時(shí)間：2017-05-15 23:02  回復(fù):0  查看:2446   最后回復(fù)：2017-05-15 23:02  
本文和大家 分享12 個(gè)非常有用的 JavaScript 技巧。這些技巧可以幫助你減少并優(yōu)化代碼，一起來(lái)看看吧，希望對(duì)大家 學(xué)習(xí)javascript有所幫助。
　　1)  使用 !! 將變量轉(zhuǎn)換成布爾類型
　　有時(shí)，我們需要檢查一些變量是否存在，或者它是否具有有效值，從而將它們的值視為true 。對(duì)于做這樣的檢查，你可以使用 || （雙重否定運(yùn)算符），它能自動(dòng)將任何類型的數(shù)據(jù)轉(zhuǎn)換為布爾值，只有這些變量才會(huì)返回 false ： 0 ， null ， "" ， undefined 或 NaN ，其他的都返回 true 。我們來(lái)看看這個(gè)簡(jiǎn)單的例子：
　　function Account(cash) {
　　this.cash = cash;
　　this.hasMoney = !!cash;
　　}var account = new Account(100.50);  console.log(account.cash); // 100.50  console.log(account.hasMoney); // true
　　var emptyAccount = new Account(0);  console.log(emptyAccount.cash); // 0  console.log(emptyAccount.hasMoney); // false
　　在這個(gè)例子中，如果account.cash 的值大于零，則 account.hasMoney 的值就是 true 。
　　2)  使用 + 將變量轉(zhuǎn)換成數(shù)字
　　這個(gè)轉(zhuǎn)換超級(jí)簡(jiǎn)單，但它只適用于數(shù)字字符串，不然就會(huì)返回NaN （  不是數(shù)字  ）?？纯催@個(gè)例子：
　　function toNumber(strNumber) {
　　return +strNumber;
　　}console.log(toNumber("1234")); // 1234  console.log(toNumber("ACB")); // NaN
　　這個(gè)轉(zhuǎn)換操作也可以作用于Date ，在這種情況下，它將返回時(shí)間戳：
　　console.log(+new Date()) // 1461288164385
　　3)  短路條件
　　如果你看到過(guò)這種類似的代碼:
　　if (conected) {
　　login();
　　}
　　那么你可以在這兩個(gè)變量之間使用&& （ AND 運(yùn)算符）來(lái)縮短代碼。例如，前面的代碼可以縮減到一行：
　　conected && login();
　　你也可以用這種方法來(lái)檢查對(duì)象中是否存在某些屬性或函數(shù)。類似于以下代碼：
　　user && user.login();
　　4)  使用 || 設(shè)置默認(rèn)值
　　在ES6 中有默認(rèn)參數(shù)這個(gè)功能。為了在舊版瀏覽器中模擬此功能，你可以使用 || （ OR 運(yùn)算符），并把默認(rèn)值作為它的第二個(gè)參數(shù)。如果第一個(gè)參數(shù)返回 false ，那么第二個(gè)參數(shù)將會(huì)被作為默認(rèn)值返回?？聪逻@個(gè)例子：
　　function User(name, age) {
　　this.name = name || "Oliver Queen";
　　this.age = age || 27;
　　}var user1 = new User();  console.log(user1.name); // Oliver Queen  console.log(user1.age); // 27
　　var user2 = new User("Barry Allen", 25);  console.log(user2.name); // Barry Allen  console.log(user2.age); // 25
　　5)  在循環(huán)中緩存 array.length
　　這個(gè)技巧非常簡(jiǎn)單，并且在循環(huán)處理大數(shù)組時(shí)能夠避免對(duì)性能造成巨大的影響?；旧蠋缀趺總€(gè)人都是這樣使用for 來(lái)循環(huán)遍歷一個(gè)數(shù)組的：
　　for (var i = 0; i < array.length; i++) {
　　console.log(array);
　　}
　　如果你使用較小的數(shù)組，那還好，但是如果處理大數(shù)組，則此代碼將在每個(gè)循環(huán)里重復(fù)計(jì)算數(shù)組的大小，這會(huì)產(chǎn)生一定的延遲。為了避免這種情況，你可以在變量中緩存array.length ，以便在循環(huán)中每次都使用緩存來(lái)代替 array.length ：
　　var length = array.length;  for (var i = 0; i < length; i++) {
　　console.log(array);
　　}
　　為了更簡(jiǎn)潔，可以這么寫(xiě)：
　　for (var i = 0, length = array.length; i < length; i++) {
　　console.log(array);
　　}
　　6)  檢測(cè)對(duì)象中的屬性
　　當(dāng)你需要檢查某些屬性是否存在，避免運(yùn)行未定義的函數(shù)或?qū)傩詴r(shí)，這個(gè)技巧非常有用。如果你打算編寫(xiě)跨瀏覽器代碼，你也可能會(huì)用到這個(gè)技術(shù)。例如，我們假設(shè)你需要編寫(xiě)與舊版Internet Explorer 6 兼容的代碼，并且想要使用 document.querySelector() 來(lái)通過(guò) ID 獲取某些元素。 但是，在現(xiàn)代瀏覽器中，這個(gè)函數(shù)不存在。所以，要檢查這個(gè)函數(shù)是否存在，你可以使用 in 運(yùn)算符?？聪逻@個(gè)例子：
　　if ('querySelector' in document) {
　　document.querySelector("#id");
　　} else {
　　document.getElementById("id");
　　}
　　在這種情況下，如果在document 中沒(méi)有 querySelector 函數(shù)，它就會(huì)使用 document.getElementById() 作為代替。
　　7)  獲取數(shù)組的最后一個(gè)元素
　　Array.prototype.slice （ begin ， end ）可以用來(lái)裁剪數(shù)組。但是如果沒(méi)有設(shè)置結(jié)束參數(shù) end 的值的話，該函數(shù)會(huì)自動(dòng)將 end 設(shè)置為數(shù)組長(zhǎng)度值。我認(rèn)為很少有人知道這個(gè)函數(shù)可以接受負(fù)值，如果你將 begin 設(shè)置一個(gè)負(fù)數(shù)的話，你就能從數(shù)組中獲取到倒數(shù)的元素：
　　var array = [1, 2, 3, 4, 5, 6];
　　console.log(array.slice(-1)); // [6]
　　console.log(array.slice(-2)); // [5,6]
　　console.log(array.slice(-3)); // [4,5,6]
　　8)  數(shù)組截?cái)?/span>
　　這個(gè)技術(shù)可以鎖定數(shù)組的大小，這對(duì)于要?jiǎng)h除數(shù)組中固定數(shù)量的元素是非常有用的。例如，如果你有一個(gè)包含10 個(gè)元素的數(shù)組，但是你只想獲得前五個(gè)元素，則可以通過(guò)設(shè)置 array.length = 5 來(lái)階段數(shù)組?？聪逻@個(gè)例子：
　　var array = [1, 2, 3, 4, 5, 6];
　　console.log(array.length); // 6  array.length = 3;
　　console.log(array.length); // 3
　　console.log(array); // [1,2,3]
　　9)  全部替換
　　String.replace() 函數(shù)允許使用 String 和 Regex 來(lái)替換字符串，這個(gè)函數(shù)本身只能替換第一個(gè)匹配的串。但是你可以在正則表達(dá)式末尾添加 /g 來(lái)模擬 replaceAll() 函數(shù)：
　　var string = "john john";  console.log(string.replace(/hn/, "ana")); // "joana john"  console.log(string.replace(/hn/g, "ana")); // "joana joana"
　　10)  合并數(shù)組
　　如果你需要合并兩個(gè)數(shù)組，你可以使用Array.concat() 函數(shù)：
　　var array1 = [1, 2, 3];  var array2 = [4, 5, 6];  console.log(array1.concat(array2)); // [1,2,3,4,5,6];
　　但是，這個(gè)函數(shù)對(duì)于大數(shù)組來(lái)說(shuō)不并合適，因?yàn)樗鼘?huì)創(chuàng)建一個(gè)新的數(shù)組并消耗大量的內(nèi)存。在這種情況下，你可以使用Array.push.apply （ arr1 ， arr2 ），它不會(huì)創(chuàng)建一個(gè)新數(shù)組，而是將第二個(gè)數(shù)組合并到第一個(gè)數(shù)組中，以減少內(nèi)存使用：
　　var array1 = [1, 2, 3];  var array2 = [4, 5, 6];  console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
　　11)  把 NodeList 轉(zhuǎn)換成數(shù)組
　　如果運(yùn)行document.querySelectorAll("p") 函數(shù)，它會(huì)返回一個(gè) DOM 元素?cái)?shù)組，即 NodeList 對(duì)象。但是這個(gè)對(duì)象并沒(méi)有一些屬于數(shù)組的函數(shù)，例如： sort() ， reduce() ， map() ， filter() 。為了啟用這些函數(shù)，以及數(shù)組的其他的原生函數(shù)，你需要將 NodeList 轉(zhuǎn)換為數(shù)組。要進(jìn)行轉(zhuǎn)換，只需使用這個(gè)函數(shù)： [] .slice.call （ elements ）：
　　var elements = document.querySelectorAll("p"); // NodeList  var arrayElements = [].slice.call(elements); // 現(xiàn)在已經(jīng)轉(zhuǎn)換成數(shù)組了var arrayElements = Array.from(elements); //  把 NodeList 轉(zhuǎn)換成數(shù)組的另外一個(gè)方法
　　12)  對(duì)數(shù)組元素進(jìn)行洗牌
　　如果要像外部庫(kù)Lodash 那樣對(duì)數(shù)據(jù)元素重新洗牌，只需使用這個(gè)技巧：
　　var list = [1, 2, 3];
　　console.log(list.sort(function() {
　　return Math.random() - 0.5
　　})); // [2,1,3]
　　 結(jié)論  現(xiàn)在，你已經(jīng)學(xué)到了一些有用的JS 技巧，它們主要用于縮減 JavaScript 代碼量，其中一些技巧在許多流行的 JS 框架都使用到，如 Lodash ， Underscore.js ， Strings.js 等。如果你知道其他 JS 技巧，歡迎分享！
來(lái)源：ITeye

您還未登錄，請(qǐng)先登錄

熱門(mén)帖子

最新帖子

?