廖雪峰 JavaScript 學習筆記__javascript

JavaScript教程 JavaScript是世界上最流行的指令碼語言，JavaScript是一種運行在瀏覽器中的解釋型的程式設計語言。 在Web世界裡，只有JavaScript能跨平台、跨瀏覽器驅動網頁，與使用者互動。 新興的Node.js把JavaScript引入到了伺服器端，JavaScript已經變成了全能型選手。 JavaScript確實很容易上手，但其精髓卻不為大多數開發人員所熟知。編寫高品質的JavaScript代碼更是難上加難。 JavaScript簡介 由於 網景公司希望能在靜態HTML頁面上添加一些動態效果，於是叫Brendan Eich這哥們在兩周之內設計出了JavaScript語言。你沒看錯，這哥們只用了10天時間。 為什麼起名叫JavaScript。原因是當時Java語言非常紅火，所以網景公司希望借Java的名氣來推廣，但事實上JavaScript除了文法上有點像Java，其他部分基本上沒啥關係。 快速入門 // 以雙斜杠開頭直到行末的是注釋，注釋是給人看的，會被瀏覽器忽略 /* 在這中間的也是注釋，將被瀏覽器忽略 */ 如果你對自己還有更高的要求，可以研究開發人員工具的“源碼(Sources)”，掌握斷點、逐步執行等進階調試技巧。 基本文法 JavaScript的文法和Java語言類似，每個語句以;結束，語句塊用{...}，可以嵌套。
JavaScript每個語句的結尾最好加;確保運行結果與期望一致。 花括弧{…}內語句最好縮排，可以協助整理代碼。 資料類型和變數

電腦能處理的有數值、文本、圖形、音頻、視頻、網頁等各種各樣的資料，不同的資料，需要定義不同的資料類型。

在JavaScript中定義了以下幾種資料類型：
1. Number: JavaScript不區分整數和浮點數，統一用Number表示
2. 字串: 字串是以單引號’或雙引號”括起來的任意文本
3. 布爾值:布爾值只有true、false兩種值.與、或、非 分別用 &&,||,!表示
4. 數組: 數組是一組按順序排列的集合，集合的每個值稱為元素。JavaScript的數組可以包括任意資料類型。[1, 2, 3.14, 'Hello', null, true];,new Array(1, 2, 3);
5. 對象:JavaScript的對象是一組由鍵-值組成的無序集合。對象的鍵都是字串類型，值可以是任意資料類型。每個鍵又稱為對象的屬性。擷取一個對象的屬性，我們用物件變數.屬性名稱的方式 十六進位首碼：0x。例如：0xff00，0xa5b4c3d2 JavaScript允許對任意資料類型做比較 相等運算子：==比較會轉換資料類型後比較，===比較不會轉自動換資料類型，直接比較 NaN這個特殊的Number與所有其他值都不相等，包括它自己 唯一能判斷NaN的方法是通過isNaN()函數 浮點數的相等比較: 因為電腦無法精確表示無限迴圈小數。要比較兩個浮點數是否相等，只能計算它們之差的絕對值，看是否小於某個閾值Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true 數組的元素可以通過索引來訪問。索引的起始值為0 申明一個變數用var語句,變數名也可以用中文，但是，請不要給自己找麻煩。 變數本身類型不固定的語言稱之為動態語言，與之對應的是靜態語言。Java是靜態語言 變數沒有通過var申明就被使用，該變數就自動被申明為全域變數,使用var申明的變數則不是全域變數，它的範圍被限制在該變數被申明的函數體內,為了修補JavaScript這一嚴重設計缺陷，ECMA在後續規範中推出了strict模式.啟用strict模式的方法是在JavaScript代碼的第一行寫上：'use strict'; 字串 逸出字元:'I\'m \"OK\"!';表示I'm "OK"! 十六進位\x41可以表示ASCII字元"A",個Unicode字元可用\u####表示 多行字串：用反引號表示,鍵盤的ESC下方。類似python中'''...''' 模板字串:把多個字串串連起來，可以用+號串連。ES6用${var}自動替換字串中的變數,此時字串引號改為反引號。類似python3中'{}'.fromat(var)

字串操作:s.length,s[0] 字串是不可變的，字串的某個索引賦值無意義 JavaScript字串常用方法，調用方法返回新字串：s='Hello';s.toUpperCase();s.toLowerCase();s.indexOf('w');s.substring(0,5);s.substring(7); 數組

JavaScript數組常用方法：
1. Array的長度:arr.length
2. arr.indexOf(var);
3. arr.slice(0,3);arr.slice(3);arr.slice();
4. arr.push('A', 'B');arr.pop();
5. arr.unshift('A', 'B');arr.shift();
6. arr.sort();
7. arr.reverse();
8. arr.concat([1, 2, 3]);,類似python的lst.extend
9. arr.join('-');
10. splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若干元素，然後再從該位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];// 從索引2開始刪除3個元素,然後再添加兩個元素:arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']// 只刪除,不添加:arr.splice(2, 2); // ['Google', 'Facebook']arr; // ['Microsoft', 'Apple', 'Oracle']// 只添加,不刪除:arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因為沒有刪除任何元素arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

Array的索引可賦值 直接給Array的length賦一個新的值會導致Array大小的變化，不建議直接修改Array的大小 slice()就是對應String的substring()版本 sort()直接修改當前Array的元素位置 concat()方法返回新的Array 如果Array的元素不是字串，將自動轉換為字串後再join。 對象

JavaScript的對象是一種無序的集合資料類型，它由若干索引值對組成。用{…}表示對象,索引值對以xxx: xxx形式申明，用,隔開

JavaScript數組常用方法：
1. 新增age屬性：xiaoming.age = 18;
2. 刪除age屬性: delete xiaoming.age;
3. 判斷屬性存在：'age' in xiaoming;
4. 判斷屬性是否自身擁有：xiaoming.hasOwnProperty('name'); 屬性名稱包含特殊字元，就必須用”括起來,訪問該屬性必須用[‘xxx’]來訪問 訪問不存在的屬性不報錯，而是返回undefined JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性 如果in判斷一個屬性存在，這個屬性不一定是xiaoming的，它可能是xiaoming繼承得到的 條件判斷

JavaScript使用if () { ... } else { ... }來進行條件判斷 語句塊只包含一條語句，那麼可以省略{},建議永遠都要寫上{} JavaScript把null、undefined、0、NaN和Null 字元串”視為false，其他值一概視為true，因此上述代碼條件判斷的結果是true。 迴圈

for迴圈

var x = 0;var i;for (i=1; i<=10000; i++) { // 分號間隔    x = x + i;}x; // 50005000

i=1; i<=10000; i++分別為初始條件、判斷條件、遞增條件 for迴圈最常用的地方是利用索引來遍曆數組 for迴圈的3個條件都是可以省略的，如果沒有退出迴圈的判斷條件，就必須使用break語句退出迴圈，否則就是死迴圈 for迴圈的一個變體是for (var key in o) in迴圈，它可以把一個對象的所有屬性依次迴圈出來 由於Array也是對象，而它的每個元素的索引被視為對象的屬性，因此，for … in迴圈可以直接迴圈出Array的索引

var a = ['A', 'B', 'C'];for (var i in a) {    console.log(i); // '0', '1', '2'    console.log(a[i]); // 'A', 'B', 'C'}

while迴圈

while迴圈只有一個判斷條件，條件滿足，就不斷迴圈，條件不滿足時則退出迴圈。

var x = 0;var n = 99;while (n > 0) {    x = x + n;    n = n - 2;}x; // 2500

do ... while迴圈

var n = 0;do {    n = n + 1;} while (n < 100);n; // 100

do { ... } while()迴圈體至少會執行1次，而for和while迴圈則可能一次都不執行。 Map和Set 資料類型

Map和Set是ES6標準新增的資料類型

Map

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);  // 二維數組初始化 Mapm.get('Michael'); // 95var m = new Map(); // 初始化一個空 Mapm.set('Adam', 67); // 添加新的 key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在 key 'Adam': truem.get('Adam'); // 67m.delete('Adam'); // 刪除 key 'Adam'

Map是一組索引值對的結構，具有極快的尋找速度。 多次對一個key放入value，後面的值會把前面的值衝掉

Set 集合

var s = new Set(); // 初始化一個空 Setvar s2 = new Set([1, 2, 3]); // 數組初始化 Sets.add(4); // 添加元素s.delete(3); // 刪除元素

Set和Map類似，也是一組不重複key的集合，且不儲存value iterable

for ... of迴圈

var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of a) { // 遍曆Array    console.log(x);}for (var x of s) { // 遍曆Set    console.log(x);}for (var x of m) { // 遍曆Map    console.log(x[0] + '=' + x[1]);}

for ... of迴圈和for ... in迴圈有何區別?

答：for ... in遍曆的實際上是對象的屬性名稱,會把新增屬性包括在內。for ... of迴圈，它只迴圈集合本身的元素

iterable內建的forEach方法

var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);a.forEach(function (element, index, array) {    // element: 指向當前元素的值    // index: 指向當前索引    // array: 指向Array對象本身    console.log(element + ', index = ' + index);});

for ... of迴圈是ES6引入的新的文法。具有iterable類型的集合可以通過新的for ... of迴圈來遍曆 一個Array數組實際上也是一個對象，它的每個元素的索引被視為一個屬性 iterable內建的forEach方法接收一個函數，每次迭代就自動回調該函數 Set與Array類似，但Set沒有索引，因此回呼函數的前兩個參數都是元素本身 Map的回呼函數參數依次為value、key和map本身 由於JavaScript的函數調用不要求參數必須一致，可以忽略 函數 函數定義和調用

function myabs(x) {  //第一種定義函數的方式// var abs = function (x) { //第二種定義函數的方式，匿名函數，賦值給了變數myabs    if (typeof x !== 'number') { // 參數檢查        throw 'Not a number';    }    if (x >= 0) {        return x;    } else {        return -x;    }}

函數執行到return時結束，並將結果返回 沒有return語句，函數執行完畢後也會返回結果，只是結果為undefined,類似python返回 None 第二種方式按照完整文法需要在函數體末尾加一個;，表示指派陳述式結束。 JavaScript允許傳入任意個參數而不影響調用 JavaScript關鍵字arguments，只在函數內部起作用，並且永遠指向當前函數的調用者傳入的 所有參數。arguments類似Array但它不是一個Array 利用arguments，即使函數不定義任何參數，還是可以拿到參數的值

rest參數

function foo(a, b, ...rest) {    console.log('a = ' + a);    console.log('b = ' + b);    console.log(rest);}foo(1, 2, 3, 4, 5);// 結果:// a = 1// b = 2// Array [ 3, 4, 5 ]foo(1);

rest參數只能寫在最後，前面用…標識 變數範圍與解構賦值 var申明的變數實際上是有範圍的 函數體內部申明變數的範圍為整個函數體，在函數體外不可引用 JavaScript的函數可以嵌套，內建函式可以訪問外部函數定義的變數，反過來則不行 內建函式定義了與外部函數重名的變數，則內建函式的變數將“屏蔽”外部函數的變數 在函數內部定義變數時，請嚴格遵守“在函數內部首先申明所有變數”這一規則。最常見的做法是用一個var申明函數內部用到的所有變數 不在任何函數內定義的變數就具有 全域範圍（只有一個）。實際上，JavaScript預設有一個全域對象window，全域範圍的變數實際上被綁定到window的一個屬性 全域變數會綁定到window上，為避免造成命名衝突，並且很難被發現。減少衝突的一個方法是把自己的所有變數和函數全部綁定到一個全域變數中

// 唯一的全域變數MYAPP:var MYAPP = {};// 其他變數:MYAPP.name = 'myapp';MYAPP.version = 1.0;// 其他函數:MYAPP.foo = function () {    return 'foo';};

JavaScript的變數範圍實際上是函數內部，for迴圈等語句塊中定義的迴圈變數在函數內部均有效。為瞭解決塊級範圍，ES6引入了新的關鍵字let，用let替代var可以申明一個塊級範圍的變數 var和let申明的是變數 ES6標準引入了新的關鍵字const來定義常量，const與let都具有塊級範圍 解構賦值

從ES6開始，JavaScript引入瞭解構賦值，可以同時對一組變數進行賦值。

var [x, y, z] = ['hello', 'JavaScript', 'ES6'];// x, y, z分別被賦值為數組對應元素:console.log('x = ' + x + ', y = ' + y + ', z = ' + z);// x = hello, y = JavaScript, z = ES6let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];var person = {    name: '小明',    age: 20,    gender: 'male',    passport: 'G-12345678',    school: 'No.4 middle school'};var {name, age, passport} = person;// name, age, passport分別被賦值為對應屬性:console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);var {name, single=true} = person;

使用解構賦值可以減少代碼量 對數組元素進行解構賦值時，多個變數要用[…]括起來 對一個對象進行解構賦值時，同樣可以直接對嵌套的對象屬性進行賦值，只要保證對應的層次是一致的 解構賦值如果對應的屬性不存在，變數將被賦值為undefined 解構賦值還可以使用預設值，這樣就避免了不存在的屬性返回undefined的問題 交換兩個變數[x, y] = [y, x] 如果一個函數接收一個對象作為參數，那麼，可以使用解構直接把對象的屬性綁定到變數中。例如，下面的函數可以快速建立一個Date對象

function buildDate({year, month, day, hour=0, minute=0, second=0}) {    return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);}// 只需要year、month和day這三個屬性buildDate({ year: 2017, month: 1, day: 1 });// Sun Jan 01 2017 00:00:00 GMT+0800 (CST)

方法

綁定到對象上的函數稱為方法

var xiaoming = {    name: '小明',    birth: 1990,    age: function () {        var y = new Date().getFullYear();        return y - this.birth;    }};xiaoming.age; // function xiaoming.age()xiaoming.age(); // 今年調用是25,明年調用就變成26了

在一個方法內部，this是一個特殊變數，它始終指向當前對象，也就是xiaoming這個變數

function getAge() {    var y = new Date().getFullYear();    return y - this.birth;}var xiaoming = {    name: '小明',    birth: 1990,    age: getAge};xiaoming.age(); // 25, 正常結果getAge(); // NaN

以對象的方法形式調用，比如xiaoming.age()，該函數的this指向被調用的對象，也就是xiaoming，這是符合我們預期的。 如果單獨調用函數，比如getAge()，此時，該函數的this指向全域對象，也就是window

// 用apply修複getAge()調用function getAge() {    var y = new Date().getFullYear();    return y - this.birth;}var xiaoming = {    name: '小明',    birth: 1990,    age: getAge};xiaoming.age(); // 25getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數為空白

apply()類似的方法是call()，唯一區別是：apply()把參數打包成Array再傳入；call()把參數按順序傳入。 高階函數

一個函數就可以接收另一個函數作為參數,稱之為高階函數 map/reduce map()方法定義在JavaScript的Array中，我們調用Array的map()方法，傳入我們自己的函數，就得到了一個新的Array作為結果 map()傳入的參數是pow，即函數對象本身,把運算規則抽象 filter sort 閉包 箭頭函數 generator 標準對象 物件導向編程 瀏覽器 jQuery 錯誤處理 underscore Node.js React 期末總結