JavaScript基礎入門

阿新 • • 發佈：2020-12-09

技術標籤：JavaScript javascript js 前端

JavaScript基礎入門

JavaScript定義：

JavaScript（簡稱“JS”）是一種具有函式優先的輕量級，解釋型或即時編譯型的高階程式語言。

JS核心作用:

html 網頁結構
css 網頁樣式
JS 使用者行為的互動，事件監聽網頁視窗的變化

BOM維護的頻率很低

JavaScript的組成

ECMAScript（JS的核心語法）
DOM（文件物件模型）
BOM（瀏覽器物件模型）

ES：ECMA做出的一門語法準則，ES 是一門規範，應用最多的地方就是JS，其他的語言頁是需要遵循這個規範的，JS當中包含ES，ES是JS的核心準則規範，可以說JS包括ES，但不能說ES就是JS。

JavaScript可以做的一些事

車聯網技術、智慧家居、手持裝置、盲人裝置、瀏覽器…

JavaScript的使用方法：

在html標籤中直接插入script標籤來完成js的編寫
- 利用瀏覽器修復結構的特性，可以將script標籤放在任何位置
script標籤的src屬性來引入不同的獨立的js檔案
- HTML 獨立出來結構
- CSS 獨立出來樣式
- JS 互動

通過script標籤引入外部的js檔案時，應該把標籤放在什麼位置？

如果寫的是一些外掛、指令碼、待使用的工具函式，那麼推薦將這個JS檔案放在head標籤的最後。
如果寫的是一些業務邏輯程式碼，那麼建議將JS檔案放在網頁body標籤的最後。

將部分的JS程式碼巢狀在html標籤當中（不推薦）

常用的一些功能：

tools.js 工具類函式
index.js 核心業務函式
jquery.js 類庫
- 先把被依賴的檔案放在head標籤裡面引入，然後在其後引入工具類JS檔案

執行環境：

JS的執行環境（宿主環境）：瀏覽器、Node

需要知道的點

在瀏覽器當中，js可以包括es、dom、bom
在Node當中，js只剩下es

基礎語法：

註釋：

在寫程式碼中註釋是非常重要i的，一堆程式碼如果沒有註釋說明，會讓人一看就頭大，就跟打字沒有標點符號一樣。

//      單行註釋
/**/    多行註釋

識別符號規則：

識別符號的開頭第一個字元不能是數字，可以是字母、下劃線、$

剩下的其他字元可以是數字、字母、下劃線、$
不可以使用關鍵字和保留字
推薦使用小駝峰命名法

變數：

什麼是變數？JS中變數就是臨時儲存資料的容器

為什麼是臨時儲存？指的就是變數的生命週期，如果想要永久儲存那麼就需要用到資料庫。

程式的執行是在電腦記憶體裡面進行的
JS → 瀏覽器 → 1.4G → 記憶體溢位
JS有垃圾回收機制建 → 決定了變數、函式、程式什麼時候被幹掉
容器：變數的特性，用來裝資料的

如何宣告變數？

var 變數名; //宣告一個變數
var 變數名 = 變數值;  //聲明瞭一個變數並且進行了初始化操作
var 變數1 = 值1, 變數2 = 值2, 變數3 = 值3;

JS當中大小寫敏感，名字大小寫並不通用：

var a = 10;
console.log(A); //結果是 A is not defined
//正確的答案如下
var A;
console.log(A); //結果為 undefined

語句結束符

建議在每句程式碼的後面加上語句結束符：; ,平時不加時程式不會報錯，但是遇到寫專案，封裝一些程式碼的時候，壓縮程式碼以後不加; 是會引起程式碼報錯的，而且不加結束符觀看體驗也不好，例如這句話就沒有句號

資料型別

ES3-ES5 之中定義的資料型別：

基礎資料型別
- String（字串）
- Number（數字）
- Boolean（布林值）
- Null（空）
- Undefined（未定義）
引用資料型別
- Array（陣列）
- Function（函式）
- Object（物件）
下面逐一解答

字串String

如何定義一個字串？
- '' "" ES6新增：````
在使用任意的ES6語法的時候，有些老舊瀏覽器會有相容問題，任然不支援ES6，可以通過babel的程式碼轉換成es5。

Number 數值（數字）

科普：在其他的程式語言當中，數字型別一般分為：整數（整數）浮點數（小數）或者整型，浮點型。
JS不把數字分成整形和浮點型，統稱為Number 數值
從本質上來講，在JS中，所有的數值都是小數。
NaN的特殊性：
- 它不是一個數值，但是卻屬於Number型別
- 和誰都不相等，和自己也不相等
- 出現的場景：

var s1 = '123';
consolog(Number(s1)); // 123
//轉換型別失敗
var s2 = 'abc123';
consolog(Number(s2)); // Number NaN

判斷一個值是否是NaN
- isNaN() Number 建構函式的靜態方法，簡化版寫法：isNaN(需要判斷的值)，完整版寫法：Number.isNaN(需要判斷的值)
- isFinite() 判斷一個數值是否是無窮大，如果引數是NaN或者無窮大，返回值就為false，否則就為true

Boolean 布林值

布林值只有兩個值
- true 真
- false 假
科普：
- 在PHP中，true=1 false = 0
- JS當中true就代表true 不是1

Null 空

如果在未來需要使用一個變數儲存物件，那麼在物件初始化的時候就可以賦值為null

var obj = null;

undefined值是由null值派生而來的，因此ECMA-262將它們定義為表面上相等

null == undefined  //true
null === undefined //false
typeof 判斷型別

Undefined 未定義

undefined 就是字面意思，一個沒有定義的屬性。

var a; //undefined

Array 陣列

陣列：儲存一系列的值。
方便儲存，利於查詢。
建立陣列的方法：

var arr = [陣列元素...];
//如果陣列是一個正常的陣列，那麼陣列的length長度的值將等於陣列元素最大的索引值+1
new Array();利用建構函式來建立陣列

稀疏陣列
- 陣列索引值不連續，可以稱之為稀疏陣列。
數值的空位
- 當索引值不連續的時候，會形成陣列的空位。
陣列當中可以儲存任意型別的資料
- 可以將length的值賦值為0，從而實現清空陣列的效果。
陣列是一種特殊形式的物件

var obj = {key:value};對映列表 雜湊 hash表...

刪除陣列元素
- delete 給物件使用的，用來刪除物件當中kv，陣列是一種特殊的物件，所以同樣有效，但是用delete直接刪除陣列元素，會形成陣列的空位和稀疏陣列。
遍歷陣列
- 逐一的處理數組裡面的每個元素
- for
- for in
- for of

函式

建立函式有三種辦法

function 函式名(){}
var 變數 = function(){}
new Function()

函式的引數：
- 形參
- 實參
- - 當實參的當實參的數量超過形參的數量時，那麼多餘的實參可以在Arguments類組物件當中找到。當實參的數量少於形參的數量時，那麼多餘的形參結果就為undefined。
函式的返回值
- return
- - 在js中沒有辦法一次性返回多個值，如果想要在函式當中返回多個值，可以將值儲存到陣列或者物件當中返回。
函式的表示式和普通函式建立的區別
- 呼叫時機
- - 普通的建立函式的方式因為函式提升的影響，所以說可以在當前作用域的任何位置去呼叫這個函式。
  - 通過函式表示式建立的函式因為函式提升的時候只是單純的將函式程式碼段提升，但是賦值操作沒有提升，也就導致了變數和函式沒有進行賦值的關聯。所以只能在函式表示式建立函式之後呼叫函式。
作用域：
- 什麼是作用域?
- 程式碼生效範圍，就是作用域。舉個例子，就好比我有中國的身份證，但是把它帶到美國去就用不了…
在es5中，作用域可以分成兩種，區域性作用域全域性作用域
- 函式之外即為全域性作用域，全域性變數。
- 函式之內即為區域性作用域，區域性變數。
閉包函式
回撥函式
匿名函式
自執行函式
遞迴函式
建構函式
生命週期：
- 全域性變數的生命週期：
- - 當前網頁關閉的時候，全域性變數就會被垃圾回收。
- 區域性變數的生命週期：
- - 當函式執行完畢之後，區域性變數就會被回收。