javascript中的資料型別及其常見用法

慕斯不想說話發表於2019-04-05
JavaScript資料型別

  javascript中一種有6中資料型別，有5種簡單資料型別（也稱為基本資料型別）：Undefined、Null、Boolean、Number 和String，還有1種複雜資料型別——Object。

1、Undefined

  Undefined 型別只有一個值，即特殊的undefined。根據工作中總結，只要有這幾種情況下會出現undefined。

1.定義變數，但是沒有初始化時,如var a；
2.呼叫某個函式時，實參個數小於形參個數時，未實參化的形參在函式呼叫過程中的值是undefined；
3.呼叫某個物件還沒有新增的屬性時，也會返回undefined；

        var obj={}   
        console.log(obj.name);//undefined
複製程式碼

4.呼叫某個沒有返回值的函式，也會返回undefined；

        function Person(name,age){
    		this.name=name;
    		this.age=age;
    	}
    	var p=Person("李四",23);//此時的p=undefined；
複製程式碼

5.對未初始化的變數執行 typeof 操作符會返回 undefined 值;
6.對未宣告的變數執行 typeof 操作符同樣也會返回 undefined 值。 

        var message; // 這個變數宣告之後預設取得了 undefined 值   
        //未初始化的變數
        alert(typeof message);     // "undefined"  
        //未申明的變數
        alert(typeof age);         // "undefined"   
複製程式碼

2、Null 型別

  是第二個只有一個值的資料型別，這個特殊的值是 null。從邏輯角度來看，null值表示一個空物件指標，要意在儲存物件的變數還沒有真正儲存物件。而這也正是使用 typeof 操作符檢測 null值時會返回"object"的原因。這幾種情況下會出現null的情況

1、手動設定變數的值或者物件某一個屬性值為null（在初始化物件時，手動設定物件為null。在作用域中不再需要使用某個物件時，把null賦值給那個變數解除引用，以釋放記憶體）
2、在javascript的DOM元素獲取中，如果沒有獲取到指定的元素物件，結果一般是null。

    var d=document.getElementById("d");
    console.log(d);//當沒有id為"d"的標籤時返回null
複製程式碼

3、Object.prototype._proto_的值也是null。（每一個物件都有__proto__屬性，指向對應的建構函式的prototype屬性,但是因為Object是所有類的基類,其沒有對應的建構函式，所有Object.prototype._proto_值為空）；

        console.log("a".__proto__);
        //指向的是String的prototype屬性
        //String {"", length: 0, constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}
複製程式碼

4、在正則捕獲的時候，如果沒有捕獲到結果，預設也是null。

  注意：實際上，undefined 值是派生自 null值的。undefined轉為數值為NAN,而null轉為數值卻為0

    alert(typeof null);//object
    alert(null == undefined);彈出的是true 
    alert(Number(undefined));//NAN
    alert(Number(null))//0
複製程式碼

3、Boolean型別

  這個型別需要注意的值它的兩個字面量true和false是區分大小寫的。還要注意其他型別轉換為此型別的情況。

資料型別 轉換為true的值 轉換為true的值
String 任何非空字串 空字串("")
Number 任何非零數值(包括無窮大) 0和NAN
Object 任何物件 null
Undefined 沒有為true的情況 undefined

4、Number

注意點1：Number的浮點數值在進行算術計算時精確度遠遠不如正數，所以不要去計算兩個浮點數相加的結果是否等於另一個浮點數。

    if(0.1+0.2==0.3){
        alert("相等")
    }
    這種情況永遠都不會彈出"相等"的。因為浮點數的精度太高，0.1+0.2的值不一定精確的等於0.3。
複製程式碼

  

注意點2：:NaN,即非數值（Not a Number）是一個特殊的數值，這個數值用於表示一個本來要返回數值的運算元未返回數值的情況（這樣就不會丟擲錯誤了）。

  NaN 本身有兩個非同尋常的特點。

1、任何涉及 NaN 的操作（例如 NaN/10）都會返回 NaN，這個特點在多步計算中有可能導致問題。
2、NaN與任何值都不相等，包括 NaN 本身。

  針對 NaN 的這兩個特點，ECMAScript定義了 isNaN()函式。這個函式接受一個引數，該引數可以 是任何型別，而函式會幫我們確定這個引數是否“不是數值”。任何不能被轉換為數值的值都會導致這個函式返回 true。

注意點3：數值轉換 有三個函式可以將非數值轉換為數值：Number()、parseInt()、parseFloat()。Number()可以用於轉換任何資料型別，而另外兩個只能將字串轉換為數值。

  4.1 Number()函式的轉換規則如下所示

  • 如果是Boolean型別，true和false分別轉換為1和0.

      Number(true);//1
  Number(false);//0
複製程式碼

  • 如果是null值，返回0。

  • 如果是undefined，返回NAN

      Number(null);//0
  Number(undefined);//NAN
複製程式碼

  • 如果是String型別，需要考慮以下情況。
    1、如果字串中只包含數字，則直接將其轉換為10進位制數值,並且會忽略前導0。如"123"會變成123，"011"會變成11，"1.1"會變成1.1。
    2、字串中包含有效的十六進位制格式，則會將其轉換為相同大小的10進位制整數值。 3、如果字串為空的，則將其轉換為0。
    4、除上面三種情況外，都會轉換為NAN。

  • 如果是Object型別，則呼叫物件那個的valueOf(),依照前面的規則轉換返回的值。不過一般不會將物件去轉換成對應的數值。一般情況下物件轉換成數值都是返回NAN。

      Number({a:123});//NAN
複製程式碼

  4.2 parseInt()轉換規則

  在轉換字串時更多的是看其是否符合數值格式，它會自動忽略字串前面的空格，直到找到第一個非空字串，如果是非數值字串就直接返回NAN，如果是數值字串則會一直匹配到非數值字串處結束。並且轉換空字元轉時會返回NAN。

  parseIn也能夠識別出各種正數格式（八進位制、十六進位制）。做這種轉換時需要傳遞第二個引數,不然分辨不出八進位制格式的資料。

    parseInt("  s");//NAN
    parseInt("s");//NAN
    parseInt("   2s");//2
    parseInt("");//NAN
    parseInt("0xA",16);//10(十六進位制)
    parseInt("070");//70
    parseInt("070",8);//56
複製程式碼

  4.3 parseFloat轉換規則

  parseFloat跟parseInt的解析規則類似。區別在於：它只解析十進位制值，沒有第二個引數指定基數 。

5、String型別

這裡在價格其他型別的值轉換為字串時，主要遵循如下規則。

1、如果值有 toString()方法，則呼叫該方法（沒有引數）並返回相應的結果；
2、如果值是 null，則返回"null"；
3、如果值是 undefined，則返回"undefined"。

    var value1 = 10;
    var value2 = true; 
    var value3 = null; 
    var value4; 
    alert(String(value1));     // "10"  
    alert(String(value2));     // "true
    alert(String(value3));     // "null"
    alert(String(value4));     // "undefined" 
複製程式碼

主要有以下方法：

1、字元方法
  charAt(index):返回給定位置的字元，index未指定時，預設為0。
  charCodeAt(index):返回指定位置的字元編碼，index未指定時，預設為0。 。
  fromCharCode()：接收一個或多個字元編碼，然後將他們轉換為字串。從本質上看是charCodeAt()的相反操作。

    console.log(String.fromCharCode(104,102,103,106));//"hfgi"
    var str="hijhj"
    console.log(str.charAt());//"s",index未指定時，預設為0
    console.log(str.charAt(1));//"i"
    console.log(str.charCodeAt());//104
    console.log(str.charCodeAt(1));//105
複製程式碼

2、字串操作方法
  字串拼接:concat()，不會改變字串本身，會返回一個新的字串。
  字串分割:slice()、substr()、substring()。不會改變字串本身，會返回一個新的字串。他們之間的區別如下。

方法 第一個引數 第二個引數
slice 表示切割的起點（預設值為0），為負數時會將負值與字串的長度相加作為索引起點 表示切割的終點（預設值為字串的長度），為負數時會將負值與字串的長度相加作為索引終點
substr 表示切割的起點，為負數時會將負值與字串的長度相加作為索引起點 表示切割的個數，為負數時自接轉換為0
substring 表示切割的起點，為負數時自接轉換為0 表示切割的終點，為負數時自接轉換為0 
        var str="hello world";
    	console.log(str.slice());//hello world
    	console.log(str.slice(1,3))//el
    	console.log(str.slice(-1,-3))//""
    	console.log(str.substring());//hello world
    	console.log(str.substring(1,3));//el
    	console.log(str.substring(-1,-3))//""
    	console.log(str.substr())//hello world
    	console.log(str.substr(1,3));//ell
    	console.log(str.substr(-1,-3))//""
複製程式碼

3、字串位置方法
  indexOf(str,index)和lastIndexOf(str,index)：用於從指定字串中指定位置(index,預設是0)開始搜尋str，返回str第一次出現的位置的索引值。只不過indexOf()是從開頭向後搜尋，lansIndexOf反之。
4、trim()方法
  用於刪除字串前置和字尾的所有空格。
5、字串大小寫轉換方法
   toLowerCase() 將字串全部轉換為小寫; toUpperCase() 將字串全部轉換為大寫。還有針對特定地區的方法如:toLocaleLowerCase() 將字串全部轉換為小寫;toLocaleUpperCase() 將字串全部轉換為大寫。建議一般情況下使用針對地區的方法。
6、字串的模式匹配方法
   match(): 只接受一個引數，要麼是正規表示式，要麼是RegExp物件，返回一個陣列。本質上於RegExp的exec()方法相同。

    var str="hello world";
    var pattern=/llo/;
    var matches=str.match(pattern);
    console.log(matches)
複製程式碼

javascript中的資料型別及其常見用法

  search(): 與match方法的引數相同,要麼是正規表示式，要麼是RegExp物件。返回字串中第一個匹配項的索引。如果沒有匹配上則返回-1。並且始終從字串開始向後查詢。

    var str="hello world";
    var pattern1=/llo/;
    var pattern2="lloe"
    var index1=str.match(pattern1);//2
    var index2=str.match(pattern2);//-1
複製程式碼

  replace(): 接收兩個引數，第一個引數可以是RegExp物件或者字串，第二個引數是一個字串或者一個函式。第一個引數是字串時，name只會替換第一個子字串。要想替換所有的子字串，必須提供正規表示式，而且要指定全域性（g）標誌。

    var str = "hello world";
    var res1 = str.replace("l", "ww");
    console.log(res1); //  hewwlo world     
    var res2 = str.replace(/l/g, "ww");
    console.log(res2);//hewwwwo worwwd
複製程式碼

  如果第二個引數為字串，還可以使用一些特殊的字元序列。

javascript中的資料型別及其常見用法
例項如下：

        var str="hello world hello hello";
        var res=str.replace(/(.ll)/g,"123($1)");
        console.log(res);//h123(ell)o world h123(ell)o h123(ell)o
複製程式碼

  如果第二個引數為函式，在只有一個匹配項的情況下，會向這個函式傳遞3個引數：模式的匹配項，模式匹配項在字串中的位置和原始字串。 function(match,pos,originalText) 。如果是有過個捕獲組的情況下，傳遞給函式的引數依次是模式的匹配項，第一個捕獲組的匹配項，第二個捕獲組的匹配項。。。，最後兩個引數仍然是模式匹配項在字串中的位置和原始字串。

  split(): 基於指定的分隔符將字串分割為多個子字串。並返回一個陣列。分隔符可以是字付串也可以是RegExp物件。還可以接受第二個引數，用於指定返回陣列的大小。

        var str="tre,rwr,rewr,rwrew";
        var res1=str.split(",");
        var res2=str.split(",",2);
        var res3=str.split(/[^\,]+/);//表示以多個非","進行分割
        console.log(res1);//(4) ["tre", "rwr", "rewr", "rwrew"]
        console.log(res2);//(2) ["tre", "rwr"]
        console.log(res3);//(5) ["", ",", ",", ",", ""]
複製程式碼

7、localeCompare()方法
  用於比較兩個字串。 如果字串再字母表中排在傳入字串引數之前，則返回一個負數，反之則是一個整數，相等時返回0。

    var str="bbc";
    alert(str.localeCompare("cca"));//-1
    alert(str.localeCompare("aca"));//-1
    alert(str.localeCompare("bbc"));//0
複製程式碼

8、HTMl方法
但是儘量不去使用這些方法，因為他們建立的標記通常無法表達語義。

javascript中的資料型別及其常見用法

6、Object型別

主要是注意這幾個方法:

hasOwnProperty(propertyName)： 用於檢查給定的屬性在當前物件例項中（而不是在例項的原型中）是否存在。其中，作為引數的屬性名（propertyName）必須以字串形式指定（例如：o.hasOwnProperty("name")）。

isPrototypeOf(object)： 用於檢查傳入的物件是否是傳入物件的原型。

propertyIsEnumerable(propertyName)： 用於檢查給定的屬性是否能夠使用 for-in 語句 （本章後面將會討論）來列舉。與 hasOwnProperty()方法一樣，作為引數的屬性名必須以字串形式指定。

getKeys(obj)： 返回一個陣列，成員是引數物件自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。

getValues(obj)： 返回一個陣列，成員是引數物件自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值。屬性名為數值的屬性，是按照數值大小，從小到大遍歷的。

相關文章