總結的一些JavaScript的冷知識

lingdududu 發布于2019-08-22 10:56 / 2489人閱讀

摘要：例如要刪除數組的第個元素，可以使用這樣的語句不過對于大型數組來說，這個函數的效率可能不高。可選參數可以限制被分割的片段數量。看代碼吧下面的代碼利用的來實現垂直居中和水平居中轉自快樂人生，積極進取總結的一些的冷知識

1、!!將一個值方便快速轉化為布爾值

console.log( !!window===true );

2、不聲明第三個變量實現交換

var a=1,b=2;
a=[b,b=a][0];//執行完這句代碼之后 a的值為2 b的值為1了

3、&&和||的用法（學會了立馬感覺高大尚了吧）

用代碼說話吧

var day=(new Date).getDay()===0;
//傳統if語句
if (day) {
    alert("Today is Sunday!");
};
//運用邏輯與代替if
day&&alert("Today is Sunday!");//也就是說只有day為真的情況才執行后面的代碼alert  一句簡單的代碼就實現了上面的if功能  強大吧

 if (!a) {
    a = {};
 }
 //上面的三句話可以用下面的一句話替換哦
 a = a || {}; //解釋這句話一下哦   如果有a這個變量的聲明的話 那么它還是原來的對象  如果沒有就給它創建一個對象

順便寫一下下面的例子

與其這樣書寫：if(string.length > 0){..}
不如這樣書寫：if(string.length){..}

4、NAN不等于任何值，包括它自身

大家都知道在任何編程語言中，如果被除數為0則會報錯，而在js里面不會，它返回的值為NAN，NaN表示一個不能產生正常結果的運算結果，我們可以用isNaN(number)來檢測是不是NAN，但是大家也許都不知道NAN不等于任何值，包括它自身。

5、利用script標簽保存任意信息

將script標簽設置為type="text"然后可以在里面保存任意信息，之后可以在JavaScript代碼中很方便地獲取。

頁面代碼如下所示：

結果顯示如下圖所示：

6、js當中Switch的一些用法

看上圖運行的效果，總結一句哦！

1）switch參數變量與case后面的比較是全等比較，也就是說===的比較 ?

2）并非每一個case后面都需要書寫break，如果不寫的話，它會順序往下執行的

3）switch語句不光可以使用數字、字符做條件表達式，還可以使用字符串！

看下面的switch的使用，你瞬間覺得switch這么厲害！

7、了解作用域，清楚明白當前的this是誰

8、?你可能不知道的js數組

數組的length屬性不可枚舉

JS的數組可以用字符串形式的數字下標來訪問，因為數組的元素其實是數組對象的屬性。

delete可以用來從數組中移除元素，但由于一個元素就是一個屬性，delete會在數組中遺留一個“空洞”；被delete刪除的元素為undefined，使用splice方法可能是一個更好的辦法。例如要刪除arr數組的第3個元素，可以使用這樣的語句：arr.splice(2,1);不過對于大型數組來說，這個函數的效率可能不高。

9、html中設置了id的元素居然是js的全局變量哦

html頁面代碼如下所示

在chrome控制臺看到的結果如下圖所示

10、字符串居然能用下標訪問

大家都知道字符串是不可變的，在js中也是如此。也就是說一旦字符串被創建，就無法改變。但是我相信很少人知道在js當中居然可以用下標來訪問字符串當中的某一個字符，雖然可以用下標讀取但去不能修改哦(雖然修改操作不會報錯，但是卻不起作用)

11、字符串的一些方法

string的substring函數的用法和slice一樣，但是它不能處理負數參數。ECMAscript中也沒有對substr方法進行標準化，所以如果要取一個字符串的子串，就用slice方法吧！

string的split(separator,limit)方法把string分割成片段，來創建一個字符串數組。可選參數limit可以限制被分割的片段數量。separator參數可以是一個字符串或一個正則表達式，并且來自分組捕獲的文本將會被包含在被分割后的數組中

var s = "str1 , str2 , str3";s.split(/s(,)s/,4);  
//輸出結果：["str1",",","str2",","]

12、把瀏覽器當成編輯器

瀏覽器地址欄輸入以下代碼，立馬就把瀏覽器變成notepad了，厲害吧！

data:text/html,

13、垂直居中

大家都知道css里面用text-align:center加上margin:0 auto就可以實現水平居中了，但是垂直居中卻沒有相應的css屬性來設置，而如果要設置元素能夠垂直居中必須得將容器設置為display:table，然后將子元素也就是要垂直居中顯示的元素設置為display:table-cell，然后加上vertical-align:middle來實現。

看代碼吧！下面的代碼利用css3的transform來實現垂直居中和水平居中

.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

轉自快樂人生，積極進取-總結的一些js的冷知識

云服務器 GPU云服務器 vps日常維護中的一些要點總結位段知識總結 linux數據結構知識點總結低版本的冷備份

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91468.html

你不知道的取數值整數部分的冷知識

摘要：我們可以用測一下具體實現原理，請參考文檔注意因為操作將操作數轉為，所以它不能處理超過位的數值取整，而有效整數的范圍是位。綜上所以如果要考慮壓縮代碼的大小，且明確知道數值范圍不會超過位整數的時候，可以考慮使用取整。在處理數值的時候，獲取浮點數的整數和小數部分，是一種常見的操作，在JavaScript中有許多方法可以達到目的，但也正因為方法眾多，所以哪種方法更好，也值得我們仔細研究一番。...

calx 2019-08-26 10:31 評論0 收藏0
關于flex-shrink如何計算的冷知識

摘要：先回顧一下假設有一個內包含三個子，寬度分別對于對于剩余空間分配比例的計算相信用過布局的都非常熟悉了。另外，我發現很多點贊數很多的文章，給出的計算公式是錯誤的。先回顧一下flex-grow 假設有一個div內包含三個子div1， div2, div3,寬度分別200px.對于flex-grow對于剩余空間分配比例的計算相信用過flex布局的都非常熟悉了。這里還是簡單列一下計算公式：假設...

KaltZK 2019-08-29 17:00 評論0 收藏0
前端不為人知的一面——前端冷知識集錦

摘要：不聲明第三個變量的值交換我們都知道交換兩個變量值的常規做法，那就是聲明一個中間變量來暫存。但鮮有人去挑戰不聲明中間變量的情況，下面的代碼給出了這種實現。前端已經被玩兒壞了！像console.log()可以向控制臺輸出圖片等炫酷的玩意已經不是什么新聞了，像用||操作符給變量賦默認值也是人盡皆知的舊聞了，今天看到Quora上一個帖子，瞬間又GET了好多前端技能，一些屬于技巧，一些則是聞所...

habren 2019-08-26 14:07 評論0 收藏0