JavaScript數據類型、流程控制詳解
1 數據類型
1.1 字符串
本節方法概覽：
| 方法名 | 功能 |
|---|---|
| `…` | 其中包裹多行字符串 |
| `…${…}` | 連接字符串 |
| “字符串名”.length | 返回字符串長度 |
| “字符串名”.toUpperCase() | 將字符串轉換爲大寫 |
| “字符串名”.toLowerCase() | 將字符串轉換爲小寫 |
| indexOf(’’) | 定位字符 |
| substring() | 取出子字符串 |
詳情請看以下內容。
-
正常字符串可以使用單引號，或雙引號包裹
-
注意轉義字符\
\' \n \t \u4e2d \u#### Unicode字符 "\x41" AscII字符 -
多行字符串編寫
使用``包裹：
案例展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 'use strict' var str= `hello world demut 你好！ `; </script> </head> <body> </body> </html>測試結果：
![在這裏插入圖片描述]()
-
模版字符串，連接字符串 `…${…}`
案例展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 'use strict' let name = "demut"; let age = 3; //符號拼接使用``符號 let msg = `你好, ${name}`; </script> </head> <body> </body> </html>打開控制檯，測試代碼：
![在這裏插入圖片描述]()
-
字符串長度
測試代碼：
var student="student"; console.log(student.length)測試結果：
![在這裏插入圖片描述]()
-
字符串不可變
測試過程如下：
![在這裏插入圖片描述]()
-
大小寫轉換
大寫轉換：
toUpperCase()![在這裏插入圖片描述]()
小寫轉換：
toLowerCase()![在這裏插入圖片描述]()
-
indexOf() 定位
測試如下：
![在這裏插入圖片描述]()
本測試說明在JavaScript中，數組字符串也是從0開始計數。
-
substring()
- 傳入一個數字，則從該位置（包含該位置）取至最後，返回子字符串。
- 傳入兩個數字，則按照左閉右開的原則取出子字符串。
測試如下：
![在這裏插入圖片描述]()
1.2 數組
Array可以包含任意的數據類型
var arr = [1,2,3,4,5,6]
本節方法概覽：
| 方法名稱 | 功能 |
|---|---|
| arr.length | 返回數組長度 |
| indexOf() | 定位元素 |
| slice() | 截取數組中一部分 |
| push(), pop() | 在數組尾部壓入，彈出 |
| unshift(), shift() | 在數組頭部壓入，彈出 |
| sort() | 數組元素排序 |
| reverse() | 數組元素反轉順序 |
| concat() | 連接數組，返回新數組 |
| join() | 打印拼接數組 |
詳情請看以下內容。
-
長度
arr.length注意：類似於matlab中特性，當賦值語句中的下標超過原始上限時，中間的元素自動用undefined元素填充，數組大小發生變化，若賦值過小，元素丟失。
測試如下：
![在這裏插入圖片描述]()
-
indexOf，通過元素獲得下標索引
arr.indexOf(2) 1注意：字符串的"1"和數字1是不同的
-
slice() 截取Array的一部分，返回一個新數組。類似於substring
測試：
arr.slice(1,5) (4) [2, 3, 4, 5] -
push, pop 尾部操作
push 壓入到尾部 pop 彈出尾部的一個元素測試：
![在這裏插入圖片描述]()
-
unshift(), shift() 頭部操作
unshift 壓入到頭部 shift 彈出頭部的一個元素測試：
![在這裏插入圖片描述]()
-
排序 sort()
var arr = ['b','a','c'] undefined arr.sort() (3) ["a", "b", "c"] -
元素反轉
arr.reverse() (3) ["c", "b", "a"] -
concat()
arr.concat([1,2,3]) (6) ["c", "b", "a", 1, 2, 3] arr (3) ["c", "b", "a"]注意：concat()並沒有修改數組，只是返回一個新的數組。
-
連接符 join
打印拼接數組，使用特定的字符串連接。
arr.join('-') "c-b-a" -
多維數組
arr = [[1,2],[3,4],[5,6]] (3) [Array(2), Array(2), Array(2)] arr[1][1] 4
數組： 存儲數據（如何存入，如何取出）
1.3 對象
若干個鍵值對
JavaScript中的所有的鍵都是字符串，值可以是任意對象！
//格式
var 對象名 = {
屬性名:屬性值,
屬性名:屬性值,
屬性名:屬性值
}
//定義了一個person對象，它有四個屬性
var person = {
name:"demut",
age: 3,
email: "[email protected]",
score: 1000
}
注意： js中對象, {…}表示一個對象，鍵值對描述屬性xxxx:xxxx，多個屬性之間使用逗號隔開，最後一個屬性不加逗號！
-
對象賦值
測試如下：
person.name = "jever"![在這裏插入圖片描述]()
-
使用一個不存在的對象屬性，不會報錯！
person.hahaha undefined -
動態的刪減屬性，通過delete刪除對象的屬性！
![在這裏插入圖片描述]()
-
動態的添加屬性，直接給新的屬性添加值即可！
測試：
![在這裏插入圖片描述]()
-
判斷屬性值或方法是否在這個對象中！ xxx in xxx!
'age' in person true //方法繼承 'toString' in person true -
判斷一個屬性值是否是這個對象自身擁有的
hasOwnProperty()person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
1.4 Map和Set
ES6的新特性～
Map （類似於python中的字典）
創建Map：var map = new Map([['Saragh',100],['Demut',90],['Dottie',90]]);
| 方法名 | 功能 |
|---|---|
| map.set() | 添加key-value |
| map.delete() | 刪除key-value |
| map.get(‘key’) | 取出key對應的值 |
Set 無序不重複的集合
創建Set：var set = new Set([3,1,1,1,1]);
| 方法名 | 功能 |
|---|---|
| set.add() | 添加元素 |
| set.delete() | 刪除元素 |
| set.has() | 判斷是否包含某個元素 |
Map與Set綜合案例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
//學生成績，學生姓名
// var names = ["Saragh","Demut","Dottie"];
// var scores = [100,90,90];
var map = new Map([['Saragh',100],['Demut',90],['Dottie',90]]);
var value = map.get('Saragh'); //取出Saragh對應的值返回
map.set('admin',123456); //添加key-value
map.delete('admin'); //刪除key-value
console.log(value);
var set = new Set([3,1,1,1,1]); //set可以去重
set.add(2); //添加元素
set.delete(2); //刪除元素
</script>
</head>
<body>
</body>
</html>
測試語句及結果：
1.5 iterator
ES6新特性
遍歷數組：
案例一：遍歷數組
//通過for of 實現
//注： for in是下標,且有漏洞
var arr = [3,4,5,6,6];
for (var x of arr){
console.log(x)
}
運行結果：
案例二：遍歷map
var map = new Map([["tony",100],["jack",90],["demut",100]]);
for (let x of map){
console.log(x)
}
運行結果：
案例三：遍歷set
var set = new Set([1,2,4,45,3]);
for (let x of set){
console.log(x)
}
運行結果：
2 流程控制
2.1 條件控制
if-else語句
if (score > 60 && score < 70){
alert("60~70");
}else if (score >70 && score < 90){
alert("70~90");
}else{
alert("Other");
}
2.2 循環控制
while循環，避免程序死循環
var age = 3;
while(age <100){
age = age+1;
console.log(age)
}
//do-while循環，至少循環一次
do {
age = age+1;
console.log(age)
}while (age<100)
for循環：
for (let i = 0; i < 100; i++) {
console.log(i)
}
for-in循環遍歷：
var age = [12,2,3,2,7,12,4,63,23];
//for(var index in Object)
for (var num in age){
console.log(age[num])
}
結果：
for-Each循環：
var age = [12,2,3,2,7,12,4,63,23];
//函數
age.forEach(function (value) {
console.log(value)
})
結果：
寫在最後
我相信這世界上，有些人有些事有些愛，再見到的第一次，就註定要羈絆一生，就註定像一棵樹一樣，生長在心裏，生生世世。
——宮崎駿
To Demut and Dottie!