基礎入門

1、基本語法（注意：js嚴格區分大小寫）

• 定義變量（字符串盡量使用單引號）
• 賦值
• 判斷語句
• 循環語句
• 注釋（//，/**/）

2、數據類型及變量

• Number
  JavaScript不區分整數和浮點數，統一用Number表示，以下都是合法的Number類型：

123; // 整數123
0.456; // 浮點數0.456
1.2345e3; // 科學計數法表示1.2345x1000，等同于1234.5
-99; // 負數
NaN; // NaN表示Not a Number，當無法計算結果時用NaN表示
Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示為Infinity

• 字符串
• 布爾值
  布爾值和布爾代數的表示完全一致，一個布爾值只有true、false兩種值，要么是true，要么是false，可以直接用true、false表示布爾值，也可以通過布爾運算計算出來。
  實際上，JavaScript允許對任意數據類型做比較：

false == 0; // true
false === 0; // false

要特別注意相等運算符==。JavaScript在設計時，有兩種比較運算符：
第一種是==比較，它會自動轉換數據類型再比較，很多時候，會得到非常詭異的結果；
第二種是===比較，它不會自動轉換數據類型，如果數據類型不一致，返回false，如果一致，再比較。
由于JavaScript這個設計缺陷，不要使用==比較，始終堅持使用===比較。
另一個例外是NaN這個特殊的Number與所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判斷NaN的方法是通過isNaN()函數：

isNaN(NaN); // true

最后要注意浮點數的相等比較：

1 / 3 === (1 - 2 / 3); // false

• null和undefined
  null表示一個“空”的值，它和0以及空字符串''不同，0是一個數值，''表示長度為0的字符串，而null表示“空”。
  在其他語言中，也有類似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，還有一個和null類似的undefined，它表示“未定義”。
  JavaScript的設計者希望用null表示一個空的值，而undefined表示值未定義。事實證明，這并沒有什么卵用，區分兩者的意義不大。大多數情況下，我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。

• 數組
  數組是一組按順序排列的集合，集合的每個值稱為元素。JavaScript的數組可以包括任意數據類型。例如：

[1, 2, 3.14, 'Hello', null, true];

另一種創建數組的方法是通過Array()函數實現：

new Array(1, 2, 3); // 創建了數組[1, 2, 3]

然而，出于代碼的可讀性考慮，強烈建議直接使用[]。

• 對象
  JavaScript的對象是一組由鍵-值組成的無序集合，例如：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

JavaScript對象的鍵都是字符串類型，值可以是任意數據類型。上述person對象一共定義了6個鍵值對，其中每個鍵又稱為對象的屬性。
要獲取一個對象的屬性，我們用對象變量.屬性名的方式：

person.name; // 'Bob'
person.zipcode; // null

• strict模式
  如果一個變量沒有通過var申明就被使用，那么該變量就自動被申明為全局變量：

i = 10; // i現在是全局變量

在同一個頁面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了變量i，將造成變量i互相影響，產生難以調試的錯誤結果。
使用var申明的變量則不是全局變量，它的范圍被限制在該變量被申明的函數體內，同名變量在不同的函數體內互不沖突。
為了修補JavaScript這一嚴重設計缺陷，ECMA在后續規范中推出了strict模式，在strict模式下運行的JavaScript代碼，強制通過var申明變量，未使用var申明變量就使用的，將導致運行錯誤。
啟用strict模式的方法是在JavaScript代碼的第一行寫上：

'use strict';

這是一個字符串，不支持strict模式的瀏覽器會把它當做一個字符串語句執行，支持strict模式的瀏覽器將開啟strict模式運行JavaScript。

'use strict';
// 如果瀏覽器支持strict模式，
// 下面的代碼將報ReferenceError錯誤:
abc = 'Hello, world';
alert(abc);

3、字符串
如果字符串內部既包含'又包含"需要用轉義字符\來標識

'I\'m \"OK\"!';

轉義字符\可以轉義很多字符，比如\n表示換行，\t表示制表符，字符\本身也要轉義，所以\表示的字符就是\。
ASCII字符可以以\x##形式的十六進制表示，例如：

'\x41'; // 完全等同于 'A'

還可以用\u####表示一個Unicode字符：

'\u4e2d\u6587'; // 完全等同于 '中文'

• 多行字符串
  由于多行字符串用\n寫起來比較費事，所以最新的ES6標準新增了一種多行字符串的表示方法，用反引號 ` ... ` 表示：

`這是一個
多行
字符串`;

• 模板字符串
  要把多個字符串連接起來，可以用+號連接：

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '歲了!';
alert(message);

如果有很多變量需要連接，用+號就比較麻煩。ES6新增了一種模板字符串，表示方法和上面的多行字符串一樣，但是它會自動替換字符串中的變量(${...}，字符串表示是用``)：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
alert(message);

• 操作字符串
  字符串常見的操作如下：

var s = 'Hello, world!';
s.length; // 13

要獲取字符串某個指定位置的字符，使用類似Array的下標操作，索引號從0開始：

var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范圍的索引不會報錯，但一律返回undefined

需要特別注意的是，字符串是不可變的，如果對字符串的某個索引賦值，不會有任何錯誤，但是，也沒有任何效果：

var s = 'Test';
s[0] = 'X';
alert(s); // s仍然為'Test'

• 常用方法
  • toUpperCase
    toUpperCase()把一個字符串全部變為大寫：

var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'

• toLowerCase
  toLowerCase()把一個字符串全部變為小寫：

var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并賦值給變量lower
lower; // 'hello'

• indexOf
  indexOf()會搜索指定字符串出現的位置：

var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 沒有找到指定的子串，返回-1

• substring
  substring()返回指定索引區間的子串：

var s = 'hello, world'
s.substring(0, 5); // 從索引0開始到5（不包括5），返回'hello'
s.substring(7); // 從索引7開始到結束，返回'world'

4、數組
要取得Array的長度，直接訪問length屬性(非方法）：

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

請注意，直接給Array的length賦一個新的值會導致Array大小的變化：

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr變為[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr變為[1, 2]

Array可以通過索引把對應的元素修改為新的值，因此，對Array的索引進行賦值會直接修改這個Array：

var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr現在變為['A', 99, 'C']

請注意，如果通過索引賦值時，索引超過了范圍，同樣會引起Array大小的變化：

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr變為[1, 2, 3, undefined, undefined, 'x']

• indexOf
  與String類似，Array也可以通過indexOf()來搜索一個指定的元素的位置：

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引為0
arr.indexOf(20); // 元素20的索引為1
arr.indexOf(30); // 元素30沒有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引為2

• slice
  slice()就是對應String的substring()版本，它截取Array的部分元素，然后返回一個新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 從索引0開始，到索引3結束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 從索引3開始到結束: ['D', 'E', 'F', 'G']

注意到slice()的起止參數包括開始索引，不包括結束索引。
如果不給slice()傳遞任何參數，它就會從頭到尾截取所有元素。利用這一點，我們可以很容易地復制一個Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

• push和pop
  push()向Array的末尾添加若干元素，pop()則把Array的最后一個元素刪除掉：

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的長度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 連續pop 3次
arr; // []
arr.pop(); // 空數組繼續pop不會報錯，而是返回undefined
arr; // []

• unshift和shift
  如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的長度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次
arr; // []
arr.shift(); // 空數組繼續shift不會報錯，而是返回undefined
arr; // []

• sort
  sort()可以對當前Array進行排序，它會直接修改當前Array的元素位置，直接調用時，按照默認順序排序：

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

• reverse
  reverse()把整個Array的元素給掉個個，也就是反轉：

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

• splice
  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']

• concat
  concat()方法把當前的Array和另一個Array連接起來，并返回一個新的Array：

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

請注意，concat()方法并沒有修改當前Array，而是返回了一個新的Array。

• join
  join()方法是一個非常實用的方法，它把當前Array的每個元素都用指定的字符串連接起來，然后返回連接后的字符串：

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

• 多維數組
  如果數組的某個元素又是一個Array，則可以形成多維數組，例如：

var arr = [[1, 2, 3], [400, 500, 600], '-'];

5、對象

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};

JavaScript用一個{...}表示一個對象，鍵值對以xxx: xxx形式申明，用,隔開。注意，最后一個鍵值對不需要在末尾加,。
上述對象申明了一個name屬性，值是'小明'，birth屬性，值是1990，以及其他一些屬性。最后，把這個對象賦值給變量xiaoming后，就可以通過變量xiaoming來獲取小明的屬性了：

xiaoming.name; // '小明'
xiaoming.birth; // 1990

訪問屬性是通過.操作符完成的，但這要求屬性名必須是一個有效的變量名。如果屬性名包含特殊字符，就必須用 '' 括起來

var xiaohong = {
    name: '小紅',
    'middle-school': 'No.1 Middle School'
};

訪問這個屬性也無法使用.操作符，必須用['xxx']來訪問：

xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小紅'
xiaohong.name; // '小紅'

由于JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性：

var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個age屬性
xiaoming.age; // 18
delete xiaoming.age; // 刪除age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 刪除name屬性
xiaoming.name; // undefined
delete xiaoming.school; // 刪除一個不存在的school屬性也不會報錯

如果我們要檢測xiaoming是否擁有某一屬性，可以用in操作符：

'name' in xiaoming; // true
'grade' in xiaoming; // false

如果in判斷一個屬性存在，這個屬性不一定是xiaoming的，它可能是xiaoming繼承得到的：

'toString' in xiaoming; // true

因為toString定義在object對象中，而所有對象最終都會在原型鏈上指向object，所以xiaoming也擁有toString屬性。
要判斷一個屬性是否是xiaoming自身擁有的，而不是繼承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

6、循環
for ... in
for循環的一個變體是for ... in循環，它可以把一個對象的所有屬性依次循環出來：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    alert(key); // 'name', 'age', 'city'
}
for (var key in o) {
    console.log(o[key]); 
}

7、Map和Set
avaScript的默認對象表示方式{}可以視為其他語言中的Map或Dictionary的數據結構，即一組鍵值對。

但是JavaScript的對象有個小問題，就是鍵必須是字符串。但實際上Number或者其他數據類型作為鍵也是非常合理的。

為了解決這個問題，最新的ES6規范引入了新的數據類型Map。要測試你的瀏覽器是否支持ES6規范，請執行以下代碼，如果瀏覽器報ReferenceError錯誤，那么你需要換一個支持ES6的瀏覽器：

'use strict';
var m = new Map();
var s = new Set();
alert('你的瀏覽器支持Map和Set！');

• Map(極快的查詢速度)
  用Map實現，只需要一個“名字”-“成績”的對照表，直接根據名字查找成績，無論這個表有多大，查找速度都不會變慢。用JavaScript寫一個Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一個二維數組，或者直接初始化一個空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

• Set
  Set和Map類似，也是一組key的集合，但不存儲value。由于key不能重復，所以，在Set中，沒有重復的key。
  要創建一個Set，需要提供一個Array作為輸入，或者直接創建一個空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重復元素在Set中自動被過濾：

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

通過add(key)方法可以添加元素到Set中，可以重復添加，但不會有效果：

>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}

通過delete(key)方法可以刪除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

8、iterable
遍歷Array可以采用下標循環，遍歷Map和Set就無法使用下標。為了統一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬于iterable類型。

具有iterable類型的集合可以通過新的for ... of循環來遍歷。
用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
    alert(x);
}
for (var x of s) { // 遍歷Set
    alert(x);
}
for (var x of m) { // 遍歷Map
    alert(x[0] + '=' + x[1]);
}

注意
for ... in循環由于歷史遺留問題，它遍歷的實際上是對象的屬性名稱。一個Array數組實際上也是一個對象，它的每個元素的索引被視為一個屬性。

當我們手動給Array對象添加了額外的屬性后，for ... in循環將帶來意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for ... in循環將把name包括在內，但Array的length屬性卻不包括在內。
for ... of循環則完全修復了這些問題，它只循環集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

然而，更好的方式是直接使用iterable內置的forEach方法，它接收一個函數，每次迭代就自動回調該函數。以Array為例：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象本身
    alert(element);
});

Set與Array類似，但Set沒有索引，因此回調函數的前兩個參數都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

Map的回調函數參數依次為value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});