成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

常用JavaScript小技巧及原理詳解

chnmagnus / 373人閱讀

摘要：使用一元加模擬函數(shù)原理對(duì)非數(shù)值類型的數(shù)據(jù)使用一元加，會(huì)起到與函數(shù)相同的效果。中，若判斷不為則不再進(jìn)行下一步操作。使用邏輯或設(shè)置默認(rèn)值邏輯或也屬于短路操作，即當(dāng)?shù)谝粋€(gè)操作數(shù)可以決定結(jié)果時(shí)，不再對(duì)第二個(gè)操作數(shù)進(jìn)行求值。

善于利用JS中的小知識(shí)的利用，可以很簡(jiǎn)潔的編寫代碼

1. 使用!!模擬Boolean()函數(shù)

原理：邏輯非操作一個(gè)數(shù)據(jù)對(duì)象時(shí)，會(huì)先將數(shù)據(jù)對(duì)象轉(zhuǎn)換為布爾值，然后取反，兩個(gè)!!重復(fù)取反，就實(shí)現(xiàn)了轉(zhuǎn)換為布爾值的效果。

2. 使用一元加(+)模擬Number()函數(shù)

原理：對(duì)非數(shù)值類型的數(shù)據(jù)使用一元加(+)，會(huì)起到與Number()函數(shù)相同的效果。

null轉(zhuǎn)換為0

undefined轉(zhuǎn)換為NaN

false轉(zhuǎn)換為0，true轉(zhuǎn)換為1

對(duì)于字符串：

空字串轉(zhuǎn)換為0

含有數(shù)字或者浮點(diǎn)數(shù)或者十六進(jìn)制格式的數(shù)據(jù)(11, 0.3, 0xfe等)，轉(zhuǎn)換為相應(yīng)的數(shù)值

含有其他格式字符，無法轉(zhuǎn)換為數(shù)值的字符串，轉(zhuǎn)換為NaN

對(duì)于對(duì)象，先調(diào)用valueOf()方法，在轉(zhuǎn)換，若結(jié)果為NaN，那么再調(diào)用toString()方法，之后再轉(zhuǎn)換

3. 使用邏輯與(&&)進(jìn)行短路操作 
if(connected){
    login();
}

以上代碼可以簡(jiǎn)化為

connected && login()

也可以用這種方法來檢查對(duì)象中是否存在某個(gè)屬性

user && user.login

原理：邏輯與(&&)會(huì)首先對(duì)第一個(gè)操作數(shù)進(jìn)行求值，只有求值結(jié)果為true時(shí)才會(huì)對(duì)第二個(gè)操作數(shù)求值。connected && login()中，若判斷connected不為true,則不再進(jìn)行下一步操作。
所謂的短路操作即第一個(gè)操作數(shù)可以決定結(jié)果，則不再對(duì)第二個(gè)操作數(shù)進(jìn)行求值。

4. 使用邏輯或(||)設(shè)置默認(rèn)值

邏輯或(||)也屬于短路操作，即當(dāng)?shù)谝粋€(gè)操作數(shù)可以決定結(jié)果時(shí)，不再對(duì)第二個(gè)操作數(shù)進(jìn)行求值。
利用這個(gè)特點(diǎn)，我們可以給賦值語句設(shè)置默認(rèn)值。只有當(dāng)?shù)谝粋€(gè)操作數(shù)為null或者undefined時(shí)，才會(huì)把第二個(gè)操作數(shù)賦值給目標(biāo)。

function User(name, age){
    this.name = name || "Liming";
}

上述代碼中，如果函數(shù)中沒有傳入name參數(shù)，name的值為undefined，那么就會(huì)給this.name賦值為"Liming"。
ES6中可以為函數(shù)設(shè)置默認(rèn)值，所以這個(gè)無需在函數(shù)中使用，但是其他地方還是很有用的。

5. 獲取數(shù)組最后n個(gè)元素

可以使用以下代碼獲取數(shù)組中最后n個(gè)元素

var array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1));  //[6]
console.log(array.slice(-2));  //[5, 6]

原理:Array.prototype.slice(begin,end)可以用來裁剪數(shù)組，第二個(gè)參數(shù)的默認(rèn)值是數(shù)組的長(zhǎng)度值。若值傳入一個(gè)參數(shù)，則會(huì)返回從指定索引開始到數(shù)組結(jié)尾的所有值。
而slice()方法還可以接收負(fù)值，當(dāng)傳入負(fù)值時(shí)，會(huì)自動(dòng)加上數(shù)組的長(zhǎng)度值使其轉(zhuǎn)換為正值，于是便得到了最后的n個(gè)值。

6. NodeList轉(zhuǎn)換為數(shù)組

使用document.querySelectorAll("div")返回的是NodeList對(duì)象，雖然它很像數(shù)組，但是并不能使用諸如sort()，filter()等方法。你可以將其轉(zhuǎn)換為真正的數(shù)組。

var eles = document.querySelectorAll("p");  //NodeList
var arrayElements = [].slice.call(eles);       //轉(zhuǎn)化為數(shù)組
// 或者
var arrayElements = Array.prototype.slice.call(eles);
// 或者
var arrayElements = Array.from(eles);

原理:

[].slice.call(eles):
首先創(chuàng)建了一個(gè)空數(shù)組[]，然后調(diào)用他的slice()方法，但是在slice()方法的執(zhí)行中，把this對(duì)象指向了eles,所以會(huì)對(duì)eles進(jìn)行裁減，由于對(duì)slice()方法沒有傳入?yún)?shù)，所以相當(dāng)于slice(0,eles.length),會(huì)按照元長(zhǎng)度返回一個(gè)數(shù)組。

Array.prototype.slice.call(eles):
原理與上面相似，只不過這次沒有創(chuàng)建空數(shù)組，而是直接使用了原型中的方法

Array.from()
Array.from()接受一個(gè)類數(shù)組對(duì)象或者可迭代對(duì)象，基于該對(duì)象創(chuàng)建一個(gè)新的Array實(shí)例。詳解看這里

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83307.html

相關(guān)文章

  • 2017文章總結(jié)

    摘要：歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    hellowoody 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    wwolf 評(píng)論0 收藏0

  • 優(yōu)秀博文收藏（不定期更新）

    摘要：我的書簽我的書簽謹(jǐn)慎導(dǎo)入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優(yōu)雅一勞永 我的書簽 我的書簽（謹(jǐn)慎導(dǎo)入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

    zhangfaliang 評(píng)論0 收藏0

  • 優(yōu)秀博文收藏（不定期更新）

    摘要：我的書簽我的書簽謹(jǐn)慎導(dǎo)入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優(yōu)雅一勞永 我的書簽 我的書簽（謹(jǐn)慎導(dǎo)入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

    sunsmell 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<