JavaScript隨筆記（一）基礎概念以及變量類型

時間 2019-11-10

標籤 javascript 隨筆基礎概念以及變量類型欄目 JavaScript 简体版

原文原文鏈接

一.JavaScript中的基礎概念

1.defer屬性

通常咱們在引用外部js文件的時候每每是將引用文件的位置放在<head></head>標籤當中，好比<script type="text/javascript" src="Js/example.js" defer="defer"></script>那麼在<head>標籤中引入多個js文件時，瀏覽器會按照引入順序加載執行這些引入的js文件，若是加載執行的這些js文件的時間比較長，那麼頁面就會處在等待期間。在下載引入的js文件時,如今的瀏覽器大多都是會並行下載的，不會去單線程的下載，這樣提升了效率，但仍然會阻塞一些其餘資源的下載好比說圖片的下載，這樣就由於js的下載執行而阻塞了UI渲染，會在頁面上造成空白頁面，這時咱們能夠有多種辦法解決這個問題。好比說使用defer屬性，雖然使用defer屬性這不是最好的辦法javascript

腳本會被延遲到整個HTML頁面都解析完畢後再運行，HTML5規範要求腳本按照出現的前後順序執行，所以，第一個延遲腳本會在第二個延遲腳本以前執行。可是事實中並不必定是這樣的，因此建議頁面中只包含一個延遲腳本。而且這個defer屬性只適用於外部腳本文件（引入腳本文件 src = "..."）java

2.做用域

全局做用域

在函數外部聲明的或者定義的變量屬於全局做用域的範圍，事實上在函數外部聲明或者定義的變量會被做爲window對象的屬性。
示例代碼以下：瀏覽器

var msg;//聲明一個變量會做爲window對象的屬性
alert(msg);//輸出undefined

局部做用域
在函數中使用var操做符定義的變量爲局部變量函數退出後這個變量就會銷燬，看看下面的代碼：

function test(){
   var msg = "hi";//在函數中定義一個變量，當函數執行完成後 這個變量就會銷燬
}
test();//調用test函數,函數執行完成後，變量msg就會銷燬
alert(msg + "_debug");//解析錯誤

可是須要注意的是，聲明或者定義變量時省略var操做符會直接定義全局變量，以下所示：函數

function test(){
    msg = "hi";//直接定義全局變量
}
test();
alert(msg + " -sss");//   輸出hi -sss

數據類型

JavaScript這門語言屬於數據鬆散類型的語言，可是也有5種基本數據類型：Undefined，Null，Boolean，Number，和String和一種複雜數據類型（引用類型）Object，可使用typeof操做符檢測給定變量的類型。測試

Undefined類型編碼

Undefined類型只有一個值，也就是undefined.在使用var關鍵聲明一個變量而未對其進行初始化時，這個變量的值就是Undefined。可是須要注意的是：只聲明沒有初始化的變量的值是undefined，可是若是沒有聲明變量而直接使用一個沒有聲明的變量會報錯看看下面的代碼唄線程

var msg;//這個變量聲明以後雖然沒有初始化可是得到了undefined值
alert(msg);//輸出undefined
alert(msg == undefined);//輸出true
alert(aa);//aa並無聲明 報錯 ReferenceError: aa is not defined

然而，噁心的地方是在於使用typeof操做符判斷一個不管是否進行過聲明的變量都會返回undefined,以下所示：debug

var msg;//這個變量聲明以後雖然沒有初始化可是得到了undefined值
//age並無聲明
alert(typeof msg);//輸出undefined
alert(typeof age);//age並無聲明 可是依然會返回undefined

Null類型

Null類型也是隻有一個值的特殊數據類型，即null,null表示一個空對象指針而用typeof檢測null值會返回object,若是要聲明一個變量指向一個對象（Object）,那麼能夠聲明時先var dog = null; 以下所示：指針

var dog = null;
alert(dog);//輸出空白
alert(typeof dog);//輸出object

實際上，undefined值是派生自Null值的，因此他們的相等性測試會返回true alert(undefined == null);//輸出true.儘管，undefined和null有着這樣的關係，可是他們的用途是徹底不一樣的，聲明一個對象時，儘可能讓這個指向對象的變量指向null,即體現了null做爲空對象指針的慣例，又有助於區分undefined和null.code

Boolean類型

Boolean類型的值只有true和false，可是任何類型的值調用Boolean()函數，均可以返回一個Boolean類型的值,看看下面的代碼示例：

String 類型，若是是非空的字符串轉換完成後是true 若是是空字符串是false

var msg = "hi" ;
var msg1 = "";
alert(Boolean(msg));//  非空字符串 輸出true
alert(Boolean(msg1)); // 空字符串 輸出false

Number類型,若是是非零的數值則會轉換爲true,若是是0或者NaN則會轉換爲false

alert(Boolean(0));//輸出false
alert(Boolean(222));//輸出true

Obeject類型,若是是Object類型的變量而且指向一個對象，那麼返回true,若是指向的是null，那麼返回false.看看下面的代碼:

var t1 = new Object();
console.debug(Boolean(t1));//true
var t2;
console.debug(Boolean(t2));//false
var t3 = null;
console.debug(Boolean(t3));//false
function isNull(obj){
    if(obj){
        console.debug('obj不爲空');
    }else{
        console.debug('obj爲空');
    }
}
isNull(t1);//obj不爲空
isNull(t2);//obj爲空
isNull(t3);//obj爲空

Number類型

1.浮點數值

因爲保存浮點數值所須要的內存空間是保存整數值的兩倍，所以ECMAScript會盡可能的將float能夠轉化整數值
若是一個小數點後面沒有數字，那麼這個數值就會做爲整數存儲，若是浮點數自己就是一個整數，好比1.0也會轉換爲整數
存儲。以下所示：

var n1 = 1.0;//雖然是浮點數，可是等於一個整數，解析爲1
var n2  = 2.;//小數點後沒有數字，解析爲2

2.NaN值

NaN值（Not a Number 非數值型）表示原本要返回數值的操做結果卻未返回數值的狀況。好比 1/0這樣的操做
NaN有兩個特色::
1任何涉及NaN的操做（例如NaN/10）都會返回NaN
2.NaN與任何數值包括NaN都不想等好比NaN == NaN 返回false
isNaN()函數能夠幫助咱們肯定這個參數是否爲不是數值好比 isNaN（NaN）；返回true

3.數值轉換
數值轉換時使用的轉換函數：Number()、parseInt()、parseFloat()
1.Number()函數的轉換規則：適用於任何數據類型。

boolean值 true和false分別被轉換爲 1 和 0；
數值只是簡單的傳入和返回；
null轉換爲 0；
undefined轉換爲 NaN；
目標是字符串時的轉換規則：
字符串中只包含數字，將其轉換爲十進制數值，前導0會被忽略（包括了八進制的轉換，由於八進制是有前導0和其餘0-7的數字組成）；字符串中包含有效浮點值，轉換爲對應的浮點數；字符串中包含有效的十六進制數，會轉換爲相等的十進制數值（好比「0xf」）；空字符串轉換爲0；
目標是對象的轉換規則：
若是目標是對象，則調用對象的valueOf()方法，而後按照前面的規則轉換返回值，若是轉換的結果是NaN，則調用對象的toString()方法，
而後再次按照前面的規則轉換返回的字符串值.能夠看看下面的示例代碼：

var num1 = Number("Hello world!");  //NaN
var num2 = Number("");              //0
var num3 = Number("000011");        //11
var num4 = Number(true);            //1

二、parseInt()轉換函數

parseInt(parseNum,radix)函數,第一參數爲須要轉換的數值,第二個參數爲基數,即以radix爲基數,
對parseNum進行轉換,轉換完成後返回的數值是10進制數,而且爲number類型，這種轉換方法主要是用來轉換字符串，
parseInt會會略字符串前面的空格字符獲得結果的第一個字符不是數字字符和負號(-),將返回NaN。
parseInt()能夠接受兩個參數，第一個值表示要進行轉換的值，第二個表示轉換的方式（十進制、十六進制、或者八進制格式）。
當沒有第二個參數時，默認轉換爲十進制。

var num1 = parseInt("11", 2);         //3  parsed as binary
        alert(typeof(num1));                        // alert number 爲number類型
        var num2 = parseInt("15", 8);         //13 parsed as octal
        var num3 = parseInt("10", 10);        //10 parsed as decimal
        var num4 = parseInt("11", 16);        //17 parsed as hexadecimal

三、parseFloat()轉換方法，該方法會始終忽略前導0且只有一個小數點有效，若是小數點以後只有數字0，將會返回整數。

四、其餘的轉換方法
toFixed()自動四捨五入，接受一個參數，表示返回值的小數位數。
toExponential()以指數表示法返回字符串。
toPrecision(),自動選擇合適的表示方法。

注：這三個方法都會返回字符串。

var num3 = parseFloat("10.12345", 10);
   alert(typeof num3);//轉換完成後爲number類型
   var num3Str = num3.toFixed(4);//四捨五入後返回的是string類型
   alert(num3Str);//10.1235
   alert(typeof num3Str);//string類型

操做符須要注意的地方

對於 + 操做符,若是有一個操做數是字符串類型，那麼另外一個操做數會轉換爲字符串，而後拼接起來,看看下面的代碼

var f = true;
alert(f);//true
alert(typeof f);//boolean
var s = "";
alert( s + f);//輸出true
var fs = s+f;
alert( typeof fs);//返回String
var str = 'test_';
var strT = str + f;
alert(strT);//test_true
alert(typeof strT);//string
var num = 5;
var s = "5";
var ss = num+s;
alert(ss);//輸出55  將num轉換爲字符串的5 而後與5拼接得 字符串55
alert(typeof ss); //string
var is = parseInt(s);
alert(is + num);//輸出10

2.比較操做符 > < <= =>

若是兩個操做數都是數值 ,進行數值比較，
都是字符串，則比較兩個字符串的字符編碼值
只有一個操做數是數值，則將另外一個操做數轉爲數值進行比較
若是有一個操做數是布爾值，則先將其轉換爲數值，而後再進行比較。
若是一個操做數是對象，則調用這個對象的valueOf()方法，用前面的規則。若是對象沒有valueOf()方法，則調用toString()方法
若是兩個操做數都是對象，則比較他們是否是同一個對象。若是兩個操做數都指向同一個對象，則相等操做返回true,不然返回false
null和undefined是相等的

// == 與 != 的判斷是先轉換再判斷
var result =  "1" == 1;//  字符串會轉換爲數值 true
result =   "1" == 0;//  字符串會轉換爲數值 false
result = null == undefined;//null 與undefined 相等
result = null ==NaN;//NaN不管跟什麼比較 都不相等false
result = NaN == NaN;//NaN即便與NaN比較 都是false
//如果比較兩個對象是否==  則是是否指向同一個對象
var o1 = new Object();
var o2 = new Object();
var o3 = o1;
alert('o1==o2 ? ' + (o1==o2));//false
alert('o1==o3 ? ' + (o1==o3));//true

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。