JS基礎 -- 大復習(階段二)

資料型別轉換

資料型別轉換：就是把一種資料型別的變數轉換成另外一種資料型別，

顯示轉換：程式員利用一些JS給我們提供的工具函式進行資料型別的轉換

隱式轉換：程式在運行的程序中，根據背景關系的環境將變數的資料型別進行轉換

轉換為字串

1. String(要轉換的變數名)

2. 變數名.toString()

3. 使用+ 變數名+ ''

// 1 把數字型轉換為字串 變數.toString() 
    var v1 = 10
    var str = v1.toString()
    console.log(str);
    console.log(typeof str);

// 2 利用 String()
console.log(String(v1));
// 3 利用 + 拼接字串的方法實作轉換效果 隱式轉換
console.log(v1 + ' ');

轉換為數字型(重點)

parseInt應用

語法：parseInt(變數名|字面量)

作用：從一個變數名提取整數，假設這個變數名是一個字串資料型別，如果變數的第一個字符不是數字直接回傳NaN，如果是數字就往后進行提取，如果遇到了非數字就停止提取

// parseInt 把字符型的轉換為數字型 得到是整數 
   var v1 = '10.111' 
   console.log(parseInt(v1)); // 10 
   var v2 = '200px' 
   console.log(parseInt(v2)); // 200  
   var v3 = 'px150' console.log(parseInt(v3)); //NaN

parseFloat應用

語法：parseFloat(變數名|字面量

作用：從一個變數名提取小數，假設這個變數名是一個字串資料型別，如果變數的第一個字符不是數字直接回傳NaN，如果是數字就往后進行提取，如果遇到了除了第一個小數點以外的非數字就停止提取

// 2 parseFloat把字符型轉換為數字型 得到的是浮點數       
   var num1 = '12.35'
   console.log(parseFloat(num1)); // 12.35
   var num2 = 'rem3.14'
   console.log(parseFloat(num2)); //NaN

Number()強制轉換

語法：Number(要轉換的變數名)

因為我們之前講過 Number型別的值只有兩種：數字、NaN，如果我們將其它的資料型別轉換為Number，有可能轉換為數字，也有可能轉換不成功，就會用NaN (Not a Number) 來表示，

• 將字串型別的資料轉換為Number型別 如果字串里面包含非數字的字符 那么就轉換為NaN，如果字串里面全是數字 就被轉換為對應的數字

• 將boolean型別資料轉換為number型別 true ----> 1 false -----> 0

• 將undefined型別資料轉換為number型別 結果NaN

• 將null型別轉換為number轉換 結果 0

// 3 Number()強制轉換 把字符型的轉換為數字型
     var v4 = '1234'
     // var v4 = '1234ab'
     var res = Number(v4);
     console.log(res);
     console.log(typeof res);
     var v4 = true
     var res = Number(v4);
     console.log(res);
     console.log(typeof res);
     /* var v4 = undefined
     var res = Number(v4);
     console.log(res);
     console.log(typeof res);
     var v4 = null
     var res = Number(v4);
     console.log(res);
     console.log(typeof res); */

利用算術運算子進行轉換

js算術運算子-隱式轉換(- * /)

  console.log('13' - 0); //13
  console.log('13' * 15);//195
  console.log('15' / 5);//3
  var a = isNaN('123'); //false
如果判斷的變數的資料型別不是Number型別，它會先將這個變數轉換為Number型別再作判斷

計算年齡案例

   // 彈出一個輸入框（prompt)，讓用戶輸入出生年份 （用戶輸入） 
  // 把用戶輸入的值用變數保存起來，然后用今年的年份減去變數值，結果就是現在的年齡 （程式內部處理）
   // 彈出警示框（alert) ， 把計算的結果輸出 （輸出結果）
      var year = prompt('請您輸入您的出生年份');
      var age = 2018 - year; // year 取過來的是字串型  但是這里用的減法 有隱式轉換
      alert('您今年已經' + age + '歲了');

簡單加法計算器案例

// 1 需要準備2個用戶輸入對話框 讓用戶輸入數字保存起來
var num1 = prompt('請輸入第一個數字');
var num2 = prompt('請輸入第二個數字');
// 2 將兩個數字進行相加
var sum = Number(num1) + Number(num2)
alert(`您的結果是${sum}`)

轉換為布爾型

Boolean(要轉換的變數名)

轉換的結果只有兩種：true和false

• 將字串型別轉換為Boolean 只有空字串為 false，其它的都是true

• 將Number型別轉換為Boolean 只有0與NaN才為false 其它的都是true

• 將undefined與null轉換為Boolean 結果都為false

var num = -1
  var res = Boolean(num)
  console.log(res)
 var v1 = undefined
console.log(Boolean(v1))

算術運行符

JavaScript 算術運算子

算術運算子用于執行變數與/或值之間的算術運算，

給定 y=5，下面的表格解釋了這些算術運算子：

遞加與遞減運算子

加加運算子

我們會把加加運算子分為 前加加和后加加

前加加：比如 ++i 加加符號在變數的前面

后加加：比如 i++ 加加符號在變數的后面

//自增運算子 自身值加1
// 注意點：變數++ var num=10 num++
var num=10
num++ // 11
或
++num // 11
//總結：前置自增與后置自增 單獨是一行，沒有區別，都是自身變數+1

//1.前置自增:先自增,再回傳，
++num

//2.后置自增 : 先回傳，再自增
num++

規則：

1. 如果只是單獨運算 不管是前加加還是后加加 它們自己都會進行加1

// 累加 指的就是這個變數會進行自加1操作
      //   var i = 10
      //   i++ // i = i+ 1
      //   document.write(i)

      var i = 10
      ++i
      console.log(i)

2 .如果將加加運算子進行賦值結果就不一樣了

前加加：第一步：先會將自己的值進行加1 第二步：然后才賦值給另外一個變數

      var i = 10
      // 第一步：i = i + 1 = 10 + 1 = 11
      // 第二步：b = i = 11
      var b = ++i
      console.log(i)
      console.log(b)

后加加：第一步：先會將自己的值賦值給等號左邊的變數 第二步：然后才將自己進行加1操作

var i = 10
// 第一步：將 變數i的值賦值 給變數 b b = i = 10
// 第二步：將i的值進行自加1 i = i + 1
var b = i++
console.log(i) // 11
console.log(b) // 10

變態加加

var i = 10
// 10 11 12
// var b = i++ + i++ + i++;

// 11 12 13
var b = ++i + ++i + ++i
console.log(b)

比較運算子

比較運算子它會得到布爾型別的結果：true或者false

比較運算子在邏輯陳述句中使用，以測定變數或值是否相等，

給定 x=5，下面的表格解釋了比較運算子：

注意：==與 ===之間的區別 二個等號只是在比較值是否相等 ， 不會比較變數的資料型別

三個等號不僅僅比較值是否相等 同時還要比較變數的資料型別是否相等

建議：多使用三個等號

邏輯運算子

邏輯運算子用于測定變數或值之間的邏輯，

給定 x=6 以及 y=3，下表解釋了邏輯運算子：

邏輯運算子不僅僅可以等到布爾型別的值 還可以得到其它值

布爾型別的值

邏輯與：只有一種情況會得到 true ，就是&&兩邊都為真的時候才為真，只要一邊為假就會得到 false 其它的情況都是假的

邏輯或：只有一種情況會得到 false ，就是||兩邊都為假才為假 ，只它的情況都為 true

邏輯非：一般是配置布爾型別的資料來使用 !變數名 取反 將真變假 將假變真

其它值：

邏輯與：

1. 如果&&符號左邊的值為假，不會管&&符號右邊的值到底是真還是假 ，回傳&&符號左邊的結果

2. 如果&&符號左邊的值為真，不會管&&符號右邊的值到底是真還是假 ，回傳&&符號右邊的結果

 var res1 =0 && 20
console.log(res1)// 0 

var res2 = 5 && 20
console.log(res2)// 20 

邏輯或：

1. 如果|| 符號左邊 的值為假，不會管||符號右邊的值到底是真還是假 ，回傳||符號右邊的結果

2. 如果||符號左邊的值為真，不會管||符號右邊的值到底是真還是假 ，回傳||符號左邊的結果

var res = 5 || NaN
console.log(res) // 5 

練習的時候可以一步一步拆分,注意拆分之后代碼的執行順序以及語法的機制,

細心勤練,你我皆是前端的贏家