文章配套視訊

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

進製表示

在JS中可以表示不同進位制的數字(得看瀏覽器支援):
16進位制的數字，則需要以0x開頭

      num = 0x18;
      num = 0xcf;
      num = 0xAacf;
   
8進位制的數字，則需要以0開頭
   
   num = 016;

2進位制的數字，則需要以0b開頭

   num = 0b1010;

注意:
"010"這種字串，有些瀏覽器會當成8進位制解析，有些會當成10進位制解析
可以在parseInt()或parseFloat中傳遞一個第二個引數，來指定數字的進位制

   str = "070";
  // str= parseInt(str,10);
   str = Number(str);		
   console.log(typeof str);
   console.log(str);

運算子

基本定義
運算子也叫操作符,
通過運算子可以對一個或多個值進行運算,並獲取運算結果,
比如：typeof就是運算子，可以來獲得一個值的型別,
它會將該值的型別以字串的形式返回: number string boolean undefined object

作用
運算子是告訴程式執行特定算術或邏輯操作的符號, 例如告訴程式, 某兩個數相加, 相減等

分類

按照功能劃分: 算術運算子, 位運算子, 關係運算符, 邏輯運算子
按照運算元個數劃分:
單目運算(只有一個運算元 如 : i++ !),
雙目運算(有兩個運算元 如 : a+b;),
三目運算(三目運算也稱為問號表示式 a>b ? 1 : 0;)

運算子的結合性
JavaScript中各種運算子的結合性分為兩種: 左結合性(自左至右) 和 右結合性(自右至左)

自左至右,即先左後右
 例如表示式: x - y + z;
 則y 應先與“-”號結合,執行 x-y 運算,然後再執行+z 的運算。
 這種自左至右的結合 方向就稱為“左結合性”。

自右至左,即先右後左
    例如:如x = y = z = 10
    由於“=”的 右結合性,應先執行z = 10; 再執行y = z 再執行x = y運算。
 

算術運算子

加法運算

減法運算

乘法運算

除法運算

取餘運算

一元運算子

只需要一個運算元
+ 正號不會對數字產生任何影響

   var num = 123;
    num = +num;
   console.log(num); // 123

對於非Number型別的值,會將先轉換為Number，然後再運算

  var bool = true;
  var res = +bool;
  console.log(res); // 1

  var str = "123";
  res = +str;
  console.log(res); // 123

  var str2 = "123abc";
  res = +str2;
  console.log(res); // NaN, 所以內部不是呼叫parseInt, 而是Number()函式

  var temp = null;
  res = +temp;
  console.log(res); // 0  

- 負號可以對數字進行負號的取反

  var num = 456;
  num = -num;
  console.log(num); // -456

  var result = 1 + -"2" + 3;
  console.log("result = "+result);

賦值運算子

簡單賦值運算子 =
格式: 變數 = 資料

// 將等號右邊的常量100賦值給左邊的變數num
var num = 100;

// 將等號右邊的變數num中儲存的值賦值給左邊的變數value
var value = num; 
  
    賦值運算子左邊只能是變數
 
 110 = 220; // 錯誤寫法
 var str = 110;
 220 = str; // 錯誤寫法
 
  多個賦值運算子可以組成 賦值表示式, 賦值表示式具備右結合性
 
 // 從右至左計算
//  先將10賦值給變數c, 然後將變數c中儲存的值賦值給變數b
// 然後將變數b中儲存的值賦值給變數a, 最後a,b,c儲存的都是10
a = b = c = 10;    

複合賦值運算子

+= 加後賦值 變數+=表示式 如:a+=1;即a=a+1
-= 減後賦值 變數-=表示式 如:a-=1;即a=a-1
= 乘後賦值 變數=表示式 如:a=1;即a=a1
/= 除後賦值 變數/=表示式 如:a/=1;即a=a/1
%= 取模後賦值 變數%=表示式 如:a%=1;即a=a%1

 複合賦值表示式運算
    格式: 變數 複合賦值運算子 表示式; 如: a *= 1 + 2;
    由於賦值運算子是右結合性, 所以會先計算等號右邊, 然後再進行復合運算
  
     var value = 5;
     value *= 2 - 2; // 等價於  value = 5 * (2 - 2);
     console.log(value); // 0
  

#   自增/自減運算子
自增、自減運算子介紹
  在程式設計中,經常遇到“i=i+1”和“i=i-1”這兩種極為常用的操作。
   JavaScript語言為這種操作提供了兩個更為簡潔的運算子,即++和--,分別叫做自增運算子和自減運算子。

自增、自減運算子求值過程
  無論運算子號在前還是在後, 變數在自身基礎上都會改變 

  var num = 1;
  num++; // 等價於 num = num + 1;
  console.log(num); // 2

  num = 1;
  ++num;
  console.log(num); // 2

  num = 1;
  num--; // 等價於 num = num - 1;
  console.log(num); // 0

  num = 1;
  --num;
 console.log(num); // 0

- 字尾表示式:x++, x--; 先用x的當前值作為表示式的值,再進行自增自減1運算。即“先用 後變”,也就是先用變數的值參與運算,變數的值再進行自增自減變化。

  var a, b;
  a = 20;
  b = 30;
  // ++ 在後, 變數先參與其它運算, 然後再自增
 var res = (a++) + (b++);
 console.log(res); // 50

  a = 10;
  b = 20;
  // -- 在後, 變數先參與其它運算, 然後再自減
  res = (a--) + (b--);
  console.log(res); // 30
  console.log(a); // 9
  console.log(b); // 19

- 字首表示式:++x, --x; 其中x表示變數名,先完成變數的自增自減1運算,再用x的值作為表 達式的值;即“先變後用”,也就是變數的值先變,再用變數的值參與運算。

var a, b;
a = 10;
b = 20;
// ++ 在前, 變數先自增, 然後再參與其它運算
res = (++a) + (++b);
console.log(res); // 32
console.log(a); // 11
console.log(b); // 21

 a = 10;
 b = 20;
 // ++ 在前, 變數先自增, 然後再參與其它運算
 res = (--a) + (--b);
 console.log(res); // 28
 console.log(a); // 9
 console.log(b); // 19

#  邏輯運算子
使用目的
   有時候，我們需要在多個條件同時成立的時候才能執行某段程式碼
    比如：使用者只有同時輸入了QQ和密碼，才能執行登入程式碼，如果只輸入了QQ或者只輸入了密碼，就不能執行登入程式碼。這種情況下，我們就要藉助於JavaScript提供的邏輯運算子。  

&&(與運算) 
   格式: 條件A && 條件B
    運算結果
  只有當條件A和條件B都成立時，結果才為true；其餘情況的結果都為false。因此，條件A或條件B只要有一個不成立，結果都為false
  口訣:一假則假
    邏輯與運算過程
       總是先判斷條件A是否成立;
     如果條件A成立，接著再判斷條件B是否成立：如果條件B成立，“條件A && 條件B”的結果就為true，如果條件B不成立，結果就為false;
       如果條件A不成立，就不會再去判斷條件B是否成立：因為條件A已經不成立了，不管條件B如何結果肯定是false;
       如果兩個值都是true則返回true;
   
       var result = true && true;
       //只要有一個false，就返回false
       result = true && false;
       result = false && true;
       result = false && false;
     
     短路測試
   
      //第一個值為true，會檢查第二個值
     true && alert("我來了！！");

      //第一個值為false，不會檢查第二個值
     false && alert("我沒有來！！");

注意點
對於非Boolean型別的數值, 邏輯與會自動將其轉換為Boolean型別來判斷
如果條件A不成立, 則返回條件A的數值本身
如果條件A成立, 不管條件B成不成立都返回條件B數值本身

      var result =  "123" && "abc";
      console.log(result); // "abc"
      result =  "123" && 0;
      console.log(result); // 0
      result =  null && 0;
      console.log(result); // null

||(或運算)

注意點
對於非Boolean型別的數值, 邏輯或自動會將其轉換為Boolean型別來判斷
如果條件A不成立, 則不管條件B成不成立都返回條件B數值本身
如果條件A成立, 則返回條件A的數值本身

 var  result =  null || 0;
 console.log(result); // 0
  
 result =  "123" || "abc";
 console.log(result); // "123"
 result =  "123" || 0;
 console.log(result); // "123"

!(非運算)

關係運算符

關係運算符存在的意義
預設情況下，我們在程式中寫的每一句正確程式碼都會被執行。但很多時候，我們想在某個條件成立的情況下才執行某一段程式碼
- 這種情況的話可以使用條件語句來完成，但是學習條件語句之前，我們先來看一些更基礎的知識：如何判斷一個條件成不成立。

JavaScript中的真假性
在JavaScript中，條件成立稱為“真”，條件不成立稱為“假”，因此，判斷條件是否成立就是判斷條件的“真假”。
在JavaScript已經給我們定義好了一個Boolean型別的值, 取值是true和false, true代表真, false代表假
而接下來我們要學習的關係運算符它的返回值正好就是Boolean型別的值, 也就是說關係運算符的返回值要麼是true,要麼是false

圖示

示例

   var a, b;
   a = 20;
   b = 20;
   console.log(a > b); // false
   console.log(a < b); // false
   console.log(a >= b); // true
   console.log(a <= b); // true
   console.log(a == b); // true
   console.log(a != b); // false

對於非數值進行比較時，會將其轉換為數值然後在比較

console.log(1 > true);
console.log(1 >= false);
console.log(1 > "0"); 
console.log(1 > null);
console.log(1 > true); //false
console.log(1 >= false); //true
console.log(1 > "0"); //true
console.log(1 > null); //true

如果符號兩側的值都是字串時，不會將其轉換為數字進行比較, 而會分別比較字串中字元的Unicode編碼
比較字元編碼時是一位一位進行比較
如果兩位一樣，則比較下一位，所以借用它來對英文進行排序
比較中文時沒有意義
測試

     console.log("a" < "b");
     console.log("abc" < "abd");
     console.log("你" > "我"); 

null、undefined 、NaN比較

console.log(null == 0); // false
console.log(undefined == 0); // false
// 永遠不要判斷兩個NaN是否相等
console.log(NaN == NaN); // false

/*
 * 可以通過isNaN()函式來判斷一個值是否是NaN
 *    如果該值是NaN則返回true，否則返回false
 */
var num = NaN;
console.log(isNaN(num)); // true

// undefined 衍生自 null, 所以返回true
console.log(null == undefined); // true;
console.log(null === undefined); // false;

// == 判斷值是否相等
// == 會進行資料型別轉換
console.log("123" == 123); // true
// === 判斷值和型別時候同時相等
// === 不會進行資料型別轉換
console.log("123" === 123); // false	 

注意
比較兩個字串型的數字，可能會得到不可預期的結果
所以, 在比較兩個字串型的數字時，一定要轉型
console.log(“1111123” < “124”);

逗號運算子

在JavaScript中逗號“,”也是一種運算子,稱為逗號運算子。 其功能是把多個表示式連線起來組成一個表示式, 稱為逗號表示式。
一般形式形式:　表示式1，表示式2，… …，表示式n;
例如: a = 1 + 1,b = 3 * 4, c = 10 / 2;

求值過程

  表示式1，表示式2，… …，表示式n;
 逗號表示式的運算過程是：先算表示式1，再算表示式2，依次算到表示式n
  整個逗號表示式的值是最後一個表示式的值
  案例
   
      var a, b, c, d;
       /*
      1.先計算表示式1, a = 2
      2.再計算表示式2, b = 12
     3.再計算表示式3, c = 5
      4.將表示式3的結果返回給d
      */
     d = (a = 1 + 1,b = 3 * 4, c = 10 / 2);
     console.log(d); // 5

使用注意
程式中使用逗號表示式, 通常是要分別求逗號表示式內各表示式的值,並不一定要求整個逗號表示式的值。
並不是在所有出現逗號的地方都組成逗號表示式,例如在變數說明中,函式引數表中逗號只是用作各變數之間的間隔符。

    var a, b, c;  //這裡的逗號只是分隔符
    function sendMessage(num, content) { //這裡的逗號只是分隔符
           console.log(num, content);
    }

三目運算子(條件運算子)

格式: 條件表示式 ? 語句1 : 語句2;
求值規則

如果條件表示式為true，則執行語句1，並返回執行結果
如果條件表示式為false，則執行語句2，並返回執行結果
// 彈第一個
true?alert("語句1") : alert("語句2");
// 彈第二個
false?alert("語句1") : alert("語句2");

注意點
條件運算子?和:是一對運算子,不能分開單獨使用
如果條件的表示式的求值結果是一個非布林值, 會將其轉換為布林值然後在運算

 // 彈第二個
 null?alert("語句1") : alert("語句2");
 // 彈第一個
 "abc"?alert("語句1") : alert("語句2");

運算子的優先順序

優先順序
JavaScript中,運算子的運算優先順序共分為15 級。1 級最高,15 級最低。
在表示式中,優先順序較高的先於優先順序較低的進行運算。
先計算優先順序高的
優先順序相同則左結合計算
可以使用()來改變優先順序
圖示

練習

使用者從鍵盤輸入3個整數, 找到最大值並輸出?

    // 1.定義3個變數, 接收使用者輸入的值
    var num1, num2, num3, max;

    // 2.利用prompt()接收使用者輸入的值
    num1 = Number(prompt('請輸入第一個數:'));
    num2 = +(prompt('請輸入第二個數:'));
    num3 = +(prompt('請輸入第三個數:'));

    // 3. 定義變數儲存最大值
    // var max;

    // 4. 利用三目運算子進行兩兩比較
    /*max = num1 > num2 ? num1 : num2;
    max = max > num3 ? max : num3;*/
    // 不推薦
    max = (num1 > num2 ? num1 : num2) > num3 ? (num1 > num2 ? num1 : num2) : num3;

    // 5. 輸出結果
    alert(max);

學習建議

多敲程式碼, 可結合視訊一起觀看, 不清楚的加我微信yejh9522溝通交流就好!