JavaScript學習總結（一）基礎部分

trigkit4發表於2016-09-16
JavaScript

基本概念

javascript是一門解釋型的語言，瀏覽器充當直譯器。js執行時，在同一個作用域內是先解釋再執行。解釋的時候會編譯function和var這兩個關鍵詞定義的變數，編譯完成後從上往下執行並向變數賦值。

區分大小寫

ECMASCript中的一切（包括變數，函式名和操作符）都區分大小寫。

1. 變數

變數在第一次用到時就設定於記憶體中，便於後來在指令碼中引用。使用變數之前先進行宣告。可以使用 var 關鍵字來進行變數宣告。

var count, amount, level; // 用單個 var 關鍵字宣告的多個宣告。

變數命名

變數名包括全域性變數，區域性變數，類變數，函式引數等等，他們都屬於這一類。

變數命名都以型別字首+有意義的單片語成，用駝峰式命名法增加變數和函式的可讀性。例如：sUserName，nCount。

字首規範：
每個區域性變數都需要有一個型別字首，按照型別可以分為：

s：表示字串。例如：sName，sHtml；
n：表示數字。例如：nPage，nTotal；
b：表示邏輯。例如：bChecked，bHasLogin；
a：表示陣列。例如：aList，aGroup；
r：表示正規表示式。例如：rDomain，rEmail；
f：表示函式。例如：fGetHtml，fInit；
o：表示以上未涉及到的其他物件，例如：oButton，oDate；
g：表示全域性變數，例如：gUserName，gLoginTime；

JScript 是一種區分大小寫的語言。建立合法的變數名稱應遵循如下規則：

注意第一個字元不能是數字。

後面可以跟任意字母或數字以及下劃線，但不能是空格 變數名稱一定不能是 保留字。

javascript是一種弱型別語言，JavaScript 會忽略多餘的空格。您可以向指令碼新增空格，來提高其可讀性。

var是javascript的保留字，表明接下來是變數說明，變數名是使用者自定義的識別符號，變數之間用逗號分開。

如果宣告瞭一個變數但沒有對其賦值，該變數存在，其值為Jscript 值 undefined。

強制型別轉換

在 Jscript 中，可以對不同型別的值執行運算，不必擔心 JScript 直譯器產生異常。相反，JScript 直譯器自動將資料型別之一改變（強制轉換）為另一種資料型別，然後執行運算。例如：

運算                    結果

數值與字串相加    將數值強制轉換為字串。
布林值與字串相加    將布林值強制轉換為字串。
數值與布林值相加    將布林值強制轉換為數值。

要想顯式地將字串轉換為整數，使用 parseInt 方法。要想顯式地將字串轉換為數字，使用 parseFloat 方法。

JavaScript 變數的生存期：當您在函式內宣告瞭一個變數後，就只能在該函式中訪問該變數。當退出該函式後，這個變數會被撤銷。這種變數稱為本地變數。您可以在不同的函式中使用名稱相同的本地變數，這是因為只有宣告過變數的函式能夠識別其中的每個變數。
如果您在函式之外宣告瞭一個變數，則頁面上的所有函式都可以訪問該變數。這些變數的生存期從宣告它們之後開始，在頁面關閉時結束。

js變數思維導圖

2.js的資料型別

jscript 有三種->主要資料型別、兩種->複合資料型別和兩種->特殊資料型別。

主要（基本）資料型別

字串
數值
布林

複合（引用）資料型別

物件
陣列

特殊資料型別

 Null

`Undefined`

字串資料型別：字串資料型別用來表示 JScript 中的文字。在js中，雖然雙引號（”"）和單引號(”)均可表示字串，而且它們幾乎沒有任何區別。但只使用雙引號(“”)來表示字串被認為是最佳的。

一個字串值是排在一起的一串零或零以上的 Unicode 字元（字母、數字和標點符號）。

什麼是Unicode？

Unicode為每個字元都提供了唯一的數值，不管是什麼平臺、什麼程式或什麼語言。開發unicode是為了給處理世界上存在的所有字元提供統一的編碼。

數值資料型別

我們需要明白一點，JScript 內部將所有的數值表示為浮點值，因此，在 Jscript 中整數和浮點值沒有差別。

Boolean資料型別

布林（邏輯）只能有兩個值：true 或 false。

js陣列和物件

詳情看我這篇文章->javascript學習總結— —陣列和物件部分

Null 資料型別：可以通過給一個變數賦 null 值來清除變數的內容。

Jscript中 typeof 運算子將報告 null 值為 Object 型別，而非型別 null。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
 <script type="text/javascript"> 
     alert(typeof null);
  </script>
</head>
<body>
</body>
</html>

null用來表示尚未存在的物件，常用來表示函式企圖返回一個不存在的物件。

Undefined 資料型別：

如下情況將返回 undefined 值：

物件屬性不存在，
宣告瞭變數但從未賦值。

null和undefined的區別

alert(typeof undefined); //output "undefined"  
alert(typeof null); //output "object"  
alert(null == undefined); //output "true"

ECMAScript認為undefined是從null派生出來的，所以把它們定義為相等的。

alert(null === undefined); //output "false"  
alert(typeof null == typeof undefined); //output "false"

null與undefined的型別是不一樣的，所以輸出”false“。而===代表絕對等於，在這裡null === undefined輸出false

另外，這裡介紹一種比較重要的資料型別——引用資料型別

引用資料型別

javascript引用資料型別是儲存在堆記憶體中的物件，JavaScript不允許直接訪問堆記憶體空間中的位置和操作堆記憶體空間，只能通過操作物件在棧記憶體中的引用地址。所以引用型別的資料，在棧記憶體中儲存的實際上是物件在堆記憶體中的引用地址。通過這個引用地址可以快速查詢到儲存在堆記憶體中的物件。

下面我們來演示這個引用資料型別賦值過程

自然，給obj2新增name屬性，實際上是給堆記憶體中的物件新增了name屬性，obj2和obj1在棧記憶體中儲存的只是堆記憶體物件的引用地址，雖然也是拷貝了一份，但指向的物件卻是同一個。故而改變obj2引起了obj1的改變。

基本型別值指的是那些儲存在棧記憶體中的簡單資料段，即這種值完全儲存在記憶體中的一個位置。
而引用型別值則是指那些儲存在堆記憶體中的物件，即變數中儲存的實際上只是一個指標，這個指標指向記憶體中的另一個位置，該位置儲存物件。

簡而言之，堆記憶體存放引用值，棧記憶體存放固定型別值。

在 ECMAScript 中，變數可以存在兩種型別的值，即原始值和引用值。

原始值儲存在棧（stack）中的簡單資料段，也就是說，它們的值直接儲存在變數訪問的位置。引用值儲存在堆（heap）中的物件，也就是說，儲存在變數處的值是一個指標（point），指向儲存物件的記憶體處。

<script type="text/javascript”>
var box = new Object();  //建立一個引用型別
var box = "lee";   //基本型別值是字串
box.age = 23;    //基本型別值新增屬性很怪異，因為只有物件才可以新增屬性。
alert(box.age);  //不是引用型別，無法輸出；
</script>

3.JScript 的運算子

優先順序：指運算子的運算順序，通俗的說就是先計算哪一部分。
結合性：同一優先順序運算子的計算順序，通俗的說就是從哪個方向算起，是左到右還是右到左。

資料型別轉換和基本包裝型別

String() 轉換為字串型別
Number() 轉換為數字型別
Boolean() 轉換為布林型別

parseInt：將字串轉換為整數。從字串的開頭開始解析，在第一個非整數的位置停止解析，並返回前面讀到所有的整數。如果字串不是以整數開頭的，將返回NaN。如：parseInt（“150 hi”）返回的值是：150，parseInt(“hi”)返回的值是：NaN。
parseFloat：將字串轉換為浮點數。 從字串的開頭開始解析，在第一個非整數的位置停止解析，並返回前面讀到所有的整數。如果字串不是以整數開頭的，將返回NaN。如：parseFloat("15.5 hi") 返回的值是：15.5，parseFloat("hi 15.5")返回的值是：NaN。

eval：將字串作為javascript表示式進行計算，並返回執行結果，如果沒有結果則返回undefined。

基本包裝型別

每當讀取一個基本型別值的時候，後臺就會建立一個對應的基本包裝型別的物件，從而能呼叫一些方法來操作這些資料。基本包裝型別包括Boolean、Number和String

var box = 'trigkit4'; //字面量
box.name = 'mike';   //無效屬性
box.age = function () { //無效方法
    return 22;
};

//new運算子寫法
var box = new String('trigkit4');//new 運算子
box.name = 'mike';   //有效屬性
box.age = function () { //有效方法
    return 22;
};

String型別包含了三個屬性和大量的可用內建方法

屬性    描述
length :返回字串的字元長度
Constructor : 返回建立String物件的函式
prototype : 通過新增屬性和方法擴充套件字串定義

4.js流程控制

對於js流程控制語句，這裡只講幾個比較難懂的。其他不贅述。等下附上一張思維導圖。

1.for…in 語句對應於一個物件的每個，或一個陣列的每個元素，執行一個或多個語句。

for (variable in [object | array])
statements

引數：

variable：必選項。一個變數，它可以是 object 的任一屬性或 array 的任一元素。
object, array：可選項。要在其上遍歷的物件或陣列。
statement：可選項。相對於 object 的每個屬性或 array 的每個元素，都要被執行的一個或多個語句。可以是複合語句。

雖然條件控制語句（如if語句）只在執行多條語句的情況下才要求使用程式碼塊（左花括號”{“開頭，右花括號”}”結尾）,但最佳實踐是始終使用程式碼塊。

if(args)
    alert(args);//容易出錯

if(args){
    alert(args);//推薦使用
}


js流程控制語句思維導圖

5.js函式

函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。

Jscript 支援兩種函式：一類是語言內部的函式，另一類是自己建立的。
JavaScript 函式允許沒有引數（但包含引數的小括號不能省略），也可以向函式傳遞引數供函式使用。

更多關於函式的知識請訪問我的另一篇文章：javascript學習大總結（四）function函式部分

物件的組成

方法——函式：過程、動態的
屬性——變數：狀態、靜態的

最後，再附上一張前輩總結的思維導圖：

JavaScript學習系列文章目錄

相關文章