JavaScript—基礎Day1

一、JavaScript介紹

1. 輸入和輸出語法

1.1 輸出語法：

• alert() 函數來彈出提示框；

  • alert() 中只能輸出文本內容，但不能理解為innerText
  • 全稱： **window.**alert() ，屬于BOM

• confirm() 函數來彈出一個對話框；

  • 如果點擊“確定”按鈕，那么 confirm() 函數會返回布爾值 true；如果點擊“取消”按鈕，那么 confirm() 函數會返回布爾值 false；

  • 全稱： **window.**confirm() ，屬于BOM

  • <script type="text/javascript">var res = window.confirm("這里是要顯示的內容");if(res == true){alert("你點擊了“確定”按鈕");}else{alert("你點擊了“取消”按鈕");} </script>

• document.write() 方法將內容寫入到 HTML 文檔中；

  • 可以向 HTML 文檔中寫入 HTML 或者 JavaScript 代碼

• innerHTML 將內容寫入到 HTML 標簽中；

  • innerHTML 是一個屬性;
  • 通過它可以設置或者獲取指定 HTML 標簽中的內容;

• console.log() 在瀏覽器的控制臺輸出內容;

  • 可以是字符串或者對象類型;
  • 屬于DOM

1.2 輸入語句

• prompt()方法，會彈出一個允許輸入值的對話框，提供了確定和取消兩個按鈕，提供預期輸入值；
• comfirm()方法，彈出一個確認消息對話框，可以獲取true或false值。

2. 字面量

**在計算機科學中，**字面量（literal）是在計算機中描述 事/物;

除去表達式，給變量賦值時，等號右邊都可以認為是字面量。

字面量分為字符串字面量、數組字面量和對象字面量，函數字面量;

let test="hello world!"; "hello world!"就是字符串字面量,test是變量名;

二、變量

1. 變量定義

• 變量是計算機存儲數據的“容器”;

2. 變量本質

• **內存：**計算機中存儲數據的地方，相當于一個空間
• **變量本質：**是程序在內存中申請的一塊用來存放數據的小空間

3. JS變量提升

JavaScript中奇怪的一點是你可以在變量和函數聲明之前使用它們。就好像是變量聲明和函數聲明被**提升**了代碼的頂部一樣。

JavaScript是單線程語言，所以是按順序執行。是一段一段地分析執行，先進行編譯階段然后是執行階段；

在編譯階段階段，代碼真正執行前的幾毫秒，會檢測到所有的變量和函數聲明，所有這些函數和變量聲明都被添加到名為Lexical Environment（詞法環境）的JavaScript數據結構的內存中。所以，使得這些變量和函數能在它們真正被聲明之前使用。

3.1 函數提升

sayHi() // Hi there! function sayHi() {console.log('Hi there!') }

因為函數聲明在編譯階段會被添加到詞法環境中，當JavaScript引擎遇到sayHi()函數時，它會從詞法環境中找到這個函數并執行它。

3.2 var變量提升

console.log(name) // 'undefined' var name = 'John Doe' console.log(name) // John Doe

當JavaScript在編譯階段會找到var關鍵字聲明的變量會添加到詞法環境中，并初始化一個值undefined，在之后執行代碼到賦值語句時，會把值賦值到這個變量。

事實上所有的聲明（function, var, let, const, class）都會被“提升”。但是只有使用var關鍵字聲明的變量才會被初始化undefined值，而let和const聲明的變量則不會被初始化值。

在執行階段，JavaScript引擎在遇到他們賦值時，他們才會被初始化。這意味著在JavaScript引擎在聲明變量之前，無法訪問該變量，無法訪問變量創建和初始化之間的時間跨度。

如果在let和const變量被聲明的地方還找不到值的話，就會被賦值為undefined或者返回一個錯誤(const的情況下)。

4. var，let，const三者的特點和區別

1. var

• 用var聲明的變量既是全局變量也是頂層變量（在瀏覽器環境頂層對象指的是window對象）
• 存在變量提升；
• 一個變量可多次聲明，后面的聲明會覆蓋前面的聲明；
• 在函數中使用var聲明變量的時候，該變量是局部的；而如果在函數內不使用var，該變量是全局的；

2. let

• 不存在變量提升，let聲明變量前，該變量不能使用；
• let命令所在的代碼塊內有效，在塊級作用域內有效；
• let不允許在相同作用域中重復聲明，注意是相同作用域，不同作用域有重復聲明不會報錯；

3. const

• const聲明一個只讀的變量，聲明后，值就不能改變；
• const必須初始化；
• const并不是變量的值不能改動，而是變量指向的內存地址所保存的數據不得改動；

三、數據類型

1. 基本（簡單）數據類型

• 在存儲時變量中存儲的是值本身
• number 數字型 \ string 字符串型 \ boolean 布爾型 \ undefined 未定義型 \ null 空類型

2. 引用（復雜）數據類型

• 在存儲時變量中存儲的是地址（引用），通過 new 關鍵字創建的對象（系統對象、自定義對象）
• 如 Object對象、Array對象、Date對象……；

3. JS堆棧

棧：由操作系統自動分配釋放存放函數的參數值、局部變量的值等；

• 簡單數據類型： 值類型變量的數據直接存放在變量（棧空間）中

堆：存儲復雜數據類型(對象)，由程序員分配釋放，若程序員不釋放，由垃圾回收機制回收；

• 復雜數據類型： 引用類型變量（棧空間）里存放的是地址，真正的對象實例存放在堆空間中

4. undefined與null的區別

• undefined代表未定義類型 出現在只聲明不賦值的變量默認就是undefined
• null代表的就是空 聲明了變量 并且賦值為空 一般作為后期給一個對象準備的初始值

5. JS弱類型語言

JS弱類型是指數據類型可以被忽略，一個變量可以賦不同數據類型的值。javascript是一種弱類型語言，它允許變量類型的隱式轉換，允許強制類型轉換等，如字符串和數值可以自動轉化；

而強類型語言一般不允許這么做。

6. 模板字符串

document.write(`我今年${num}歲了`);

• `` (反引號)
• 內容拼接變量時，用 ${ } 包住變量

7.typeof數據判斷經典案例

let age = 19; let str = '11';console.log(typeof str + age); //string19console.log(typeof age + str); // number11console.log(typeof(age + str)); // stringconsole.log(typeof(age + +str)); // numberconsole.log(age - str); // 8console.log(typeof(age - str)); // numberconsole.log(typeof(str - age)); // number

四、類型轉換

1. 隱式轉換

• +號兩邊只要有一個是字符串，都會把另外一個轉成字符串
• 除了+以外的算術運算符 ，- * / 等都會把數據轉成數字類型
• +號作為正號解析可以轉換成數字型
• 任何數據和字符串相加結果都是字符串

2. 顯式轉換

1. 轉換為數字型

• Number(數據)

  • 如果字符串內容里有非數字，轉換失敗時結果為 NaN

  • 但是！NaN是number類型的數據，代表非數字

• parseInt(數據)

• parseFloat(數據)

2. 轉換為字符型

• String(數據)
• 變量.toString(進制)

總結

以上是生活随笔為你收集整理的JavaScript—基础Day1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。