JavaScript學習（六）數據類型

基本類型的方法

基本類型

• 是原始類型中的一種值。
• 在 JavaScript 中有 6 種基本類型：string、number、boolean、symbol、null 和 undefined。

對象類型

• 能夠存儲多個值作爲屬性。
• 可以使用大括號 {} 創建對象，例如：{name: "John", age: 30}。JavaScript 中還有其他種類的對象，例如函數就是對象。

---

數字類型

在 JavaScript 中，我們通過在數字後附加字母 “e” 來縮短數字，並指定零的數量來計數：

let billion = 1e9;  // 1 billion, literally: 1 and 9 zeroes

alert( 7.3e9 );  // 7.3 billions (7,300,000,000)

 isFinite 和 isNaN

• Infinite（和 -Infinite）是一個特殊的數值，比任何數值都大（小）。
• NaN 代表一個錯誤。

---

字符串

引號（Quotes）

字符串可以包含在單引號、雙引號或反引號中：

let single = 'single-quoted';
let double = "double-quoted";

let backticks = `backticks`;

反引號允許我們通過 ${…} 將任何表達式嵌入到字符串中，另一個優點是它們允許字符串跨行：

function sum(a, b) {
  return a + b;
}

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.


let guestList = `Guests:
 * John
 * Pete
 * Mary
`;

alert(guestList); // 客人清單，多行

其他不常見的“特殊字符”

字符串不可變

在 JavaScript 中，字符串不可更改。改變字符是不可能的。

let str = 'Hi';

str[0] = 'h'; // error
alert( str[0] ); // 無法運行

通常的解決方法是創建一個新的字符串，並將其分配給 str 而不是以前的字符串。

let str = 'Hi';

str = 'h' + str[1];  // 字符串替換

alert( str ); // hi

查找子字符串

第一個方法是 str.indexOf(substr, pos)。

它從給定位置 pos 開始，在 str 中查找 substr，如果沒有找到，則返回 -1，否則返回匹配成功的位置。

let str = 'Widget with id';

alert( str.indexOf('Widget') ); // 0，因爲 'Widget' 一開始就被找到
alert( str.indexOf('widget') ); // -1，沒有找到，檢索是大小寫敏感的

alert( str.indexOf("id") ); // 1，"id" 在位置 1 處（……idget 和 id）

str.lastIndexOf(subStr, pos) 他從字符串的末尾開始搜索。

 

獲取子字符串

JavaScript 中有三種獲取字符串的方法：substring、substr 和 slice。

總結

• 有 3 種類型的引號。反引號允許字符串跨越多行並可以在 ${…} 中嵌入表達式。
• JavaScript 中的字符串使用 UTF-16 進行編碼。
• 我們可以使用像 \n 這樣的特殊字符或通過使用 \u... 來操作它們的 unicode 進行字符插入。
• 獲取字符時，使用 []。
• 獲取子字符串，使用 slice 或 substring。
• 字符串的大/小寫轉換，使用：toLowerCase/toUpperCase。
• 查找子字符串時，使用 indexOf 或 includes/startsWith/endsWith 進行簡單檢查。
• 根據語言比較字符串時使用 localeCompare，否則將按字符代碼進行比較。

字符串還有其他幾種有用的方法：

• str.trim() —— 刪除字符串前後的空格 (“trims”)。
• str.repeat(n) —— 重複字符串 n 次。

---

數組

聲明

創建一個空數組有兩種語法：

let arr = new Array();
let arr = [];

數組可以存儲任何類型的元素。

// 混合值
let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];

// 獲取索引爲 1 的對象然後顯示它的 name
alert( arr[1].name ); // John

// 獲取索引爲 3 的函數並執行
arr[3](); // hello

fruits.shift(); // 從前端取出一個元素

shift 操作必須做三件事:

1. 移除索引爲 0 的元素。
2. 把所有的元素向左移動，將索引從 1 改成 0，2 改成 1 以此類推，對其重新編號。
3. 更新 length 屬性。

數組裏的元素越多，移動它們就要花越多的時間，也就意味着越多的內存操作。

pop 操作的動作:

fruits.pop(); // 從末端取走一個元素

循環

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}


let fruits = ["Apple", "Orange", "Plum"];

// 迭代數組元素
for (let fruit of fruits) {
  alert( fruit );
}

轉換數組

map

在這裏我們將每個元素轉換爲它的字符串長度：

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length)
alert(lengths); // 5,7,6

sort(fn)

let arr = [ 1, 2, 15 ];

// 該方法重新排列 arr 的內容（並返回它）
arr.sort();

alert( arr );  // 1, 15, 2

 

---

總結

數組方法備忘錄：

• 添加/刪除元素：

  • push(...items) — 從結尾添加元素，
  • pop() — 從結尾提取元素，
  • shift() — 從開頭提取元素，
  • unshift(...items) — 從開頭添加元素，
  • splice(pos, deleteCount, ...items) — 從 index 開始：刪除 deleteCount 元素並在當前位置插入元素。
  • slice(start, end) — 它從所有元素的開始索引 "start" 複製到 "end" (不包括 "end") 返回一個新的數組。
  • concat(...items) — 返回一個新數組：複製當前數組的所有成員並向其中添加 items。如果有任何items 是一個數組，那麼就取其元素。

• 查詢元素：

  • indexOf/lastIndexOf(item, pos) — 從 pos 找到 item，則返回索引否則返回 -1。
  • includes(value) — 如果數組有 value，則返回 true，否則返回 false。
  • find/filter(func) — 通過函數過濾元素，返回 true 條件的符合 find 函數的第一個值或符合 filter 函數的全部值。
  • findIndex 和 find 類似，但返回索引而不是值。

• 轉換數組：

  • map(func) — 從每個元素調用 func 的結果創建一個新數組。
  • sort(func) — 將數組倒序排列，然後返回。
  • reverse() — 在原地顛倒數組，然後返回它。
  • split/join — 將字符串轉換爲數組並返回。
  • reduce(func, initial) — 通過爲每個元素調用 func 計算數組上的單個值並在調用之間傳遞中間結果。

• 迭代元素：

  • forEach(func) — 爲每個元素調用 func，不返回任何東西。

• 其他：  – Array.isArray(arr) 檢查 arr 是否是一個數組。

請注意，sort，reverse 和 splice 方法修改數組本身。

---

Map

Map 是一個鍵值對的集合，很像 Object。但主要的區別是，Map 允許所有數據類型作爲鍵。

主要的方法包括：

• new Map() – 創建 map。
• map.set(key, value) – 根據鍵（key）存儲值（value）。
• map.get(key) – 根據鍵返回值，如果 map 中該鍵不存在，返回 undefined。
• map.has(key) – 如果鍵存在，返回 true，否則返回 false。
• map.delete(key) – 移除該鍵的值。
• map.clear() – 清空 map
• map.size – 返回當前元素個數。

  let map = new Map();
  
  map.set('1', 'str1');   // 字符串作爲 key
  map.set(1, 'num1');     // 數字作爲 key
  map.set(true, 'bool1'); // 布爾值作爲 key
  
  // 還記得普通對象 Object 嗎？它將會把所有的鍵轉化爲字符串類型
  // 但是 Map 將會保留鍵的類型，所以下面這兩個是不同的：
  alert( map.get(1)   ); // 'num1'
  alert( map.get('1') ); // 'str1'
  
  alert( map.size ); // 3

  遍歷 Map

• map.keys() – 返回鍵的迭代器，
• map.values() – 返回值的迭代器，
• map.entries() – 返回 [key, value] 迭代器入口，for..of 循環會默認使用它。

  let recipeMap = new Map([
    ['cucumber', 500],
    ['tomatoes', 350],
    ['onion',    50]
  ]);
  
  // 迭代鍵（vegetables）
  for (let vegetable of recipeMap.keys()) {
    alert(vegetable); // cucumber, tomatoes, onion
  }
  
  // 迭代值（amounts）
  for (let amount of recipeMap.values()) {
    alert(amount); // 500, 350, 50
  }
  
  // 迭代鍵值對 [key, value]
  for (let entry of recipeMap) { // 和 recipeMap.entries() 一樣
    alert(entry); // cucumber,500（等等）
  }

---

Set

 

Set 是一個值的集合，這個集合中所有的值僅出現一次。

主要方法包括：

• new Set(iterable) – 創建 set，利用數組來創建是可選的（任何可迭代對象都可以）。
• set.add(value) – 添加值，返回 set 自身。
• set.delete(value) – 刪除值，如果該 value 在調用方法的時候存在則返回 true ，否則返回 false。
• set.has(value) – 如果 set 中存在該值則返回 true ，否則返回 false。
• set.clear() – 清空 set。

set.size – 元素個數。

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 訪客，一些用戶來了多次
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// set 保證了值的唯一
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // John（然後是 Pete 和 Mary）
}

Set 迭代

我們可以使用 for..of 或者 forEach 來循環查看 set：

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) alert(value);

// 和 forEach 相同：
set.forEach((value, valueAgain, set) => {
  alert(value);
});

總結

• Map —— 是一個鍵值對集合

  和普通 Object 的區別：

  • 對象可以作爲鍵。
  • 迭代順序是插入順序。
  • 附加方便的方法，有 size 屬性。

• Set —— 是一個包含不重複值的集合。

  • 和 array 不同，set 不允許元素重新排序。
  • 保持插入的順序。

• WeakMap —— Map 的一個變體，僅允許對象作爲鍵，並且當對象由於其他原因不可引用的時候將其刪除。

  • 它不支持整體的操作：沒有 size 屬性，沒有 clear() 方法，沒有迭代器。

• WeakSet —— 是 Set 的一個變體，僅存儲對象，並且當對象由於其他原因不可引用的時候將其刪除。

  • 同樣不支持 size/clear() 和迭代器。