《廖雪峯JavaScript-快速入門》筆記

文章內容來源：廖雪峯JavaScript-快速入門

賦值

var x = 1;

註釋

// comment
/* comment */

數據類型

Number

JavaScript不區分整數和浮點數，統一用Number表示。

123;
0.456;
1.2345e3;
NaN;
Infinity;

字符串

字符串是以單引號'或雙引號"括起來的任意文本。

'Hello ';
"World!";

布爾

一個布爾值只有true、false兩種值。

數組

JavaScript的數組能夠包括任意數據類型。

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

對象

JavaScript的對象是一組由 鍵-值組成的無序集合，對象的鍵都是字符串類型，值能夠是任意數據類型。

var mi = {
  name: 'YuMi',
  age: 22
}

要獲取一個對象的屬性，咱們用 對象變量.屬性名的方式：

mi.name;
mi.age;

變量名

變量名是大小寫英文、數字、 $和 _的組合，且不能用數字開頭。

條件判斷

JavaScript使用if () { ... } else { ... }來進行條件判斷。

循環

for

for(var i = 0; i < arr.length; i++) {
  x = arr[i];
  console.log(x);
}

for...in

for循環的一個變體是 for ... in循環，它能夠把一個對象的全部屬性依次循環出來：

var mi = {
  name: 'YuMi',
  age: 22
};
for (var key in mi) {
  console.log(key); // 'name', 'age', ...
}

要過濾掉對象繼承的屬性，用 hasOwnProperty()來實現。

var mi = {
    name: 'YuMi',
    age: 22
};
for (var key in mi) {
  if(mi.hasOwnProperty(key)) {
    console.log(key); // 'name', 'age'
  }
}

for ... in循環能夠直接循環出 Array的索引。

var a = ['A', 'B', 'C'];
for (var i in a) {
  // 獲得的 i 是 String 而不是 Number 。
  console.log(i); // '0', '1', '2'
  console.log(a[i]); // 'A', 'B', 'C'
}

while/do...while

略。

Map/Set

Map

最新的ES6規範引入了新的數據類型 Map， Map是一組鍵值對的結構，具備極快的查找速度。

初始化Map須要一個二維數組：

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

或者直接初始化一個空 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

屢次對一個 key放入 value，後面的值會把前面的值沖掉。

Set

Set和 Map相似，也是一組 key的集合，但不存儲 value。

要建立一個Set，須要提供一個Array做爲輸入，或者直接建立一個空Set：

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

iterable

爲了統一集合類型， ES6標準引入了新的 iterable類型， Array、 Map和 Set都屬於 iterable類型。

具備iterable類型的集合能夠經過新的for ... of循環來遍歷。

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

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

for ... of循環則徹底修復了這些問題，它只循環集合自己的元素：

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

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

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

Set與 Array相似，但 Set沒有索引，所以回調函數的前兩個參數都是元素自己：

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

Map的回調函數參數依次爲 value、 key和 map自己：

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

---

我的靜態博客：

• 氣泡的前端日記： https://rheabubbles.github.io