首頁  >  文章  >  web前端  >  JavaScript極簡入門教學(一):基礎篇_javascript技巧

JavaScript極簡入門教學(一):基礎篇_javascript技巧

WBOY
WBOY原創
2016-05-16 16:32:571153瀏覽

閱讀本文需有其他語言的程式設計經驗。

開始學習前

大多數的程式語言都存在好的部分和差的部分。本文只講述 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     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'
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn