JavaScript極簡入門教程（一）：基礎篇

2019-11-20 13:59:55

字體：大中小

來源：轉載

供稿：網友

閱讀本文需要有其他語言的編程經驗。

開始學習之前

大多數的編程語言都存在好的部分和差的部分。本文只講述 JavaScript 中好的部分，這是因為：

1.僅僅學習好的部分能夠縮短學習時間
2.編寫的代碼更加健壯
3.編寫的代碼更加易讀
4.編寫的代碼更加易于維護

弱類型和強類型

通常來說，越早的修復錯誤，為之付出的代價就越小。強類型語言的編譯器可以在編譯時檢查某些錯誤。而 JavaScript 是一門弱類型語言，其解釋器無法檢查類型錯誤，但實踐表明：

1.強類型能夠避免的錯誤并不是那些關鍵性錯誤
2.弱類型能夠帶來靈活性，也無需背上強類型的包袱

JavaScript 相關標準

ECMA-262 標準定義了語言 ECMAScript。我們所熟知的 JavaScript 和 ActionScript 都是基于 ECMAScript 的。目前主流使用 ECMA-262 第五版，Google 的 V8 引擎就是對此的實現。

Hello JavaScript

JavaScript 是一門腳本語言，需要解釋器解釋執行。你可以在瀏覽器中解釋執行 JavaScript 或者直接使用 node.js，node.js 整合了 Google 的 V8 JavaScript 引擎。由于 node.js 使用非常方便，由此，這里我使用 node.js 來解釋執行 JavaScript。現在看第一個 JavaScript 程序：

復制代碼代碼如下:

// test.js
console.log("Hello JavaScript");

執行此程序：

復制代碼代碼如下:

node test.js

語法

注釋

JavaScript 使用和 C++ 相同的注釋方式，// 用于單行注釋，/* */ 用于多行注釋。

數字類型

JavaScript 僅有一種數字類型，也就是 64 位浮點數。數字類型有兩個特殊的值 NaN 和 Infinity，NaN 的含義為 not a number（不是一個數），使用函數 isNaN 檢查是否為 NaN，值 Infinity 表示無窮大。在 Math 對象中，有一組操作數字的方法，例如：Math.floor 方法用于向下取整。

字符串

字符串 literal 可以被包裹在單引號或者雙引號中，轉義字符使用 /（和其他很多語言沒有什么不同）。JavaScript 中每個字符都是兩個字節，其使用 Unicode 字符集。字符串有一個 length 屬性：

復制代碼代碼如下:

"Hello".length // 值為 5，注意不是 "Hello".length()

字符串是不可以改變的（和 Lua 一樣），除了這里說的 length 屬性，還有一些方法，例如：

復制代碼代碼如下:

'cat'.toUpperCase() === 'CAT'

語句

var 語句用于聲明局部變量，否則變量為全局變量，未初始化的變量的值為 undefined：

復制代碼代碼如下:

function f() {
    var localVar = 123;
    globalVar = 456;
    var i; // i 的值為 undefined
};
 
f();
 
console.log(globalVar); // ok
console.log(localVar); // 錯誤，localVar 沒有被定義

由 {} 包裹的一組語句被叫做語句塊（Block），和其他語言不同的是，JavaScript 中的函數會而塊不會創建新的作用域，例如：

復制代碼代碼如下:

{
    var v = 123;
}
console.log(v); // ok

if 語句

復制代碼代碼如下:

if (expression)
    statement

或者

復制代碼代碼如下:

if (expression)
    statement1
else
    statement2

或者

復制代碼代碼如下:

if (expression1)
    statement1
else if (expression2)
    statement2
else if (expression3)
    statement3
else
    statement4

if 語句通過判斷表達式的值為真或假來決定執行或者跳過某些語句。在 JavaScript 中以下值為假（其他值均為真）：

1.false
2.null
3.undefined
4.空字符串
5.0
6.NaN

if 中的 statement 可以是一個語句，也可以是一個語句塊。

switch 語句

復制代碼代碼如下:

switch (n) {
    case 1: // 如果 n 等于 1
    // 執行代碼塊
    break;
    case 2: // 如果 n 等于 2
    // 執行代碼塊
    break;
    default: // 如果 n 不為 1 也不為 2
    // 執行代碼塊
    break;
}

這里的 break 用于退出循環語句或者 switch 語句。在 JavaScript 中，比較兩個值是否相等有兩個操作符：

1.==（對應 != 操作符），相等，兩個操作數類型不同時，此運算符嘗試操作數類型轉換后再進行比較，例如：

復制代碼代碼如下:

var x = 1;
x == 1; // true
x == "1"; // true

2.===（對應 !== 操作符），完全相等，比較兩個操作數，不進行操作數類型轉換，例如：

復制代碼代碼如下:

var x = 1;
x === 1; // true
x === "1"; // false

需要注意的是 NaN 和任何值都不相等，如果 x 為 NaN，那么 x !== x（僅對 NaN 成立），我們可以這樣實現 isNaN 函數：

復制代碼代碼如下:

function isNaN(n) {
    return n !== n;
}

上面 switch 語句，轉換為 if 語句為：

復制代碼代碼如下:

if (n === 1)
    // ...
else if (n === 2)
    // ...
else
    // ...

while 和 do-while 語句

復制代碼代碼如下:

while (expression)
    statement

如果 expression 為真則重復執行 statement 直到 expression 為假。

復制代碼代碼如下:

do
    statement
while (expression);

類似 while 循環，只是先執行 statement，然后再檢查條件 expression。

for 語句

復制代碼代碼如下:

for (initialize ; test ; increment)
    statement

首先 initialize 被執行一次（常用來初始化循環變量），然后進行 test 條件測試（常用來測試循環變量），如果 test 條件為假則停止循環，否則執行 statement，然后執行 increment（常用來更新循環變量），接著又進行 test 條件測試，如此循環執行下去。使用范例：

復制代碼代碼如下:

for (var i=0; i<5; ++i) {
    console.log(i);
}

for 的另外一種形式被用于枚舉一個對象的所有屬性名：

復制代碼代碼如下:

for (variable in object)
    statement

范例：

復制代碼代碼如下:

var obj = {
    a: 1,
    b: 2,
    c: 3
};
 
for (var name in obj)
    console.log(name);

需要注意的是，我們通過 hasOwnProperty 方法來檢查屬性名是該對象的，還是從原型鏈（prototype chain，prototype 會在下一篇中介紹）中找到的：

復制代碼代碼如下:

for (var in obj) {
    if (obj.hasOwnProperty(var)) {
        // ...
    }
}

return 語句

return 語句用于讓函數返回一個值，如果函數沒有顯式的使用 return，那么返回 undefined：

復制代碼代碼如下:

function f() { }
var v = f(); // v === undefined

?: 條件操作符（JavaScript 中唯一的一個三元操作符）
?: 條件操作符在很多編程語言中都存在，在第一個操作數為真時，操作符返回第二個操作數的值，否則返回第三個操作數的值，使用范例：

復制代碼代碼如下:

function abs() {
    return x > 0 ? x : -x;
}

typeof 操作符

typeof 操作符用于獲取變量的類型，其返回值包括：

1.'number'
2.'string'
3.'boolean'
4.'undefined'
5.'function'
6.'object'

特別的 typeof null 返回的結果是 'object'。關于 typeof 的范例：

復制代碼代碼如下:

var a = typeof 'hello'; // a === 'string'
var b = typeof null; // b === 'object'

+ 操作符

+ 操作符在 JavaScript 中可以用于加法運算，也可以用于字符串連接：

復制代碼代碼如下:

var message = 'hello' + 'world'; // message === 'helloworld'

&& 和 || 運算符

&& 操作符在第一個操作數為假時返回第一個操作數的值，否則返回第二個操作數的值
|| 操作符在第一個操作數為真時返回第一個操作數的值，否則返回第二個操作數的值

復制代碼代碼如下:

var a = 1 && true; // a === true
var b = 1 || false; // b === 1

|| 的一個習慣用法：

復制代碼代碼如下:

name = name || 'unknown'; // 為 name 設定默認值 'unknown'

上一篇：JavaScript極簡入門教程（二）：對象和函數

下一篇：上傳圖片預覽JS腳本 Input file圖片預覽的實現示例

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

榮耀總裁趙明烏鎮演講：榮耀首款5G手機V30下月發布

2019-10-23 09:17:05

搜狐張朝陽：回歸媒體是搜狐重新崛起的關鍵

2019-10-21 09:20:02

華為輪值董事長郭平：虛擬技術創造現實價值

2019-10-21 09:00:12

滴滴英文服務上線兩周年用戶已超200萬

2019-09-26 08:57:12

華為推出全球至快AI訓練集群Atlas900

2019-09-25 08:46:36

馬斯克：特斯拉正組建中國技術團隊

2019-09-25 08:15:43

疑難解答

圖片精選

網友關注