文章配套視頻

• https://study.163.com/course/introduction/1005973001.htm

數(shù)據(jù)

• 數(shù)據(jù)是指所有能輸入到計(jì)算機(jī)并被計(jì)算機(jī)程序處理的符號的介質(zhì)的總稱哼蛆，是具有一定意義的數(shù)字、字母孩等、符號和模擬量等的通稱肛鹏。

數(shù)據(jù)以各種形式存在于我們生活中

數(shù)據(jù)類型

• 為什么會有數(shù)據(jù)類型假夺？

var  a = 10;
var  b = '10';

思考：變量名a 和 變量名b 保存的數(shù)據(jù)是否一樣蒸其？

• JS中常用的數(shù)據(jù)類型

  • 程序在運(yùn)行過程中會產(chǎn)生各種各樣的臨時(shí)數(shù)據(jù), 為了方便數(shù)據(jù)的運(yùn)算和操作, JavaScript對這些數(shù)據(jù)進(jìn)行了分類, 提供了豐富的數(shù)據(jù)類型；

  • 在JavaScript中一共有六種數(shù)據(jù)類型：

  • JS的6種數(shù)據(jù)類型

• JS中如何查看數(shù)據(jù)類型?

  • typeof 操作符
    • 會將檢查的結(jié)果以字符串的形式返回給我們

    console.log(typeof  100); // number
    var name = "旋之華";
    console.log(typeof name ); // string
    

• 數(shù)字類型（Number）

  1: 最基本的數(shù)據(jù)類型
  2: 不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值
  3: 能表示的最大值是±1.7976931348623157乘以10的308次方
  能表示的最小值是±5 乘以10的-324次方
  4：包含十六進(jìn)制數(shù)據(jù)暇检，以 0x開頭 0到9之間的數(shù)字，a(A)-f(F)之間字母構(gòu)成喘漏。 a-f對應(yīng)的數(shù)字是10-15
  5： 八進(jìn)制直接以數(shù)字0開始护蝶，有0-7之間的數(shù)字組成。

  • 在JS中所有的數(shù)值都是Number類型(整數(shù)和小數(shù))

   var num1= 123;
   var num2= 3.14;
   console.log(typeof num1); // number
   console.log(typeof num2); // number
  

  • 由于內(nèi)存的限制翩迈，ECMAScript 并不能保存世界上所有的數(shù)值

   // 最大值：Number.MAX_VALUE
   console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308
   // 最小值：Number.MIN_VALUE
   console.log(Number.MIN_VALUE);  // 5e-324
   // 無窮大：Infinity, 如果超過了最大值就會返回該值
   console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
   // 無窮谐只摇：-Infinity, 如果超過了最小值就會返回該值
   console.log(typeof Infinity); // number
   console.log(typeof -Infinity); // number
  

  • NaN 非法數(shù)字（Not A Number）
    JS中當(dāng)對數(shù)值進(jìn)行計(jì)算時(shí)沒有結(jié)果返回，則返回NaN

   var str = NaN;
   console.log(typeof str ); // number
  

  • Number類型注意點(diǎn)

   //  JS中整數(shù)的運(yùn)算可以保證精確的結(jié)果
    var counter = 120 + 20;
    console.log(counter ); // 140
   //  在JS中浮點(diǎn)數(shù)的運(yùn)算可能得到一個不精確的結(jié)果
    var counter = 100.1 + 20.1;
    console.log(counter ); // 120.200000000000003
  

• 字符串類型（string）

  • 字符串由單引號或雙引號括起
  • 例如單獨(dú)一個字母也被稱為字符串（例如：‘a(chǎn)’）
  • " '
  • 使用字符串注意事項(xiàng)

    //  正常的情況
    var str1 = "hello";
    var str2 = `world`;
    console.log(typeof str1 ); // string
    console.log(typeof str2); // string
    
    //  不能一單一雙负饲，必須成對出現(xiàn) 
    var str3 = `hello world"; // 錯誤
    
    //  相同引號不能嵌套堤魁，不同引號可以嵌套
    var str3 = "hello "world""; // 錯誤
    var str4 = `hello `world``; // 錯誤
    var str5 = "hello 'world'"; // 正確
    var str6 = `hello "world"`; // 正確
    

• 布爾類型（Boolean）

  • 布爾型也被稱為邏輯值類型或者真假值類型
  • 布爾型只能夠取真（true）和假（false）兩種數(shù)值, 也代表1和0，實(shí)際運(yùn)算中true=1,false=0

  var bool1 = true;
  var bool2 = false;
  console.log(typeof bool1); // boolean
  console.log(typeof bool2); // boolean
  

  • 雖然Boolean 類型的字面值只有兩個返十，但 ECMAScript 中所有類型的值都有與這兩個 Boolean 值等價(jià)的值

  任何非零數(shù)值都是true, 包括正負(fù)無窮大, 只有0和NaN是false
  任何非空字符串都是true, 只有空字符串是false
  任何對象都是true, 只有null和undefined是false

   var bool = Boolean(0);
   console.log(bool ); // false
  var bool = Boolean(1);
  console.log(bool ); // true
  var bool = Boolean(-1);
  console.log(bool ); // true
  var bool = Boolean("hello");
  console.log(bool); // true
  var bool = Boolean("");
  console.log(bool ); // false
  var bool = Boolean(undefined);
  console.log(bool ); // false
  var bool = Boolean(null);
  console.log(bool8); // bool 
  

• Null和Undefined

  • Undefined這是一種比較特殊的類型妥泉，表示變量未賦值，這種類型只有一種值就是undefined

    var num;
    console.log(num);  //結(jié)果是undefined
  

  • undefined是Undefined類型的字面量

    • 前者undefined和10, "abc"一樣是一個常量
    • 后者Undefined和Number,Boolean一樣是一個數(shù)據(jù)類型

  • 需要注意的是typeof對沒有初始化和沒有聲明的變量都會返回undefined洞坑。

   var str1 = undefined;
   console.log(typeof str1 ); //結(jié)果是undefined
    
   var str2;
   console.log(typeof  str2); //結(jié)果是undefined
  

  • Null 類型是第二個只有一個值的數(shù)據(jù)類型盲链，這個特殊的值是 null
    • 從語義上看null表示的是一個空的對象。所以使用typeof檢查null會返回一個Object

      var test1= null;
      console.log(typeof test1);
    

  • undefined值實(shí)際上是由null值衍生出來的迟杂，所以如果比較undefined和null是否相等刽沾，會返回true

     var str1 = null;
     var str2 = undefined;
     console.log(str1 == str12);
     console.log(str1=== str2);
    

數(shù)據(jù)類型轉(zhuǎn)換

• 什么是數(shù)據(jù)類型轉(zhuǎn)換

  • 將一個數(shù)據(jù)類型轉(zhuǎn)換為其他的數(shù)據(jù)類型, 比如: 將String類型轉(zhuǎn)換為Number類型, 將Number類型轉(zhuǎn)換為Boolean類型... ...

• toString()

  • 將其它類型的數(shù)據(jù)轉(zhuǎn)換為字符串類型

       var num = 12306;
       var str= num .toString();
       console.log(str); // 12306
       console.log(typeof str); // string
    
       var num1 = true;
       var str1 = num1.toString();
       console.log(str1 ); // true
       console.log(typeof str1 ); // string
    

  • 注意:null和undefined沒有toString()方法，如果強(qiáng)行調(diào)用,則會報(bào)錯

     var num2 = undefined;
     var str2 = num2.toString(); // 報(bào)錯
     console.log(str2 );
    
     var num3 = null;
     var str3= num3.toString(); // 報(bào)錯
     console.log(res4);
    
     var num4 = NaN;
     var str4 = num4.toString();
     console.log(str4); // NaN
     console.log(typeof str4); // String
    

  • toString()不會影響到原變量排拷，它會將轉(zhuǎn)換的結(jié)果返回

     var num5 = 10;
     var str5 = str5.toString();
     console.log(typeof num5 ); // number
     console.log(typeof str5 ); // string
    

• String()函數(shù)

  • 有的時(shí)候, 某些值并沒有toString()方法侧漓，這個時(shí)候可以使用String()。比如：undefined和null
    • Number和Boolean的數(shù)據(jù)就是調(diào)用的toString()方法
    • 對于null和undefined监氢，就不會調(diào)用toString()方法, 因?yàn)闆]有這個方法, 會在內(nèi)部生成一個新的字符串

• +

  • 任何數(shù)據(jù)和 + 連接到一起都會轉(zhuǎn)換為字符串
    , 其內(nèi)部實(shí)現(xiàn)原理和String()函數(shù)一樣

       var num1 = 100;
       var res1 = num1 + "";
       console.log(res1); // 100
       console.log(typeof res1); // string
    
       var num2 = true;
       var res2 = num2 + "";
       console.log(res2); // true
       console.log(typeof res2); // string
    
       var num3 = undefined;
       var res3 = num3 + "";
       console.log(res3); // undefined
       console.log(typeof res3); // string
    
       var num4 = null;
       var res4 = num4 + "";
       console.log(res4); // null
       console.log(typeof res4); // string
    

• Number()函數(shù)

  • 字符串 轉(zhuǎn) 數(shù)字
    • 如果是純數(shù)字的字符串布蔗，則直接將其轉(zhuǎn)換為數(shù)字

    var str1 = "666";
    var res1 = Number(str1);
    console.log(res1); // 666
    console.log(typeof  res1); // number
    

    • 如果字符串中有非數(shù)字的內(nèi)容，則轉(zhuǎn)換為NaN

    var str2 = "itlike123";
    var res2 = Number(str2);
    console.log(res2); // NaN
    

    • 如果字符串是一個空串或者是一個全是空格的字符串浪腐，則轉(zhuǎn)換為0

    var str3 = "";
    var res3 = Number(str3);
    console.log(res3); // 0
    
    var str4 = "    ";
    var res4 = Number(str4);
    console.log(res4); // 0
    

  • undefined 轉(zhuǎn) 數(shù)字

    var str6 = undefined;
    var res8 = Number(str6);
    console.log(res8); // NaN
    

  • null 轉(zhuǎn) 數(shù)字

    var str5 = null;
    var res7 = Number(str5);
    console.log(res7); // 0
    

  • 布爾 轉(zhuǎn) 數(shù)字
    • true 轉(zhuǎn)成 1, false 轉(zhuǎn)成 0

       var bool1 = true;
      var res5 = Number(bool1);
      console.log(res5); // 1
    
      var bool2 = false;
      var res6 = Number(bool2);
      console.log(res6); // 0
    

• parseInt()函數(shù)和parseFloat()函數(shù)

  • Number()函數(shù)中無論混合字符串是否存在有效整數(shù)都會返回NaN, 利用parseInt()/parseFloat()可以提取字符串中的有效整數(shù)

  • parseInt()和parseFloat()的區(qū)別是前者只能提取整數(shù),后者可以提取小數(shù)

  • parseInt()提取字符串中的整數(shù)

    • 從第一位有效數(shù)字開始, 直到遇到無效數(shù)字
      如果第一位不是有效數(shù)字, 什么都提取不到, 會返回NaN
    • 第一個參數(shù)是要轉(zhuǎn)換的字符串纵揍，第二個參數(shù)是要轉(zhuǎn)換的進(jìn)制

     var str7 = "300px";
     var res9 = parseInt(str7);
     console.log(res9); // 300
    
     var str8 = "300px250";
     var res10 = parseInt(str8);
     console.log(res10); // 300
     console.log(parseInt("abc123"));  //返回NaN，如果第一個字符不是數(shù)字或者符號就返回NaN
    console.log(parseInt(""));        //空字符串返回NaN议街，Number("")返回0 
    

  • parseFloat提取字符串中的小數(shù)

    • 會解析第一個. 遇到第二個.或者非數(shù)字結(jié)束
    • 如果第一位不是有效數(shù)字, 什么都提取不到
    • 不支持第二個參數(shù)骡男，只能解析10進(jìn)制數(shù)
    • 如果解析的內(nèi)容里只有整數(shù)，解析成整數(shù)

    var str9 = "20.5px";
    var res11 = parseInt(str9);
    console.log(res11); // 20
    
    var str10 = "20.5.5.5px";
    var res12 = parseFloat(str10);
    console.log(res12); // 20.5
    

• 對非String使用parseInt()或parseFloat(), 會先將其轉(zhuǎn)換為String然后在操作

     var str11 = true;
     var res13 = parseInt(str11); // 這里相當(dāng)于parseInt("true");
     console.log(res13); // NaN
     var res14 = Number(str11);
     console.log(res14); // 1