1. 程式人生 > >JavaScript 語法和資料型別

JavaScript 語法和資料型別

JavaScript 變數

    概述

    把一個具體的值存入到變數中。那麼此時這個變數就代表著我們這個具體的值。我們如果想要重新的使用這個值,不再需要重新的計算或者其他操作,直接使用變數就可以得到之前儲存的這個值。

    簡單的說,變數就是一個儲存資料的容器,呼叫變數就是呼叫儲存在這個容器中的值。

    變數之所以叫做變數,是因為變數隨時可以根據我們的需要去改變其中儲存的值

    注:變數本身沒有資料型別,只能根據儲存的值來判斷資料型別。

    建立一個變數

    宣告關鍵字,如:var、let

        var

        宣告一個變數,可選初始化一個值。

        let

        宣告一個塊作用域的區域性變數,可選初始化一個值。

    宣告變數的三種方式:

       使用關鍵詞 var

var a = 42; // 可以用來宣告區域性變數和全域性變數。

  直接賦值(不推薦)

b = 42;// JS 的小 bug,這樣寫會產生一個全域性變數

      這種方式在嚴格模式下會出錯,也沒人會用這種方式宣告變數,不建議使用這種方式。

  使用關鍵詞 let

let c = 12; // 用來宣告塊作用域的區域性變數。

    宣告變數的底層原理

    我們所寫的程式執行在記憶體中,當我們使用關鍵字宣告一個變數的時候,計算機會從記憶體中劃分一個空間,為我們存放不同型別的內容做準備

    變數的命名規則

        1. 由數字、字母、下劃線( _ )、$ 組成。

            不能由數字開頭

     不能包含星號 ( * )

       不能包含加號

     不能包含減號或者連詞線

            字母可以是大寫,也可以是小寫。

        2. 語義化,看其名知其意,字首就可以表示出變數的型別

        3. 不允許使用關鍵字和保留字。

        4. 如果變數名由多個單片語成,要使用駝峰式命名法

            大駝峰:從第一個單詞的首字母開始大寫。

     小駝峰:從第二個單詞的首字母開始大寫。

        注:JS 對大小寫敏感,a 和 A 是不同的。

var a = 1;
var A = 2;
console.log(a); // 1
console.log(A); // 2

    變數也叫做識別符號。

    變數的儲存

    重新儲存資料

    當我們重新的向變數中儲存資料的時候,不需要再加 var

var a = 10;
a = 20;

    上面我們將變數 a 記憶體儲的資料由10變成了20,在重新儲存的過程中,我們並沒有使用 var,那麼上面的程式碼就相當於我們將20的值儲存到之前建立的變數 a 中

    重新宣告變數

    如果在重新儲存資料的過程中,沒有在變數名前面加 var,那麼相當於是更改變數 a 中儲存的值,而如果前面加了 var,則相當於重新的建立了一個變數 a,並且儲存了這個資料。

var a = 10; // 第一次宣告變數 a
var a = 20; // 再一次通過 var 宣告變數 a,並且使用了 var

    雖然最後的結果和上面的列印結果相同,但是變數 a 本質上已經發生了變化 (儲存的地址變了)

    如果採用以下方式,那麼重新建立的變數將會無效:

var x = 1;
var x;

    變數提升

    JS 引擎的工作方式是,先解析程式碼,獲取所有被宣告的變數,然後再一行一行地執行。這造成的結果就是所有的變數的宣告語句,都會被提升到程式碼的頭部。

console.log(a);
var a = 1;

    上面程式碼首先使用 console.log 方法,在控制檯 (console) 顯示變數 a 的值。這時變數 a 還沒有宣告和賦值,所以這是一種錯誤的做法,但是實際上不會報錯。因為存在變數提升,真正執行的是下面的程式碼

var a;
console.log(a);
a = 1;

    最後的結果是顯示 undefined,表示變數 a 已宣告,但還未賦值

    關鍵字的介紹

    關鍵字

    關鍵字用於執行特定操作等。按照規則,關鍵字也是語言保留的,不能用做變數。

        常見的關鍵字

break、do、instanceof、typeof、case、else、new、var、catch、finally、return、void、continue、
for、switch、while、debugger、function、this、with、default、if、throw、delete、in、try

    保留字

    未來可能做為關鍵字的存在

        常見的保留字

abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、
char、final、native、synchronized、class、float、package、throws、const、goto、private、
transient、implements、protected、volatile、double、import、public

    基本上這些關鍵字和保留字都是一些語義強烈的詞語。

Java Script 資料型別

   資料型別

    什麼是資料型別?

    變數用來臨時儲存資料(如果想要永久的儲存資料,需要通過資料庫)。而在任何一門程式語言當中,資料都是分為不同型別的。就如同人類也分為男人和女人一樣。

    基本資料型別

    基本資料型別也叫做 值型別、原始型別;有六種

    String 字元型

    1. 單引號字串的內部,可以使用雙引號。雙引號字串的內部,可以使用單引號

    2. 如果要在單引號字串的內部,使用單引號,就必須在內部的單引號前面加上反斜槓,用來轉義。雙引號字串內部使用雙引號,也是如此。

'Did she say \'Hello\'?'

    3. 如果長字串必須分成多行,可以在每一行的尾部使用反斜槓

var longString = 'Long \
                    long \
                    long \
                    string';
 // Long long long String

    反斜槓後面必須是換行符

    4. 字串預設只能寫在一行內,分成多行將會報錯

    5. 連線運算子(+)可以連線多個單行字串,將長字串拆成多行書寫,輸出的時候也是單行

    6. 轉義字元: 反斜槓(\)在字串內有特殊含義,用來表示一些特殊字元,所以又稱為轉義符,以下有幾種常見的轉義符:

\0 : null (\u0000)
\b :後退鍵 (\u008)
\f :換頁符 (\u000C)
\n :換行符 (\u000A)
\r :回車鍵 (\u000D)
\t :製表符 (\u0009)
\v :垂直製表符 (\u000B)
\' :單引號 (\u0027)
\" : 雙引號 (\u0022)
\\ :反斜槓 (\u005C)

    注:只要被引號包裹起來的就是字元('',"") -> "hello"

    Number 數字型

    JS 的64位浮點數之中,有一個二進位制位是符號位。這意味著,任何一個數都有一個對應的負值,就連0也不例外,幾乎所有場合,正零和負零都會被當作正常的0,但是當0和-0被充當分母的時候,返回的值是不相等的,除以正零得到+Infinity,除以負零得到-Infinity

    NaN

    NaN 是 JS 的特殊值,表示“非數字”(Not a Number),主要出現在將字串解析成數字出錯的場合

    NaN不是獨立的資料型別,而是一個特殊數值,它的資料型別依然屬於Number(NaN本身是數字型別)

        不是一個數字的數值型資料 -> 代表意外或非法轉換的數字

        NaN不等於任何數值,包括它自己,即有NaN參與的計算都不會相等

        檢查一個引數是否是非數字值

       isNaN(x)函式用於檢查其引數是否是非數字值

      如果 x 是特殊的非數字值 NaN(或者能被轉換為這樣的值),返回的值就是 true。如果 x 是其他值,則返回 false

true 不是一個數字
false 是一個數字

      當值是0時,返回的值仍為 true

    Number 中的全域性方法

        parseInt()、parseFloat()、isNaN、isFinite

    parseInt

parseInt()  
/*
將字串轉為整數    
    parseInt('123') // 123

如果字串頭部有空格,空格會被自動去除  
    parseInt('   81') // 81

如果parseInt的引數不是字串,則會先轉為字串再轉換
    parseInt(1.23) // 1
    // 等同於
    parseInt('1.23') // 1

字串轉為整數的時候,是一個個字元依次轉換,如果遇到不能轉為數字的字元,就不再進行下去,返回已經轉好的部分
如果字串的第一個字元不能轉化為數字(後面跟著數字的正負號除外),返回NaN
*/

    parseInt的返回值只有兩種可能,要麼是一個十進位制整數,要麼是NaN

    parseFloat

parseFloat()
/*
parseFloat方法用於將一個字串轉為浮點數
   parseFloat('3.14') // 3.14

如果字串符合科學計數法,則會進行相應的轉換
   parseFloat('314e-2') // 3.14
   parseFloat('0.0314E+2') // 3.14 

如果字串包含不能轉為浮點數的字元,則不再進行往後轉換,返回已經轉好的部分
   parseFloat('3.14more non-digit characters') // 3.14

parseFloat方法會自動過濾字串前導的空格
    parseFloat('\t\v\r12.34\n ') // 12.34

如果引數不是字串,或者字串的第一個字元不能轉化為浮點數,則返回NaN
    parseFloat([]) // NaN
    parseFloat('FF2') // NaN

parseFloat會將空字串轉為NaN
   parseFloat('') // NaN 
*/

  inFinite

isFinite()
/*
返回一個布林值,表示某個值是否為正常的數值
   isFinite(Infinity) // false
   isFinite(NaN) // false
 
除了Infinity、-Infinity、NaN和undefined這幾個值會返回false,isFinite對於其他的數值都會返回true
*/

    注:JS 中的數字型別,只有 Number

    Boolean 布林型

        true、false

        返回 boolean 的運算子

            邏輯運算子、比較運算子

    undefined 未定義

        沒有被賦值的變數的型別就是 undefined

    null 空值

        null 只有一個值,就是它本身

        null 型別為 Object、但是不能叫它空物件(這是 JS 中的一個 bug)

    Symbol 一種例項 (ES6新增)

        一種例項是唯一且不可改變的資料型別

    引用型別

        引用型別也稱之為物件型別、複雜資料型別

        物件 Object、陣列 Array、函式 Function

        Object

            一般是 {},標籤的資料型別都是 Object

        Array

            一組“成員”,一般是 []

        Function

       標誌是,function

    資料型別轉換

     自動型別轉換

       轉換的規則    

            預期什麼型別的值,就呼叫該型別的轉換函式。比如,某個位置預期為字串,就呼叫String函式進行轉換。如果該位置即可以是字串,也可能是數值,那麼預設轉為數值 

            利用算術運算子

console.log(+str);
console.log(str - 0);
console.log(str * 1);
console.log(str / 1);

        注:如果字串無法全都轉為數字,則會變為 NaN

       利用算術運算子的 +,進行字串的拼接

    由於自動轉換具有不確定性,而且不易除錯,建議在預期為布林值、數值、字串的地方,全部使用Boolean、Number和String函式進行顯式轉換

        強制型別轉換

   Number

   規則:

       嚴格轉換,能識別小數點,不能出現非數字,出現就會NaN

       空字串會轉為 0

       自動過濾一個字串前導和字尾的空格

       布林值:true 轉成 1,false 轉成 0

       undefined:轉成 NaN

       Number方法的引數是物件時,將返回NaN,除非是包含單個數值的陣列

   Number方法的引數是物件時,將返回NaN,除非是包含單個數值的陣列,如:

轉換物件:
Number({a: 1}) // NaN Number([1, 2, 3]) // NaN Number([5]) // 5

   Number 示例:

轉換基本資料型別:
// 數值:轉換後還是原來的值 Number(324) // 324 // 字串:如果可以被解析為數值,則轉換為相應的數值 Number('324') // 324 // 字串:如果不可以被解析為數值,返回 NaN Number('324abc') // NaN // 空字串轉為0 Number('') // 0 // 布林值:true 轉成 1,false 轉成 0 Number(true) // 1 Number(false) // 0 // undefined:轉成 NaN Number(undefined) // NaN // null:轉成0 Number(null) // 0

   其他方法:

       parseInt()、parseFolat()、isNaN

   isNaN

isNaN
方法可以用來判斷一個值是否為NaN
    isNaN(NaN) // true
    isNaN(123) // false

isNaN(x)
    如果 x 是特殊的非數字值 NaN(或者能被轉換為這樣的值),返回的值就是 true。如果 x 是其他值,則返回 false
    true  不是一個數字
    isNaN("hello world"); -> true
    false 是一個數字
    isNaN(123); -> false

isNaN只對數值有效,如果傳入其他值,會被先轉成數值
    isNaN('Hello') // true
    // 相當於
    isNaN(Number('Hello')) // true

isNaN為true的值,有可能不是NaN,而是一個字串
比如,傳入字串的時候,字串會被先轉成NaN,所以最後返回true

由於 NaN 的意思是 not a numer ,所以isNaN判斷時,本身是雙重否定,true 也就代表著是 NaN,即不是一個數字

當值是0時,返回的值仍為 true

   String

轉換基本資料型別:
數值:轉為相應的字串。 字串:轉換後還是原來的值。 布林值:true轉為字串"true",false轉為字串"false"。 undefined:轉為字串"undefined"。 null:轉為字串"null"
轉換物件:
String方法的引數如果是物件,返回一個型別字串;如果是陣列,返回該陣列的字串形式

         其他方法:

    toString()

    方式:直接轉換,相當於給數值新增兩個引號

var num1 = 123;
var str1 = num1.toString();
console.log(str1); // 123 -> 字串

var num2 = NaN;
var str2 = num2.toString();
console.log(str2); // NaN -> 字串

    可以接受引數:

toString(8);  toString(16);  toString(32);  ...

    引數時進位制,結果也是以進製表示的數字

     toFixed()

   主要作用是保留小數位,順帶著轉變資料型別

var num = 123.456;
var str = num.toFixed(2);
console.log(str); // 123.46  -> 字串

   保留 n 位小數的時候會自動四捨五入。

   Boolean

   可以將任何型別的值轉為 布林值

   規則:除了以下五個值的轉換結果為 false,其他的值全部為 true

undefined
null
0(包含-0和+0)
NaN
""  ''(空字串

  true 和 false 這兩個布林值不會發生變化  

   所有物件(包括空物件)的轉換結果都是true,甚至連 false 對應的布林物件new Boolean(false)也是true

    注意:"  " 並不是空字串,看不見的縮排和空格也是字元

JavaScript 運算子 

    算術運算子

+    加法運算

-    減法運算

*    乘法運算

/    除法運算

%    取餘運算(求模運算)

**   指數運算子

    加法運算子有字串拼接的作用

   規則:只要 + 兩邊出現一個字元,那麼就會將兩邊的值連在一起,成為字串;只有 + 兩邊都是數字的時候才是加法運算

    下面是一些常見的 + 連線: 

1 1 + null  // 1
2 1 + true  // 2
3 1 + false  // 1
4 1 + NaN  // NaN
5 1 + "hello"  // 1hello
6 1 + undefined  // NaN
7 1 + [3,4,5,6]  // 13,4,5,6
8 + 如果跟 空字串("")一起,那麼會成為0
9 1+ {}  ->  1 + {name:"admin"}  // 1[object Object]->只拿到了標誌,沒拿到值

    賦值運算子

     賦值運算子,是基於右值,給左值賦值。如:

var a = 10;
var b = 11;
console.log(a); // 10
console.log(b); // 11

        把一個值賦給一個變數,為了把一個值賦給多個變數,可以以鏈式使用賦值運算子

       一些常用的賦值運算子:

加賦值 x += y     加法運算,相當於 x = x + y
減賦值 x -= y     減法運算,相當於 x = x - y
乘賦值 x *= y     乘法運算,相當於 x = x * y
除賦值 x /= y     除法運算,相當於 x = x / y
模賦值 x %= y     取餘,相當於 x = x % y

    賦值運算子的隱式資料型別轉換規則,參考算術運算子 (資料型別時會有 型別轉換的問題)。

    自增和自減

    ++

   ++ 等價於 += 1

        前自增

   先運算,後賦值

var a = 1;
++a; // a = 2
console.log(a): // 2

        前自增是先加1,再使用運算元的值

       後自增

       先使用最初值,後運算 

var b = 2;
b++; // b = 2;
console.log(b); // 3

        後自增是先使用運算元的值,再加1

    --

        自減的原理和自增相同,只是自減是減法。前自減和後自減參考自增。

    小練習

var a = 12; 
var sum = a++ + ++a + ++a * 2 + a-- + a--; 
console.log(sum + "" + a);
/*
算 sum 的值
a++        a 是 12
++a        ++13, 之後 a 是14
++a * 2,15 * 2
a--          15 -1
a --         14 - 1
最後得出 a 是 13
sum = 12 + 14 + 15 * 2 + 15 + 14 == 85
輸出結果為 8513
*/

    比較運算子

等於 == 
    如果兩邊運算元相等時返回 true
不等於 != 如果兩邊運算元不相等時返回 true
全等 === 兩邊運算元相等且型別相同時返回 true
不全等 !== 兩邊運算元不相等或型別不同時返回 true
大於 > 左邊的運算元大於右邊的運算元返回 true
大於等於 >= 左邊的運算元大於或等於右邊的運算元返回 true
小於 <
左邊的運算元小於右邊的運算元返回 true
小於等於 <= 左邊的運算元小於或等於右邊的運算元返回 true

    注:

    1. 一個字元和一個數值比較,會把字元轉換成數值,之後再比較

    2. 當比較運算子的兩邊都是字元時,比較規則為字元的逐位比較

        只比較字元中首位數字,後面的不再進行比較

    邏輯運算子

    邏輯運算子常用於布林(邏輯)值之間; 當運算元都是布林值時,返回值也是布林值。 不過實際上 && 和 || 返回的是一個特定的運算元的值,所以當它用於非布林值的時候,返回值就可能是非布林值。

    且 &&

        如果第一個運運算元的布林值為 true,則返回第二個運運算元的值(注意是值,不是布林值);如果第一個運運算元的布林值為 false,則直接返回第一個運運算元的值,且不再對第二個運運算元求值。

        && 的兩邊,只要有其中一個是 false ,就返回 false;只有當兩邊都是 true 時,才返回 true

    或 ||

        如果第一個運運算元的布林值為 true,則返回第一個運運算元的值,且不再對第二個運運算元求值;如果第一個運運算元的布林值為 false,則返回第二個運運算元的值

        || 的兩邊,只要有其中一個是 true,就返回 true

    非 !

        取一個值的反值。主要用於將一個布林值變為相反值。即 true 變為 false,false 變為 true

        不管什麼型別的值,經過取反運算後都會變成布林值

            如果使用取反運算子的值不是一個布林值,那麼取反運算子就會將其變為一個布林值,然後再取反

        下面的六個值使用取反運算子取反後都為 true,其他都為 false

undefined
null
false
0
NaN
空字串('')

        如果對一個值連續做兩次的取反運算,等於將其轉換為對應的布林值。這是一種較為常見的型別轉換的方法,即 快速獲取一個值得布林型別表示 !!值

    邏輯與運算子可以多個連用,這時返回第一個布林值為 false 的表示式的值。如果所有表示式的布林值都為 true,則返回最後一個表示式的值

    條件運算子

    條件運算子也叫做 三元運算子、三目運算子

    條件 ? 值1 : 值2

        如果條件為真,則結果取值1。否則為值2。你能夠在任何允許使用標準運算子的地方使用條件運算子

    逗號運算子

    逗號操作符( , )

    對兩個運算元進行求值並返回最終運算元的值。它常常用在 for 迴圈中,在每次迴圈時對多個變數進行更新

    運算子優先順序

    用於確定一個表示式的計算順序。在你不能確定優先順序時,可以通過使用括號顯式宣告運算子的優先