JS基礎（一）---基本數據類型、運算符及基本語句

1、JavaScript 簡介

JavaScript是什么？

JavaScript是一種運行在客戶端的解釋性腳本語言，能夠實現HTML網頁豐富的動態交互效果。

ECMAScript

為了讓JavaScript成為全球標準，幾個公司聯合ECMA（European Computer Manufacturers Association）組織定制了JavaScript語言的標準，被稱為ECMAScript標準。

ECMAScript 是 JavaScript 語言的規范標準，JavaScript 是 ECMAScript 的一種實現。不過，在大多數情況下，這兩個詞在語境上是可以互換的。

JavaScript的組成

JavaScript是由 ECMAScript、DOM 以及 BOM 三者組成。

ECMAScript：語言核心部分

DOM： Document Object Model，文檔對象模型，DOM是專門操作網頁內容的API標準

BOM：Browser Object Model，瀏覽器對象模型，對客戶端和瀏覽器窗口進行訪問和操作

2、JavaScript 的基本語法

JavaScript書寫位置

  • 可以寫在html文檔中的<script>標簽中，例如:

    <body>
   <script>
      // 書寫js代碼
   </script>
</body>

  • 也可以單獨寫在外部的js文件中，通過<script>標簽進行引入，例如:

    <script src="js/main.js"></script>

注釋的使用

js的注釋有兩種：單行注釋（// ...... ）和多行注釋（/* ...... */）

簡單的輸入、輸出函數

alert() 語句

在瀏覽器中彈出警示框，內容自定義，js內置方法

<script>
  alert("1");   //在瀏覽器窗口彈出警示框，內容為  1
</script>
prompt() 語句

在瀏覽器中彈出一個提示對話框，對話框中有一個提示信息 以及 一個輸入框，輸入框中可根據提示信息輸入合理內容。
prompt() 是 js內置方法，有兩個參數，都是字符串類型，第一個參數是設置 提示對話框的提示信息，第二個參數是 輸入框中的默認初始內容，該參數可以省略不寫

<script>
  prompt("請輸入一個正整數", "10");
</script>
console對象

瀏覽器控制臺中進行js語句的執行操作，其中console.log()能夠將內容在控制臺中打印輸出

字面量的概念

用于表達一個固定值（比如數字、字符串、布爾類型、undefined等的字面值）的表示法。 通俗的理解，字面就是所見即所得，js執行代碼中的字面量，會立即知道它是什么類型的數據，值為多少。

變量

變量，是計算機內存中存儲數據的標識符。使用變量，能夠方便地獲取和修改內存中的數據。

聲明變量

通過var關鍵字定義變量，var之后需要添加空格，再自定義一個變量名，例如：var num;

命名規則

允許使用字母、數字、下劃線、$符號，不能以數字開頭

字母區分大小寫

不能使用 保留字 和 關鍵字

命名規范

見名知意

建議使用 駝峰命名：多個單詞組成時，第一個單詞的首字母小寫，之后的每個單詞首字母大寫，如：backgroundColor、listStyleType

變量賦值

將等號右邊的數據，保存到等號左邊的變量中
變量名 = 值
在聲明變量的同時，可以初始化變量的值，如：var num = 0;

使用變量的特殊情況
  1. 當只聲明了變量，但沒賦值，在使用時，默認值為undefined
  2. 不能使用從未聲明的變量，在使用時，會報錯，ReferenceError：XXX is not defined
  3. 從未聲明的變量，能夠賦值，此時變量為全局變量（與var定義的變量還是存在區別的）

因此，在使用變量之前，必須先聲明變量

3、JavaScript的數據類型

基本數據類型： Number、String、Boolean、undefined、null
復雜數據類型： Object

Number，數字類型

表示所有數字，整數、浮點數、特殊值NaN。凡是不加引號的數字，都是Number類型數據。

整數

整數可以被表示成十進制、八進制以及十六進制

十進制：最基本的數值字面量格式
八進制：數值前綴必須為 0、0O、0o，八進制整數只能包括數字0~7，如：045、0O45、0o45
十六進制：前綴為0x或者0X。后面可以包含數字0~9和字母a ~ f或者A ~ F，如：0x45a、0X45A

1、八進制中的特殊情況： 在八進制中，如果以 0 開頭，每個 位數 上有超過0~7之間的數字出現，即8或9， 將強制忽視前面的 0 ，直接將后面的數字當做 十進制 處理。
2、在進行算術計算時，所有八進制和十六進制的數字都會被轉換成十進制

浮點數

包含整數、小數點、小數部分，所有的浮點數都是十進制下的數字

Infinity 無窮

由于計算機計算能力的限制，高于最大計算值的數將以正無窮Infinity顯示，低于最小計算值直接顯示 -Infinity
在js中，用Number.MIN_VALUE 表示最小的數（接近 0 ，但不是負數）
用Number.MAX_VALUE 表示最大的數

NaN

Not a Number，“不是一個數字” 的 數字類型。當數據無法轉為數字時，或無法正常計算時，結果都為 NaN。

String，字符串類型

字符串，由若干個有序或無序的字符組成的串，包括字母、漢字、特殊符號、空格等，并用一對單引號（''）或雙引號（" "）包裹。所有的字符串，都是String類型

1、在js的內存中，字符都是用Unicode號來進行存儲的，因為計算機只認數字，不認字符。
2、字符串的內容一旦創建，值不可改變，若想改，只能用新字符串替換舊字符串。

Boolean，布爾類型

只有兩個值：true、false ， 且必須是小寫字母，不帶引號。

布爾類型主要用來保存 對/錯、 真/假、成立/不成立，在計算機內部存儲中，true為1 ， false為0

undefined類型

undefined本身也是一個數據，表示未定義。變量在只聲明的時候值默認為undefined

null類型

null本身也是一個數據，null值表示一個空對象指針

4、數據類型轉換

javascript是弱類型的編程語言，其特點：
1、聲明變量時，不用考慮變量中將要存儲的數據類型
2、賦值時，動態判斷數據的類型
3、運算時，js會根據自己的需要，動態轉換數據類型

將數據轉換為 String類型

toString()

能夠將其他數據類型轉為String類型，其中null類型 和 undefined類型無法使用此方法var str = x.toString()

String()

可以將任意數據類型轉為String類型，包括undefined 和 null，var str = String(x)

使用 + 號拼接字符串的方式，如 var str = x + ""

+ 號的特殊性

當 + 兩邊有一個是字符串類型的數據時，計算機會將另一個數據轉換為字符串再進行字符串的拼接操作，最總返回字符串類型的數據。而如果兩邊都是數字，那么就是算術運算。

將數據轉換為 Number類型

Number()

能夠將任何數據類型轉為數字類型，var n = Number(x)

  • 字符串：如果是純數字的字符串（“456”），則轉為對應的數字，空字符串（""）和空白字符（" "）串則轉為0，若是非空非純數字的字符串，則轉為NaN
  • 布爾值： true轉為1，false轉為0
  • undefined： 轉為 NaN
  • null： 轉為 0
parseInt()

用于將字符串轉成整數的方法，var n = parseInt(str)，默認情況下，parseInt()方法會將傳入的數據先隱式轉換為String類型

  • 原理：從頭開始讀取字符串中的每個字符（如果開頭是空字符，會跳過空字符），只讀取數字字符。只要碰到第一個不是數字的字符，就退出，不認識小數點.
  • 作用： 能夠對浮點數進行取整操作； 能夠將以數字開頭的字符串轉為整數數字，如果字符串不是以數字開頭，則轉為NaN
  • Number(x) vs parseInt(str)
    Number() 只認識純數字組成的字符串，且Number可轉布爾值（true、false）
    parseInt() 能轉包含非數字字符的字符串，前提是開頭位置是數字，parseInt()轉不了布爾值
parseFloat()

能夠將以數字開頭的字符串轉為浮點數，用法與parseInt()方法一樣

將數據轉換為 Boolean類型

Boolean()

能夠將任意數據轉為Boolean類型，var bool = Boolean(x)

  • false：""(空字符串，不是空白字符串)、 0、NaN、undefined、null
  • true： 除了以上幾個轉為false值以外，其他的數據都將轉為true

toString() 和 parseInt()的其他用法——進制轉換

  • 十進制 轉 n進制： x.toString(n)

    var x = 5;  //十進制數
console.log(x.toString(2));    // "101"

    注意，值仍然是String類型

  • 其他 n進制 轉為 十進制： parseInt(str, n)

    parseInt('101a', 2);      //   101 --> 5
parseInt('1012a', 2);      // 101 --> 5
parseInt('2101a', 2);      // NaN
parseInt('02101a', 2);      //  0  --> 0

    注意，parseInt()的第一個參數必須是以數字開頭的字符串（如果不是字符串，parseInt會默認將其先轉為字符串），且開頭的數字必須符合 第二個參數所指定的n進制 的格式(如果僅部分數字符合，則取符合的那部分數字)，否則將轉為NaN

5、運算符和表達式

程序：人的想法在計算機中的執行步驟
運算符：程序中模擬人的思維運算或判斷的 符號
表達式： 由數據、運算符 和 變量 組成的一個公式
返回值： 表達式最終會返回一個結果，這個結果就是返回值

算術運算符

以數值（字面量或變量）作為其操作數，并返回一個單個數值。

常用的算術運算符

+、 -、 *、 /、 %、++、-- 、**

模運算（取余數）%

%，例如，a / b = c 余 d，則 d = a % b

遞增、遞減運算 ++、--

++、--，一元運算符，也是賦值運算符，只有一個操作數，++ 和 -- 符號可以寫在變量的前面和后面，分為前置和后置，以 ++ 為例：

前置遞增： ++n，自加1，類似于 n += 1 或 n = n + 1，但是可以看出， ++n 更簡潔方便。 在使用變量n時，先自加，后返回值
后置遞增： n++，意義同上，唯一區別在于， 在使用變量n時，先返回原值，后自加

冪運算符 **

**，返回第一個操作數做底數，第二個操作數做指數的乘方。冪運算符是右結合的。a ** b ** c 等同于 a ** (b ** c)。 如： 2 ** 3 ** 2 ---> 結果為 512

ES2016中，禁止使用帶歧義的冪運算表達式，比如，底數前不能緊跟一元運算符（+、 - 、~、!、delete、void、typeof）。-2 ** 2 ，這在js中是會報錯的，因為這會有歧義

正常情況下，一般是兩個數字進行算術運算，例如，給定 y = 5，下表是經過各種算術運算符的結果

運算符 描述 例子 x 運算結果 y 運算結果
+ 加法 x = y + 2 7 5
- 減法 x = y - 2 3 5
* 乘法 x = y * 2 10 5
/ 除法 x = y / 2 2.5 5
% 取模（取余數） x = y % 2 1 5
++ 自增 前置自增 x = ++y 6 6
自增 后置自增 x = y ++ 5 6
-- 自減 前置自減 x = --y 4 4
自減 后置自減 x = y-- 5 4
** 冪 x = y ** 2 25 5
算術運算中存在的特殊情況
有特殊值參與運算（NaN、Infinity）

  1. NaN參與運算：返回值都為NaN

  2. Infinity參與計算，視情況而定。

    console.log(Infinity + 5);     // Infinity
console.log(Infinity - 5);     // Infinity
console.log(Infinity * 5);     // Infinity
console.log(Infinity / 5);     // Infinity
console.log(Infinity % 5);     // NaN

console.log(5 / Infinity);     // 0
console.log(5 % Infinity);     // 5
console.log(Infinity + Infinity);    // Infinity
console.log(Infinity - Infinity);    // NaN
console.log(Infinity * Infinity);    // Infinity
console.log(Infinity / Infinity);    // NaN
console.log(Infinity % Infinity);    // NaN

    總之，運算結果不確定的數，返回NaN

其他類型的數據參與運算

在算術運算中，會隱式調用Number()將數據轉為Number類型，再進行運算
特殊情況，在 + 法中，碰到字符串，都轉為字符串，再進行字符串的拼接

console.log(1 + "2");     // "12"
console.log(1 - "2");     // -1
console.log(1 * "2");     // 2
console.log(1 / "2");     // 0.5
console.log(1 % "2");     // 1
console.log(1 - "");     // 1 - 0  --> 1
console.log(1 - "   ");     // 1 - 0  --> 1
console.log(1 - "12abc");     // 1 - NaN  --> NaN
運算順序

先乘除取余，再加減，有小括號先算小括號

比較運算符

比較運算符（>、 <、 >=、 <=、 ==、!=、 ===、!==），也稱關系運算符，指兩個操作數做比較，比大小，返回值是一個布爾值，true 或 false

== 表示等于,只判斷值大小是否相等，不判斷數據類型
!= 表示不等于，與 == 相反
=== 表示全等，首先數據類型必須相同，其次值相同（不進行隱式轉換）
!== 表示不全等，與 === 相反

比較運算中的特殊情況

正常情況下，是兩個數字進行比較，然而，也存在以下特殊情況

有特殊值參與運算（NaN、Infinity）

  1. NaN參與運算：只有 != 和 !==的情況下，結果返回true，其他都返回 false。
    isNaN(x)：專門判斷一個數據是否為NaN，如果是NaN，則返回true，反之則為false
    通過使用isNaN()，來判斷一個數據是否為數字，或者是否能夠隱式轉換為數字使用

    總之，NaN不等于、不大于、不小于任何值，包括NaN自身

  2. Infinity參與計算，視情況而定。

    console.log(Infinity > 8);     //true
// console.log(Infinity < 8);     //false
console.log(Infinity >= 8);     //true
// console.log(Infinity <= 8);
// console.log(Infinity == 8);
console.log(Infinity != 8);     //true
// console.log(Infinity === 8);
console.log(Infinity !== 8);     //true
// console.log(Infinity > Infinity);
// console.log(Infinity < Infinity);
console.log(Infinity >= Infinity);     //true
console.log(Infinity <= Infinity);     //true
console.log(Infinity == Infinity);     //true
// console.log(Infinity != Infinity);
console.log(Infinity === Infinity);     //true
// console.log(Infinity !== Infinity);

    總之，Infinity === Infinity，Infinity >= x（包括Infinity自身），且 Infinity！= x（除了Infinity自身）

當其他類型的數據參與算術運算

在比較運算中，首先隱式調用Number()將數據轉為Number類型，再進行比較，其中，存在特殊情況：

  • 如果兩個數都是字符串，則會根據每個字符的Unicode號進行比較

  • null參與比較運算時： 雖然 null隱式轉換為0，但是，當null 與 0 進行比較時，相等 判斷 為 false ， !=、>= 和 <= 判斷為 true ，而且，null == undefined

    console.log(null == 0);    //false
console.log(null != 0);    //true
console.log(null >= 0);    //true
console.log(null <= 0);    //true
console.log(null == undefined);   //true
運算順序

從前往后進行比較，前面的結果再與后面的進行比較

比如： 3 > 2 > 1 -----> 結果為 false
根據運算順序，先運算 3 > 2 ，結果為 true（1），之后再運算 true(1) > 1， 結果就為 false

"a" < "b" < "c" -----> 結果為false
根據運算順序，先運算 "a" < "b" ，結果為 true，之后再運算 true < "c"， 兩者進行隱式轉換， true(1) < "c"(NaN)，結果就為 false

邏輯運算符

邏輯運算符（&& 、 ||、 ！），常用于布爾類型值之間進行運算，當操作數都是布爾值時，返回值為 布爾值 （true / false）

  • && ： 且，程序中稱為“邏輯與”
    條件1 && 條件2 ： 必須條件1 和 條件2 都為 true 時，返回結果才為 true，即，都 真 才 真，有 假 就 假

  • ||：或，程序中稱為“邏輯或”
    條件1 || 條件2 ： 只要任意一個條件為true，結果為true，只有所有條件都為false，結果才為false，即，有 真 就 真，都 假 才 假

  • !：非，程序中稱為“邏輯非”
    將條件的true/false結果進行取反顛倒，即，非 真 即 假，非 假 即 真

邏輯運算的特殊情況

在邏輯運算中，隱式調用Boolean()方法，將數據隱式轉換為布爾類型的值，再參與邏輯運算。
當其他的數據類型的值參與邏輯運算時，先隱式轉換為布爾值參與邏輯運算，最終的返回值不一定是布爾值，因為非布爾值參與運算完之后恢復該數據的初始數據類型。

短路邏輯

邏輯運算中，如果前一個條件已經可以得出最終結論，則后續所有條件不再執行！
(邏輯與 a&&b ) 如果a能被轉換為false，那么返回a；否則，返回b。
(邏輯或 a ||b ) 如果a能被轉換為true，那么返回a；否則，返回b。

console.log(null && "123");      // null
console.log(12 && "123");        // "123"
console.log(12 || "123");        // 12
console.log(undefined || null);  // null

在利用短路邏輯的時候，不再返回布爾值，若參與運算的都是數值，返回值則從兩個數值中選擇

  • 利用短路邏輯，實現按條件執行語句
    • 利用 邏輯與 實現條件執行語句
      條件 && 操作語句 ---> 如果條件為true，才執行操作語句，否則，什么也不做
    • 利用 邏輯或 實現 默認值效果（二選一取值） 值1 || 值2
運算順序

同種邏輯運算符，從前往后運算
多種邏輯運算符：！、 && 、 ||

位運算(部分，了解)

直接由二進制進行的運算，將數值的二進制左移或右移 n 位
左移 n 位：則將數據 * 2 的n次方，如： 1<< 3 ,即 1 左移 3位，值為8,，m << n，m乘以2的n次方
右移n位： 則將數據 / 2 的n次方，如： 8 >> 3,即 8 右移3位，值為1，m >> n，m除以2的n次方
固定套路： 取整數， n>>>0， n^0， n|0

賦值運算符

常用的賦值運算符

=、+=、-=、*=、/=、%=、**=

=：基本賦值運算，將等號右邊的值保存在左邊的變量中。

+=、-=、*=、/=、%=、**=：擴展賦值運算符，對變量內部的值進行修改的簡寫方法，如：a+=5; ---> a=a+5;

運算符優先級 （從高到底）

  1. () 優先級最高
  2. 一元運算符 ++ -- !
  3. 算術運算符 先 **(冪) * / % 后 + -
  4. 關系運算符 > >= < <=
  5. 相等運算符 == != === !=
  6. 邏輯運算符 先&& 后||
  7. 賦值運算符

6、條件分支語句

根據不同的條件，執行不同的代碼

if 語句

if (條件表達式){
  //結構體1
}else{
  //結構體2
}

如果條件表達式為 true ， 執行 結構體1， 否則執行結構體2

if 語句可以實現選擇的功能，兩個分支可以選擇一個執行，不會全都執行，其中，如果只需實現一個結構體，可以將else分支省略。

  • 可以實現多分支的if語句，形如：

    if (條件1) {
  //滿足條件1， 執行的結構體
} else if (條件2) {
  //不滿足條件1， 滿足條件2， 執行的結構體
} else if (條件3) {
  //不滿足條件1 / 2， 滿足條件3， 執行的結構體
} else {
 //不滿足前面所有條件， 執行的結構體
}

  • if 語句的嵌套
    if語句的結構體中，可以嵌套另外一組if語句

    if (條件1) {
  if (條件2) {
      //滿足條件1， 同時滿足條件2， 執行的結構體
  } else {
     // 滿足條件1， 但不滿足條件2， 執行的結構體
  }
} else {
  //不滿足條件1， 執行的結構體
}

三元表達式

語法： 條件表達式 ? true_value : false_value;

根據條件表達式的結果，選擇執行true_value的語句 或者 false_value的語句

switch語句

switch語句允許一個程序計算一個表達式的值，并根據值匹配到某一個case 標簽，如果匹配成功，則執行相關語句

switch (表達式) {
  case 值1:
    //結構體1;
    break;
  case 值2:
    //結構體2;
    break;
  ...
  default:
    //結構體n;
}

switch：入口，開關，進入第一個匹配到的case中，開始依次向下執行

break: 終止當前結構的繼續執行。一般執行一個case時，結構體中都應該加break；如果相鄰的多個case執行相同的操作時，中間可以不寫break，減少代碼量

當然，最后一個匹配項可以不加break，即default的結構體中可以省略break，甚至有時default可以不寫；

條件分支--總結

if語句： 最常用的語句，所有判斷情況都能夠書寫

三元表達式：多用于給變量賦值時根據條件二選一

switch..case語句： 多用于給一個表達式，去匹配多個固定值可能性的情況，這種情況下，使用switch比if else的效率高，因為不帶隱式類型轉換

7、循環語句

循環三要素：
1、循環條件：保證循環可以繼續執行的判斷條件（不是退出條件）
2、循環變量：循環條件中，用作判斷的變量
3、循環體：循環反復執行的代碼，在循環體中，都需要迭代更新循環變量的值

for 循環

  • 語法： 
    for (定義循環變量; 循環條件; 更新循環變量) {
    //  循環體
}
  • for循環執行過程
    1. 定義循環變量
    2. 判斷循環條件
    3. 若滿足循環條件，則進入循環體，執行循環體中的語句，更新循環變量，本次循環結束。若不滿足循環條件，則直接結束循環。
    4. 重復步驟2、3，直到不滿足循環條件，則結束循環。

while 循環

  • 語法：

    var 循環變量 = 初始值; //聲明并初始化循環變量
while (循環條件) {
  //  循環體
  //  更新循環變量
}

  • while循環執行過程：與for循環類似

do-while循環

  • 語法：

    var 循環變量 = 初始值; //聲明并初始化循環變量
do {
  // 循環體
  // 更新變量
} while (循環條件);

  • do-while循環執行過程與while類似，唯一區別在于，do-while先執行一次循環，再判斷循環條件，是否滿足繼續執行循環

  • do-while vs while
    只需要看開始執行循環前，循環條件是否滿足：
    1、如果 滿足： 則兩者都能夠進入循環體，兩者完全一樣
    2、如果 不滿足： do-while至少可以執行一次循環體，而while一次都無法執行

循環語句--總結

  • 遇到必須先執行一次循環體的循環，使用 do-while 循環
  • 而 for循環 和 while 循環中：
    1、如果循環變量在更新迭代時，有規律性，則選擇for循環
    2、如果循環變量的變化沒有規律時，則選擇while循環，同時可以配合使用break來強行終止循環

break、continue語句

break語句

能夠立即終止當前的循環結構，跳出循環體

break語句只能終止當前所在的那層循環，如果嵌套多層循環，外層循環是無法終止的
如果想停止外層循環，則需要在外層添加一個自定義label標簽，在內層循環的break關鍵字后面 空格 加自定義的label標簽名

breakLoop: for (定義循環變量; 循環條件; 更新循環變量) {
  for (定義循環變量; 循環條件; 更新循環變量) {
      // 循環體
      if (條件) {
        // 結構體
        break breakLoop;
      }
  }
}
continue語句

立即結束當前次循環，進入下一次循環

continue默認也只能進入自身循環結構的下一次循環，不能結束外層循環的這一次循環而進入下一次

要實現外層循環的方式，與 break 一樣，在外層添加自定義label標簽

break語句 和 continue語句，都是為了優化性能，減少計算機的計算次數

?

?

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、 入門 1、 JS代碼書寫的位置 寫在行內 寫在script標簽中 寫在外部js文件中，在頁面引入 注意點： ...
    寵辱不驚丶歲月靜好閱讀 866評論 0贊 0
  • 01-復習第一天內容 <!DOCTYPE html> Document /* 1.直...
    菜鳥趙小白閱讀 111評論 0贊 1
  • 一、介紹 31.什么是js js是javascript的縮寫。是一門專門用來處理網頁中的行為的腳本語言，也是web...
    龍神海王閱讀 446評論 0贊 0
  • JavaScript簡介 JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編...
    Joel_zh閱讀 214評論 0贊 0
  • javascript語法 一、聊聊學習想法 本文章來自拉勾教育大前端，終于進入javascript模塊了，也是前端...
    安掌門dear閱讀 342評論 0贊 0