JavaScript 變數

概述

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

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

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

注：變數本身沒有資料型別，只能根據存盤的值來判斷資料型別，

創建一個變數

宣告關鍵字，如：var、let

var

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

let

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

宣告變數的三種方式：

使用關鍵詞 var

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

　　直接賦值(不推薦)

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

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

　　前兩者有一些區別，使用 var 的有提升，后者沒有提升，至于提升，后面會說到，

　　使用關鍵詞 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 回圈中，在每次回圈時對多個變數進行更新

運算子優先級

用于確定一個運算式的計算順序，在你不能確定優先級時，可以通過使用括號顯式宣告運算子的優先級，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177008.html

標籤：JavaScript

上一篇：vue-品牌管理案例

下一篇：記一次大廠的面試程序

JavaScript 語法和資料型別

JavaScript 變數

概述

創建一個變數

宣告變數的底層原理

變數的命名規則

變數的存盤

變數提升

關鍵字的介紹

Java Script 資料型別

資料型別

資料型別轉換

自動型別轉換

強制型別轉換

JavaScript 運算子

算術運算子

賦值運算子

自增和自減

比較運算子

邏輯運算子

條件運算子

逗號運算子

運算子優先級

JavaScript 運算子　