究極無敵快速入門「JavaScript」

注釋:

// 注釋方式和C很像月趟,這是單行注釋

/* 這是多行
   注釋 */

分號:

// 語句可以以分號結束
doStuff();

// 但是分號也可以省略莉测,每當遇到一個新行時嫌拣,分號會自動插入(除了一些特殊情況)柔袁。
doStuff()

// 因為這些特殊情況會導致意外的結果,所以我們在這里保留分號异逐。

數(shù)字捶索、字符串和操作符:

// Javascript 只有一種數(shù)字類型(即 64位 IEEE 754 雙精度浮點 double)。
// double 有 52 位表示尾數(shù)灰瞻,足以精確存儲大到 9?101? 的整數(shù)腥例。
3; // = 3
1.5; // = 1.5

// 所有基本的算數(shù)運算都如你預期燥筷。
1 + 1;     // = 2
0.1 + 0.2; // = 0.30000000000000004
8 - 1;     // = 7
10 * 2;    // = 20
35 / 5;    // = 7

// 包括無法整除的除法。
5 / 2; // = 2.5

// 括號可以決定優(yōu)先級院崇。
(1 + 3) * 2; // = 8

// 有三種非數(shù)字的數(shù)字類型
Infinity;  // 1/0 的結果
-Infinity; // -1/0 的結果
NaN;       // 0/0 的結果

// 也有布爾值肆氓。
true;
false;

// 可以通過單引號或雙引號來構造字符串。
'abc';
"Hello, world";

// 用 底瓣!來取非
!true;  // = false
!false; // = true

// 相等 ===
1 === 1; // = true
2 === 1; // = false

// 不等 !=
1 !== 1; // = false
2 !== 1; // = true

// 更多的比較操作符 
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

// 字符串用 + 連接
"Hello " + "world!"; // = "Hello world!"

// 字符串也可以用 < 谢揪、> 來比較
"a" < "b"; // = true

// 使用“==”比較時會進行類型轉換...
"5" == 5;          // = true
null == undefined; // = true

// 除非你是用 ===
"5" === 5;          // = false
null === undefined; // = false 

// 但會導致奇怪的行為
13 + !0;   // 14
"13" + !0; // '13true'

// 你可以用 charAt 來得到字符串中的字符
"This is a string".charAt(0);  // = 'T'

// 或使用 substring 來獲取更大的部分。
"Hello world".substring(0, 5); // = "Hello"

// length 是一個屬性捐凭,所以不要使用 ().
"Hello".length; // = 5

// 還有兩個特殊的值:null 和 undefined
null;      // 用來表示刻意設置的空值
undefined; // 用來表示還沒有設置的值(盡管 undefined 自身實際是一個值)

// false, null, undefined, NaN, 0 和 "" 都是假的拨扶;其他的都視作邏輯真
// 注意 0 是邏輯假而  "0"是邏輯真,盡管 0 == "0"茁肠。

變量患民、數(shù)組和對象

// 變量需要用 var 關鍵字聲明。Javascript 是動態(tài)類型語言垦梆。
// 所以你無需指定類型匹颤。 賦值需要用 =
var someVar = 5;

// 如果你在聲明時沒有加 var 關鍵字,你也不會得到錯誤
someOtherVar = 10;

// 但是此時這個變量就會在全局作用域被創(chuàng)建托猩,而非你定義的當前作用域

// 沒有被賦值的變量都會被設置為 undefined
var someThirdVar; // = undefined

// 對變量進行數(shù)學運算有一些簡寫法
someVar += 5;  // 等價于 someVar = someVar + 5; someVar 現(xiàn)在是 10 
someVar *= 10; // 現(xiàn)在 someVar 是 100

// 自增和自減也有簡寫
someVar++; // someVar 是 101
someVar--; // 回到 100

// 數(shù)組是任意類型組成的有序列表
var myArray = ["Hello", 45, true];

// 數(shù)組的元素可以用方括號下標來訪問印蓖。
// 數(shù)組的索引從 0 開始。
myArray[1]; // = 45

// 數(shù)組是可變的京腥,并擁有變量 length 赦肃。
myArray.push("World");
myArray.length;    // = 4

// 在指定下標添加修改
myArray[3] = "Hello";

// javascript 中的對象相當于其他語言中的「字典」或「映射」,是 鍵-值 對的無序集合。
var myObj = {key1: "Hello", key2: "World"};

// 鍵是字符串公浪,但如果鍵本身是合法的js標識符他宛,則引號并非是必須的。
// 值可以是任意類型欠气。
var myObj = {myKey: "myValue", "my other key": 4};

// 對象屬性的訪問可以通過下標
myObj["my other key"]; // = 4

// 或者也可以用 . 
// 如果屬性是合法的標識符
myObj.myKey; // = "myValue"

// 對象是可變的厅各;值也可以被更改或增加新的鍵
myObj.myThirdKey = true;

// 如果你想要獲取一個還沒有被定義的值,那么會返回 undefined
myObj.myFourthKey; // = undefined

邏輯與控制結構

// 本節(jié)介紹的語法與Java的語法幾乎完全相同

// if 語句和其他語言中一樣晃琳。
var count = 1;
if (count == 3){
    // count 是 3 時執(zhí)行
} else if (count == 4){
    // count 是 4 時執(zhí)行
} else {
    // 其他情況下執(zhí)行 
}

// while循環(huán)
while (true) {
    // 無限循環(huán)
}

// Do-while 和 While 循環(huán)很像 讯检,但前者會至少執(zhí)行一次
var input;
do {
    input = getInput();
} while (!isValid(input))

// for 循環(huán)和 C琐鲁、Java 中的一樣:
// 初始化;繼續(xù)執(zhí)行的條件; 迭代卫旱。
for (var i = 0; i < 5; i++){
    // 遍歷5次
}

// && 是邏輯與, || 是邏輯或
if (house.size == "big" && house.colour == "blue"){
    house.contains = "bear";
}
if (colour == "red" || colour == "blue"){
    // colour是red或者blue時執(zhí)行
}

// && 和 || 是「短路」語句,它在設定初始化值時特別有用 
var name = otherName || "default";

// switch 語句使用 === 檢查相等性围段。
// 在每一個 case 結束時使用 break 
// 否則其后的 case 語句也將被執(zhí)行顾翼。 
grade = 'B';
switch (grade) {
  case 'A':
    console.log("Great job");
    break;
  case 'B':
    console.log("OK job");
    break;
  case 'C':
    console.log("You can do better");
    break;
  default:
    console.log("Oy vey");
    break;
}

函數(shù)、作用域奈泪、閉包

// JavaScript 函數(shù)由 function 關鍵字定義
function myFunction(thing){
    return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

// 注意被返回的值必須開始于 return 關鍵字的那一行适贸,
// 否則由于自動的分號補齊灸芳,你將返回 undefined 。
// 在使用 Allman 風格的時候要注意.
function myFunction()
{
    return // <- 分號自動插在這里
    {
        thisIsAn: 'object literal'
    }
}
myFunction(); // = undefined

// javascript中函數(shù)是一等對象拜姿,所以函數(shù)也能夠賦給一個變量烙样,
// 并且被作為參數(shù)傳遞 —— 比如一個事件處理函數(shù):
function myFunction(){
    // 這段代碼將在5秒鐘后被調用
}
setTimeout(myFunction, 5000);
// 注意:setTimeout 不是 js 語言的一部分,而是由瀏覽器和 Node.js 提供的蕊肥。

// 函數(shù)對象甚至不需要聲明名稱 —— 你可以直接把一個函數(shù)定義寫到另一個函數(shù)的參數(shù)中
setTimeout(function(){
    // 這段代碼將在5秒鐘后被調用
}, 5000);

// JavaScript 有函數(shù)作用域谒获;函數(shù)有其自己的作用域而其他的代碼塊則沒有。
if (true){
    var i = 5;
}
i; // = 5 - 并非我們在其他語言中所期望得到的undefined

// 這就導致了人們經常使用的“立即執(zhí)行匿名函數(shù)”的模式壁却,
// 這樣可以避免一些臨時變量擴散到全局作用域去批狱。
(function(){
    var temporary = 5;
    // 我們可以訪問修改全局對象("global object")來訪問全局作用域,
    // 在web瀏覽器中是 window 這個對象展东。 
    // 在其他環(huán)境如 Node.js 中這個對象的名字可能會不同赔硫。
    window.permanent = 10;
})();
temporary; // 拋出引用異常 ReferenceError
permanent; // = 10

// javascript 最強大的功能之一就是閉包。
// 如果一個函數(shù)在另一個函數(shù)中定義盐肃,那么這個內部函數(shù)就擁有外部函數(shù)的所有變量的訪問權爪膊,
// 即使在外部函數(shù)結束之后。
function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!";
    // 內部函數(shù)默認是放在局部作用域的砸王,
    // 就像是用 var 聲明的惊完。
    function inner(){
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout 是異步的,所以 sayHelloInFiveSeconds 函數(shù)會立即退出处硬,
    // 而 setTimeout 會在后面調用 inner
    // 然而小槐,由于 inner 是由 sayHelloInFiveSeconds 「閉合包含」的,
    // 所以inner在其最終被調用時仍然能夠訪問 prompt 變量荷辕。
}
sayHelloInFiveSeconds("Adam"); // 會在5秒后彈出 "Hello, Adam!"

對象凿跳、構造函數(shù)與原型

//  對象可以包含方法。
var myObj = {
    myFunc: function(){
        return "Hello world!";
    }
};
myObj.myFunc(); // = "Hello world!"

// 當對象中的函數(shù)被調用時疮方,這個函數(shù)可以通過 this 關鍵字訪問其依附的這個對象控嗜。
myObj = {
    myString: "Hello world!",
    myFunc: function(){
        return this.myString;
    }
};
myObj.myFunc(); // = "Hello world!"

// 但這個函數(shù)訪問的其實是其運行時環(huán)境,而非定義時環(huán)境骡显,即取決于函數(shù)是如何調用的疆栏。
// 所以如果函數(shù)被調用時不在這個對象的上下文中,就不會運行成功了惫谤。
var myFunc = myObj.myFunc;
myFunc(); // = undefined

// 相應的壁顶,一個函數(shù)也可以被指定為一個對象的方法,并且可以通過 this 訪問
// 這個對象的成員溜歪,即使在函數(shù)被定義時并沒有依附在對象上若专。
var myOtherFunc = function(){
    return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"

// 當我們通過 call 或者 apply 調用函數(shù)的時候,也可以為其指定一個執(zhí)行上下文蝴猪。
var anotherFunc = function(s){
    return this.myString + s;
}
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"

//  apply 函數(shù)幾乎完全一樣调衰,只是要求一個 array 來傳遞參數(shù)列表膊爪。
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"

// 當一個函數(shù)接受一系列參數(shù),而你想傳入一個 array 時特別有用嚎莉。
Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6

// 但是 call 和 apply 只是臨時的米酬。如果我們希望函數(shù)附著在對象上,可以使用 bind 趋箩。
var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"

//  bind 也可以用來部分應用一個函數(shù)(柯里化)淮逻。
var product = function(a, b){ return a * b; }
var doubler = product.bind(this, 2);
doubler(8); // = 16

// 當你通過 new 關鍵字調用一個函數(shù)時,就會創(chuàng)建一個對象阁簸,
// 而且可以通過 this 關鍵字訪問該函數(shù)爬早。
// 設計為這樣調用的函數(shù)就叫做構造函數(shù)。
var MyConstructor = function(){
    this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

// 每一個 js 對象都有一個「原型」启妹。當你要訪問一個實際對象中沒有定義的一個屬性時
// 解釋器就回去找這個對象的原型筛严。

// 一些JS實現(xiàn)會讓你通過 __proto__ 屬性訪問一個對象的原型。
// 這雖然對理解原型很有用饶米,但是它并不是標準的一部分桨啃;
// 我們后面會介紹使用原型的標準方式。
var myObj = {
    myString: "Hello world!"
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
};

myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// 函數(shù)也可以工作檬输。
myObj.myFunc() // = "hello world!"

// 當然照瘾,如果你要訪問的成員在原型當中也沒有定義的話,解釋器就會去找原型的原型丧慈,以此類推析命。
myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

// 這其中并沒有對象的拷貝;每個對象實際上是持有原型對象的引用逃默。
// 這意味著當我們改變對象的原型時鹃愤,會影響到其他以這個原型為原型的對象。
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

// 我們知道  __proto__  并非標準規(guī)定完域,實際上也沒有標準辦法來修改一個已存在對象的原型软吐。
// 然而,我們有兩種方式為指定原型創(chuàng)建一個新的對象吟税。

// 第一種方式是 Object.create凹耙,這個方法是在最近才被添加到Js中的,
// 因此并不是所有的JS實現(xiàn)都有這個方法
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

/* 第二種方式可以在任意版本中使用肠仪,不過必須通過構造函數(shù)肖抱。
   構造函數(shù)有一個屬性prototype。但是它不是構造函數(shù)本身的原型藤韵;相反虐沥,
   是通過構造函數(shù)和new關鍵字創(chuàng)建的新對象的原型熊经。*/
MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function(){
        return this.myNumber;
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

// 字符串和數(shù)字等內置類型也有通過構造函數(shù)來創(chuàng)建的包裝類型
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// 但是它們并非嚴格等價
typeof myNumber;          // = 'number'
typeof myNumberObj;       // = 'object'
myNumber === myNumberObj; // = false
if (0){
    // 這段代碼不會執(zhí)行泽艘,因為0代表假
}

// 不過欲险,包裝類型和內置類型共享一個原型,
// 所以你實際可以給內置類型也增加一些功能匹涮,例如對 string :
String.prototype.firstCharacter = function(){
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

// 這個技巧經常用在「代碼填充」中天试,來為老版本的 javascript 子集增加新版本 js 的特性,
// 這樣就可以在老的瀏覽器中使用新功能了然低。

// 比如喜每,我們知道 Object.create 并沒有在所有的版本中都實現(xiàn),
// 但是我們仍然可以通過「代碼填充」來實現(xiàn)兼容:
if (Object.create === undefined){ // 如果存在則不覆蓋
    Object.create = function(proto){
        // 用正確的原型來創(chuàng)建一個臨時構造函數(shù)
        var Constructor = function(){};
        Constructor.prototype = proto;
        // 之后用它來創(chuàng)建一個新的對象
        return new Constructor();
    }
}

點關注的都是真愛

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末雳攘,一起剝皮案震驚了整個濱河市带兜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌吨灭,老刑警劉巖刚照,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異喧兄,居然都是意外死亡无畔,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門吠冤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來浑彰,“玉大人,你說我怎么就攤上這事拯辙」洌” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵涯保,是天一觀的道長饵较。 經常有香客問我,道長遭赂,這世上最難降的妖魔是什么循诉? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮撇他,結果婚禮上茄猫,老公的妹妹穿的比我還像新娘。我一直安慰自己困肩,他們只是感情好划纽,可當我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锌畸,像睡著了一般勇劣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天比默,我揣著相機與錄音幻捏,去河邊找鬼。 笑死命咐,一個胖子當著我的面吹牛篡九,可吹牛的內容都是我干的。 我是一名探鬼主播醋奠,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼榛臼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窜司?” 一聲冷哼從身側響起沛善,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎塞祈,沒想到半個月后路呜,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡织咧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年胀葱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片笙蒙。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡抵屿,死狀恐怖,靈堂內的尸體忽然破棺而出捅位,到底是詐尸還是另有隱情轧葛,我是刑警寧澤,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布艇搀,位于F島的核電站尿扯,受9級特大地震影響,放射性物質發(fā)生泄漏焰雕。R本人自食惡果不足惜衷笋,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望矩屁。 院中可真熱鬧辟宗,春花似錦、人聲如沸吝秕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽烁峭。三九已至容客,卻和暖如春秕铛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缩挑。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工但两, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人调煎。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓镜遣,卻偏偏與公主長得像己肮,于是被迫代替她去往敵國和親士袄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)谎僻,也就是一...
    悟名先生閱讀 4,148評論 0 13
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據類型 5種簡單數(shù)據類型:Unde...
    RickCole閱讀 5,124評論 0 21
  • JavaScript語言精粹 前言 約定:=> 表示參考相關文章或書籍; JS是JavaScript的縮寫娄柳。 本書...
    微笑的AK47閱讀 580評論 0 3
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,182評論 0 3
  • 這世界難免少不了爾虞我詐, 但我請求它們不要明目張膽艘绍, 給我們這些赤拒, 那些溫柔的人, 一個可以入夢的微笑诱鞠,
    4dd7872b91cb閱讀 304評論 0 0