javascript 高級程序設計(一)

第 3 章 基本概念
3.1 語法
3.1.1 區分大小寫
是 ECMAScript 中的一切(變量、函數名和操作符)都區分大小寫,變量名 test 和變量名 Test 分別表示兩個不同的變量
3.1.2 標識符
所謂標識符,就是指變量、函數、屬性的名字,或者函數的參數。標識符可以是按照下列格式規則
組合起來的一或多個字符:

  • 第一個字符必須是一個字母、下劃線(_)或一個美元符號($);
  • 其他字符可以是字母、下劃線、美元符號或數字
    標識符采用駝峯大小寫格式,也就是第一個字母小寫,剩下的每個單詞的
    首字母大寫

不能把關鍵字、保留字、true、false 和 null 用作標識符

3.1.3 註釋
包括單行註釋和塊級註釋
單行註釋以兩個斜槓開頭 // 單行註釋
塊級註釋以一個斜槓和一個星號(/)開頭,以一個星號和一個斜槓(/)結尾

/*
* 這是一個多行
* (塊級)註釋
*/ 

3.1.4 嚴格模式
在函數內部的上方包含這條編譯指示,也可以指定函數在嚴格模式下執行:

function doSomething(){ “use strict”; //函數體 }

3.1.5 語句
ECMAScript 中的語句以一個分號結尾;如果省略分號,則由解析器確定語句的結尾,如下例所示:
var sum = a + b // 即使沒有分號也是有效的語句——不推薦
var diff = a - b; // 有效的語句——推薦

可以使用 C 風格的語法把多條語句組合到一個代碼塊中,即代碼塊以左花括號({)開頭,以右花
括號(})結尾:

if (test){
 test = false;
 alert(test);
} 

雖然條件控制語句(如 if 語句)只在執行多條語句的情況下才要求使用代碼塊,但最佳實踐是始
終在控制語句中使用代碼塊——即使代碼塊中只有一條語句,例如:

if (test)
 alert(test); // 有效但容易出錯,不要使用
if (test){ // 推薦使用
 alert(test);
}

在控制語句中使用代碼塊可以讓編碼意圖更加清晰,而且也能降低修改代碼時出錯的機率。
3.2 關鍵字和保留字
ECMA-262 描述了一組具有特定用途的關鍵字,這些關鍵字可用於表示控制語句的開始或結束,或者用於執行特定操作等。按照規則,關鍵字也是語言保留的,不能用作標識符。以下就是 ECMAScript的全部關鍵字(帶*號上標的是第 5 版新增的關鍵字):
在這裏插入圖片描述
ECMA-262 還描述了另外一組不能用作標識符的保留字。儘管保留字在這門語言中還沒有任何特定的用途,但它們有可能在將來被用作關鍵字。以下是 ECMA-262 第 3 版定義的全部保留字:
在這裏插入圖片描述
第 5 版把在非嚴格模式下運行時的保留字縮減爲下列這些:
在這裏插入圖片描述
在嚴格模式下,第 5 版還對以下保留字施加了限制:
在這裏插入圖片描述

注意,let 和 yield 是第 5 版新增的保留字;其他保留字都是第 3 版定義的。爲了最大程度地保證兼容性,建議讀者將第 3版定義的保留字外加 let 和 yield 作爲編程時的參考。
3.3 變量
定義變量時要使用 var 操作符(注意 var 是一個關鍵字),後跟變量名(即一個標識符),如下所示:

var message;
在定義變量的同時就可以設置變量的值,如下所示:
var message = "hi"; 

如果在函數中使用 var 定義一個變量,那麼這個變量在函數退出後就會被銷燬,例如:


    function test(){
 var message = "hi"; // 局部變量
}
test();
alert(message); // 錯誤!

省略 var 操作符,從而創建一個全局變量:

function test(){
 message = "hi"; // 全局變量
}
test();
alert(message); // "hi" 

雖然省略 var 操作符可以定義全局變量,但這也不是我們推薦的做法。因爲在局
部作用域中定義的全局變量很難維護,而且如果有意地忽略了 var 操作符,也會由於
相應變量不會馬上就有定義而導致不必要的混亂。給未經聲明的變量賦值在嚴格模式
下會導致拋出 ReferenceError 錯誤。

3.4 數據類型
ECMAScript 中有 5 種簡單數據類型(也稱爲基本數據類型):
Undefined、Null、Boolean、Number和 String
還有 1種複雜數據類型——Object,Object 本質上是由一組無序的名值對組成的。
3.4.1 typeof操作符

  • “undefined”——如果這個值未定義;
  • “boolean”——如果這個值是布爾值;
  • “string”——如果這個值是字符串;
  • “number”——如果這個值是數值;
  • “object”——如果這個值是對象或 null;
  • “function”——如果這個值是函數。

下面是幾個使用 typeof 操作符的例子:

var message = "some string";
alert(typeof message); // "string"
alert(typeof(message)); // "string"
alert(typeof 95); // "number" 

3.4.2 Undefined類型
Undefined 類型只有一個值,即特殊的 undefined。在使用 var 聲明變量但未對其加以初始化時,這個變量的值就是 undefined,例如:

var message;
alert(message == undefined); //true 

這個例子只聲明瞭變量 message,但未對其進行初始化。比較這個變量與 undefined 字面量,結果表明它們是相等的。這個例子與下面的例子是等價的:

var message = undefined;
alert(message == undefined); //true 

對未初始化的變量執行 typeof 操作符會返回 undefined 值,而對未聲明的變量執行 typeof 操作符同樣也會返回 undefined 值。
在這裏插入圖片描述

即便未初始化的變量會自動被賦予 undefined 值,但顯式地初始化變量依然是
明智的選擇。如果能夠做到這一點,那麼當 typeof 操作符返回"undefined"值時,
我們就知道被檢測的變量還沒有被聲明,而不是尚未初始化。

3.4.3 Null類型
Null 類型是第二個只有一個值的數據類型,這個特殊的值是 null。從邏輯角度來看,null 值表示一個空對象指針,而這也正是使用 typeof 操作符檢測 null 值時會返回"object"的原因,如下面的例子所示:

var car = null;
alert(typeof car); // "object" 

如果定義的變量準備在將來用於保存對象,那麼最好將該變量初始化爲 null 這樣,只要直接檢查 null 值就可以知道相應的變量是否已經保存了一個對象的引用,如下面的例子所示:
在這裏插入圖片描述

只要意在保存對象的變量還沒有真正保存對象,就應該明確地讓該變量保存 null 值。這樣做不僅可以體現 null作爲空對象指針的慣例,而且也有助於進一步區分 nullundefined
3.4.4 Boolean類型
Boolean 有兩個字面值:truefalse
因此 true 不一定等於 1,而 false 也不一定等於 0。以下是爲變量賦Boolean 類型值的例子:

var found = true;
var lost = false; 

注意:Boolean 類型的字面值 true 和 false 是區分大小寫的。
True 和 False(以及其他的混合大小寫形式)都不是 Boolean 值,只是標識符。

要將一個值轉換爲其對應的 Boolean 值,可以調用轉型函數 Boolean()
在這裏插入圖片描述
字符串 message 被轉換成了一個 Boolean 值,該值被保存在 messageAsBoolean
變量中。可以對任何數據類型的值調用 Boolean()函數,而且總會返回一個 Boolean 值。至於返回的這個值是 true 還是 false,取決於要轉換值的數據類型及其實際值。下表給出了各種數據類型及其對應的轉換規則。
在這裏插入圖片描述
這些轉換規則對理解流控制語句(如 if 語句)自動執行相應的 Boolean 轉換非常重要,請看下面的代碼:
在這裏插入圖片描述
運行這個示例,就會顯示一個警告框,因爲字符串 message 被自動轉換成了對應的 Boolean 值(true)。由於存在這種自動執行的 Boolean 轉換,因此確切地知道在流控制語句中使用的是什麼變量至關重要。錯誤地使用一個對象而不是一個 Boolean 值,就有可能徹底改變應用程序的流程。

3.4.5 Number類型
Number:使用 IEEE754 格式來表示整數和浮點數值(浮點數值在某些語言中也被稱爲雙精度數值)。
最基本的數值字面量格式是十進制整數,十進制整數可以像下面這樣直接在代碼中輸入:

var intNum = 55; // 整數

除了以十進制表示外,整數還可以通過八進制(以 8 爲基數)或十六進制(以 16 爲基數)的字面值來表示。其中,八進制字面值的第一位必須是零(0),然後是八進制數字序列(0~7)。如果字面值中的數值超出了範圍,那麼前導零將被忽略,後面的數值將被當作十進制數值解析。

var octalNum1 = 070; // 八進制的 56
var octalNum2 = 079; // 無效的八進制數值——解析爲 79
var octalNum3 = 08; // 無效的八進制數值——解析爲 8

十六進制字面值的前兩位必須是 0x,後跟任何十六進制數字(0~9 及 A~F)。其中,字母 A~F可以大寫,也可以小寫。如下面的例子所示:

var hexNum1 = 0xA; // 十六進制的 10
var hexNum2 = 0x1f; // 十六進制的 31
  1. 浮點數值:小數點後面必須至少有一位數字
var floatNum1 = 1.1;
var floatNum2 = 0.1;
var floatNum3 = .1; // 有效,但不推薦

浮點數值本身表示的就是一個整數(如 1.0),那麼該值也會被轉換爲整數

var floatNum1 = 1.; // 小數點後面沒有數字——解析爲 1
var floatNum2 = 10.0; // 整數——解析爲 10

使用 e 表示法表示的變量 floatNum 的形式雖然簡潔,但它的實際值則是 31250000。在此,e 表示法的實際含義就是“3.125 乘以 10s”。

var floatNum = 3.125e7; // 等於 31250000 
  1. 數值範圍
  2. NaN
    NaN,即非數值(Not a Number)是一個特殊的數值
    NaN 與任何值都不相等,包括 NaN 本身。例如,下面的代碼會返回 false:
alert(NaN == NaN); //false 

ECMAScript 定義了 isNaN()函數。這個函數接受一個參數,該參數可以是任何類型,而函數會幫我們確定這個參數是否“不是數值”

alert(isNaN(NaN)); //true
alert(isNaN(10)); //false(10 是一個數值)
alert(isNaN("10")); //false(可以被轉換成數值 10)
alert(isNaN("blue")); //true(不能轉換成數值)
alert(isNaN(true)); //false(可以被轉換成數值 1)

這個例子測試了 5 個不同的值。測試的第一個值是 NaN 本身,結果當然會返回 true。然後分別測試了數值 10 和字符串"10",結果這兩個測試都返回了 false,因爲前者本身就是數值,而後者可以被轉換成數值。但是,字符串"blue"不能被轉換成數值,因此函數返回了 true。由於 Boolean 值 true可以轉換成數值 1,因此函數返回 false。

  1. 數值轉換
    有 3 個函數可以把非數值轉換爲數值:Number()parseInt()parseFloat()
    第一個函數,即轉型函數 Number()可以用於任何數據類型,
    另兩個函數則專門用於把字符串轉換成數值。

Number()函數的轉換規則如下。

  • 如果是 Boolean 值,true 和 false 將分別被轉換爲 1 和 0。
  • 如果是數字值,只是簡單的傳入和返回。
  • 如果是 null 值,返回 0。
  • 如果是 undefined,返回 NaN。

各種數據類型轉換爲數值

var num1 = Number("Hello world!"); //NaN
var num2 = Number(""); //0
var num3 = Number("000011"); //11
var num4 = Number(true); //1 

字符串"Hello world!"會被轉換爲 NaN,因爲其中不包含任何有意義的數字值。空字符串會被轉換爲 0。字符串"000011"會被轉換爲 11,因爲忽略了其前導的零。最後,true 值被轉換爲 1。
parseInt()函數的轉換規則,下面給出一些例子:
在這裏插入圖片描述

3.4.6 String類型
String 類型用於表示由零或多個 16 位 Unicode 字符組成的字符序列,即字符串。字符串可以由雙引號(")或單引號(’)表示

var firstName = "Nicholas";
var lastName = 'Zakas'; 

3.4.7 Object類型
以創建自定義對象,如下所示:var o = new Object();
3.5 操作符
ECMA-262 描述了一組用於操作數據值的操作符,包括算術操作符(如加號和減號)、位操作符、關係操作符和相等操作符
3.5.1 一元操作符
只能操作一個值的操作符叫做一元操作符。

  1. 遞增和遞減操作符
    使用前置遞增操作符給一個數
    值加 1 時,要把兩個加號(++)放在這個數值變量前面,如下所示:
var age = 29;
++age; 
與
var age = 29;
age = age + 1; 
相同

執行前置遞減操作的方法也類似,結果會從一個數值中減去 1。使用前置遞減操作符時,要把兩個減號(–)放在相應變量的前面,如下所示:

var age = 29;
--age; 

執行前置遞增和遞減操作時,變量的值都是在語句被求值以前改變的。(在計算機科學領域,這種情況通常被稱作副效應。)請看下面這個例子。

var age = 29;
var anotherAge = --age + 2;
alert(age); // 輸出 28
alert(anotherAge); // 輸出 30 

由於前置遞增和遞減操作與執行語句的優先級相等,因此整個語句會從左至右被求值。再看一個例子:

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2; // 等於 21
var num4 = num1 + num2; // 等於 21 

在這裏插入圖片描述
2. 一元加和減操作符
一元加操作符以一個加號(+)表示,放在數值前面,對數值不會產生任何影響

var num = 25;
num = +num; // 仍然是 25 

下面的例子展示了對不同數據類型應用一元加操作符的結果:

var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
 valueOf: function() {
 return -1;
 }
};
s1 = +s1; // 值變成數值 1
s2 = +s2; // 值變成數值 1.1
s3 = +s3; // 值變成 NaN
b = +b; // 值變成數值 0
f = +f; // 值未變,仍然是 1.1
o = +o; // 值變成數值-1 

例如將 1 轉換成-1。

var num = 25;
num = -num; // 變成了-25 

3.5.2 位操作符
3.5.3 布爾操作符
布爾操作符一共有 3 個:非(NOT)與(AND)和或(OR)

  1. 邏輯非(!)
    邏輯非操作符由一個歎號(!)表示
    在這裏插入圖片描述
  2. 邏輯與(&&)
    邏輯與操作符由兩個和號(&&)表示,有兩個操作數,如下面的例子所示:
var result = true && false; 

在這裏插入圖片描述
3. 邏輯或(||)
邏輯或操作符由兩個豎線符號(||)表示,有兩個操作數,如下面的例子所示:

var result = true || false; 

在這裏插入圖片描述

var found = true;
var result = (found || someUndefinedVariable); // 不會發生錯誤
alert(result); // 會執行("true")

3.5.4 乘性操作符
定義了 3 個乘性操作符:乘法、除法和求模,空字符串將被當作
0,布爾值 true 將被當作 1。

  1. 乘法
    乘法操作符由一個星號(*)表示,用於計算兩個數值的乘積
var result = 34 * 56; 
  1. 除法
    除法操作符由一個斜線符號(/)表示,執行第二個操作數除第一個操作數的計算
var result = 66 / 11; 
  1. 求模
    求模(餘數)操作符由一個百分號(%)表示,用法如下:

    var result = 26 % 5; // 等於 1

3.5.5 加性操作符
加法操作符(+)的用法如下所示:

var result = 1 + 2; 
var result1 = 5 + 5; // 兩個數值相加
alert(result1); // 10 
var result2 = 5 + "5"; // 一個數值和一個字符串相加
alert(result2); // "55" 
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + num1 + num2;
alert(message); // "The sum of 5 and 10 is 510" 
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + (num1 + num2);
alert(message); //"The sum of 5 and 10 is 15" 
  1. 減法
    減法操作符()是另一個極爲常用的操作符,其用法如下所示:

    var result = 2 - 1;

在這裏插入圖片描述
3.5.6 關係操作符
小於(<)、大於(>)、小於等於(<=)和大於等於(>=)這幾個關係操作符用於對兩個值進行比較

var result1 = 5 > 3; //true
var result2 = 5 < 3; //false 

3.5.7 相等操作符
ECMAScript 的解決方案就是提供兩組操作符:相等和不相等——先轉換再比較全等和不全等——僅比較而不轉換

  1. 相等和不相等
    相等操作符由兩個等於號(==)表示
    兩個操作數相等,則返回 true。而不相等操作符由歎號後跟等於號(!=)表示
    在這裏插入圖片描述
  2. 全等和不全等
    全等操作符由 3 個等於號(===)表示
var result1 = ("55" == 55); //true,因爲轉換後相等
var result2 = ("55" === 55); //false,因爲不同的數據類型不相等

不全等操作符由一個歎號後跟兩個等於號(!==)表示

var result1 = ("55" != 55); //false,因爲轉換後相等
var result2 = ("55" !== 55); //true,因爲不同的數據類型不相等

由於相等和不相等操作符存在類型轉換問題,而爲了保持代碼中數據類型的完整
性,我們推薦使用全等和不全等操作符。

3.5.8 條件操作符

variable = boolean_expression ? true_value : false_value; 

求值結果爲 true,給變量 variable 賦 true_value 值;
求值結果爲 false,給變量 variable 賦 false_value 值

var max = (num1 > num2) ? num1 : num2; 

如果 num1 大於 num2(關係表達式返回 true),則將 num1 的值賦給 max,否則反之
3.5.9 賦值操作符
簡單的賦值操作符由等於號(=)表示,其作用就是把右側的值賦給左側的變量

var num = 10; 

在等於號(=)前面再添加乘性操作符、加性操作符或位操作符,就可以完成複合賦值操作

var num = 10;
num = num + 10; 

第二行代碼可以用一個複合賦值來代替

var num = 10;
num += 10; 

每個主要算術操作符(以及個別的其他操作符)都有對應的複合賦值操作符。如下:
在這裏插入圖片描述
3.5.10 逗號操作符
使用逗號操作符可以在一條語句中執行多個操作,如下面的例子所示

var num1=1, num2=2, num3=3; 

逗號操作符總會返回表達式中的最後一項

var num = (5, 1, 4, 8, 0); // num 的值爲 0 

3.6 語句
3.6.1 if語句
大多數編程語言中最爲常用的一個語句就是 if 語句。以下是 if 語句的語法:

if (condition) statement1 else statement2 
if (i > 25)
 alert("Greater than 25."); // 單行語句
else {
 alert("Less than or equal to 25."); // 代碼塊中的語句
} 
    if (condition1) statement1 else if (condition2) statement2 else statement3 
if (i > 25) {
 alert("Greater than 25.");
} else if (i < 0) {
 alert("Less than 0.");
} else {
 alert("Between 0 and 25, inclusive.");
} 

3.6.2 do-while語句
while 語句屬於前測試循環語句,也就是說,在循環體內的代碼被執行之前,就會對出口條件求值。因此,循環體內的代碼有可能永遠不會被執行

while(expression) statement
下面是一個示例:
var i = 0;
while (i < 10) {
 i += 2;
} 

3.6.4 for語句
for 語句也是一種前測試循環語句,但它具有在執行循環之前初始化變量和定義循環後要執行的代碼的能力。

for (initialization; expression; post-loop-expression) statement
下面是一個示例:
var count = 10;
for (var i = 0; i < count; i++){
 alert(i);
} 

3.6.5 for-in語句
for-in 語句是一種精準的迭代語句,可以用來枚舉對象的屬性。以下是 for-in 語句的語法:

for (property in expression) statement
下面是一個示例:
for (var propName in window) {
 document.write(propName);
} 

3.6.6 label語句

使用 label 語句可以在代碼中添加標籤,以便將來使用。以下是 label 語句的語法:
label: statement
下面是一個示例:
start: for (var i=0; i < count; i++) {
 alert(i);
} 

3.7 函數
過函數可以封裝任意多條語句,而且可以在任何地方、任何時候調用執行

function functionName(arg0, arg1,...,argN) {
 statements
}
以下是一個函數示例:
function sayHi(name, message) {
 alert("Hello " + name + "," + message);
} 

任何函數在任何時候都可以通過return 語句後跟要返回的值來實現返回值。請看下面的例子:

function sum(num1, num2) {
 return num1 + num2;
} 

推薦的做法是要麼讓函數始終都返回一個值,要麼永遠都不要返回值。否則,如
果函數有時候返回值,有時候有不返回值,會給調試代碼帶來不便。

嚴格模式對函數有一些限制:
 不能把函數命名爲 eval 或 arguments;
 不能把參數命名爲 eval 或 arguments;
 不能出現兩個命名參數同名的情況。
如果發生以上情況,就會導致語法錯誤,代碼無法執行。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章