總結的一些JavaScript的冷知識

時間 2019-12-10

原文原文鏈接

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

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

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

var a=1,b=2;
a=[b,b=a][0];//執行完這句代碼以後 a的值爲2 b的值爲1了

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

用代碼說話吧javascript

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){..}css

四、NAN不等於任何值，包括它自身

你們都知道在任何編程語言中，若是被除數爲0則會報錯，而在js裏面不會，它返回的值爲NAN，NaN表示一個不能產生正常結果的運算結果，咱們能夠用isNaN(number)來檢測是否是NAN，可是你們也許都不知道NAN不等於任何值，包括它自身。html

五、利用script標籤保存任意信息

將script標籤設置爲type='text'而後能夠在裏面保存任意信息，以後能夠在JavaScript代碼中很方便地獲取。java

頁面代碼以下所示：css3

<script type="text" id="angelaScript">
    <h1>這個標題1是不會顯示出來的，能夠用這種方式保存信息哦！</h1>
    </script>
    <script type="text/javascript">
        console.log(document.getElementById('angelaScript').innerHTML); 
    </script>

結果顯示以下圖所示：正則表達式

六、js當中Switch的一些用法

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

1）switch參數變量與case後面的比較是全等比較，也就是說===的比較
2）並不是每個case後面都須要書寫break，若是不寫的話，它會順序往下執行的
3）switch語句不光可使用數字、字符作條件表達式，還可使用字符串！

看下面的switch的使用，你瞬間以爲switch這麼厲害！編程

七、瞭解做用域，清楚明白當前的this是誰

八、你可能不知道的js數組

數組的length屬性不可枚舉
JS的數組能夠用字符串形式的數字下標來訪問，由於數組的元素實際上是數組對象的屬性。
delete能夠用來從數組中移除元素，但因爲一個元素就是一個屬性，delete會在數組中遺留一個「空洞」；被delete刪除的元素爲undefined，使用splice方法多是一個更好的辦法。例如要刪除arr數組的第3個元素，可使用這樣的語句：arr.splice(2,1);不過對於大型數組來講，這個函數的效率可能不高。

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

html頁面代碼以下所示數組

<div id="angelaDiv">
    </div>
    <script type="text/javascript">
        console.log(angelaDiv);
    </script>

在chrome控制檯看到的結果以下圖所示瀏覽器

十、字符串竟然能用下標訪問

你們都知道字符串是不可變的，在js中也是如此。也就是說一旦字符串被建立，就沒法改變。可是我相信不多人知道在js當中竟然能夠用下標來訪問字符串當中的某一個字符，雖然能夠用下標讀取但去不能修改哦(雖然修改操做不會報錯，可是卻不起做用)

十一、字符串的一些方法

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",","]

十二、把瀏覽器當成編輯器

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

data:text/html, <html contenteditable>

1三、垂直居中

你們都知道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的冷知識