## 20241011(五)Day8

### [今日學習]認識各個方法、屬性
---
####
#### JS的字串方法
- https://www.w3schools.com/js/js_string_methods.asp#mark_charat

.length: number、void;
- .length，字串長度
- number，有回傳值，且是數值
- void，沒有回傳值

.indexOf(searchString: string, position?: number): number;
- .indexOf("字串")，回傳string內特定的字，並回傳其在string內所在位置位置從0開始計算，若不存在則為-1
- 物件.方法(資料)，()內的VScode描述方式:(描述參數A: 參數A型別, 描述參數B: 參數B型別): 回傳值的型別

.lastIndexOf: number;
- .lastIndexOf，尋找字串中的特定字，且為最後一個符合
- ex:apple，求p的位置，.indeOf會回傳1，.lastIndexOf會回傳2

.split(separator: string | RegExp, limit?: number): string[];

ex:
var fruits = "apple,bubble,lemon";
res = fruits.split(",")
console.log(res);//(3) ['apple', 'bubble', 'lemon']
- 索引的fruit物件內有三個字串，用.split方法以,為切割點處理得到3的值，並且以陣列[]表示內裡有三個資料皆為字串

string(n).padStart(targetLength, padString);
- n為.padStart所要處理的字串資料，targetLength為字串想要輸出的長度
- 若n的長度<targetLength輸出的長度，則在前方填補padString輸入的字，若n的長度>=targetLength輸出的長度，則不做任何處理
- 若沒有設定padString，且n的長度<targetLength輸出的長度，那麼預設的處理方式為填補空格

ex1:
const text = "Hello";
const paddedText = text.padStart(10, "-");
console.log(paddedText);
輸出的值為-----Hello

ex2:
var demo = "13756";
res = demo.padStart(8);
console.log(res);
輸出的值為 13756
因為沒有設定padString，預設為空格

.substring(start: number, end?: number): string;
- 擷取字串(開始,結束-1)輸出的字串;
- 結束位置可以不寫，直接取設定的開始位置直到最後一位

var phones = "09112223330423456789";
var cellPhone = phones.substring(0,10)
console.log(cellPhone);
輸出的值為0911222333
因為0911222333有10個字，0~10共有11個字，但.substring要-1
var telephone = phones.substring(10);
console.log(telephone);
輸出的值為0423456789
沒有寫上結束的位置，所以會直接取到最後一位

.slice(start?: number, end?: number): string;
- 與.substring幾乎一樣，因此我們來對兩者做個比較

比較.substring與.slice
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

console.group("(3, 5)");
console.log(`str.substring(3,5)：${str.substring(3, 5)}`);
console.log(`str.slice(3,5)： ${str.slice(3, 5)}`);
console.groupEnd();
輸出的值為
(3, 5)
str.substring(3,5)：DE
str.slice(3,5)： DE
輸出的值一樣

console.group("(5, 3)");
console.log(`str.substring(5,3)：${str.substring(5, 3)}`);
console.log(`str.slice(5,3)：${str.slice(5, 3)}`);
onsole.groupEnd();
輸出的值為
(5, 3)
str.substring(5,3)：DE
str.slice(5,3)：
.substring發現開始的位置比結束的位置後面，那麼他會自動對調兩個位置並輸出，.slice則不會

console.group("(3)");
console.log(`str.substring(3)：${str.substring(3)}`);
console.log(`str.slice(3)： ${str.slice(3)}`);
console.groupEnd();
(3)
str.substring(3)：DEFGHIJKLMNOPQRSTUVWXYZ
str.slice(3)： DEFGHIJKLMNOPQRSTUVWXYZ
輸出的值相同

console.group("(-5)");
console.log(`str.substring(-5)：${str.substring(-5)}`);
console.log(`str.slice(-5)：${str.slice(-5)}`);
console.groupEnd();
(-5)
str.substring(-5)：ABCDEFGHIJKLMNOPQRSTUVWXYZ
str.slice(-5)：VWXYZ
另需補充內容
* .slice不寫開始位置會怎樣
* 另有一個擷取字串的方式substr(start, length)
---
#### JS的數值與字串
NaN(Not-A-Number)、Infinity、-Infinity

code console
var v = 10/0;
console.log(v); Infinity

var w = -10/0
console.log(w); -Infinity

var x = 100/10;
console.log(x); 10

var y = 100/"10";
console.log(y); 10
此處為VScode自動識別字串內的字是否為數值，可若這樣做感覺以後容易出BUG

var z = 100/"apple"
console.log(z); NaN
識別為非數值

var res = isNaN(x);
console.log(res); False

var res2 = isNaN(z);
console.log(res2); True

parseInt(string: string, radix?: number): number;
- 把字串轉成整數

parseFloat(string: string): number;
- 把字串轉成浮點數

var a1 = 11+1;
console.log(a1); 12

var a2 = "11"+1
console.log(a2); 111
這裡的+是字串串接，因此VScode自動把1改為字串"1"，所以輸出的111實際為"111"

var a3 = "11"-1;
console.log(a3); 10
因為-不是字串串接的符號，因此這裡自動識別"11"為11

var a4 =parseInt("11")+1;
console.log(a4); 12

var a5 = parseFloat("3.14")+1;
console.log(a5); 4.140000000000001

Number.toString(radix?: number): string;
- 數值轉字串
- typeof，用來看物件的型態

code console
var bee = 5;
console.log(typeof bee); number

var cat = bee.toString();
console.log(cat); 5
console.log(typeof cat); string
---
#### 陣列(array)
陣列的基本宣告與存取

code console
設:
var s1 = 90;
var s2 = 80;
var s3 = 100;
var s4 = 40;

宣告陣列
var temp = [90,80,100];
console.log(temp); [90,80,100]

把「元素」放進去
apple[0] = ["皮卡丘"];
console.log(apple); ['皮卡丘']
apple[1] = 10;
console.log(apple); ['皮卡丘',10]
console.log(apple[1]); 10

陣列中放陣列
apple[2] = ["BEE","CAT"];
console.log(apple); ['皮卡丘',10,'BEE','CAT']
console.log(apple[2]); ['BEE','CAT']
console.log(apple[2][0]); BEE

取得陣列中的數值
var poker = [];
poker[0] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
console.log(poker[13]); undefined
console.log(poker); 0: (13) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],length: 1
這裡是較完整的陣列內容，前面為方便觀看所以簡化了陣列輸出的值
可以看到length指的是長度，這邊可以譯為元素個數
而console.log(poker);length為1
所以我們需要再往下檢索
console.log(poker[0]); (13) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],length: 13
console.log(poker[0][13]); undefined
console.log(poker[0][12]); 13
不要忘記檢索時個數是從0開始計算

陣列的進階運用
- Array<string>.toString(): string
陣列轉字串
- Array<string>.join(separator?: string): string;
設定陣列的區隔符號

code console
var weekList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
console.log(weekList[1]); monday
console.log(weekList.length); 7

var x = weekList.toString();
console.log(x); sunday,monday,tuesday,wednesday,thursday,friday,saturday
陣列轉字串，預設區隔符號為,
var y =weekList.join("#");
console.log(y); sunday#monday#tuesday#wednesday#thursday#friday#saturday
設定區隔符號為#

刪除陣列中的元素
- Array<string>.shift(): string | undefined
將陣列的第一筆元素刪除
- Array<string>.pop(): string | undefined
將陣列的最後一筆元素刪除

code console
console.log(weekList.shift); sunday
刪除第一個元素，這個寫法是展示被刪除的元素
weekList.pop();
console.log(weekList); (5) ['monday', 'tuesday', 'wednesday', 'thursday', 'friday']
刪除最後一個元素，這裡取的是weekList，而不是上面寫的變數x,y之類的，故呈現出來的是陣列型態

增加陣列中的元素
- Array<string>.unshift(...items: string[]): number
增加元素在第一筆的位置
- Array<string>.push(...items: string[]): number
增加元素在最後一筆的位置

想要加入資料到陣列中可以怎麼操作?
方法A:加在第一筆，陣列.unshift()
res = weekList.unshift("皮卡丘");
console.log(res); 6
console.log(weekList); (6) ['皮卡丘', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday']
方法B:加在最後一筆，陣列.push()
res = weekList.push("胖丁");
console.log(res); 7
console.log(weekList); (7) ['皮卡丘', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', '胖丁']
方法C:加在最後一筆，陣列[索引] = 值
weekList[weekList.length] = "小火龍";
console.log(weekList); (8) ['皮卡丘', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', '胖丁', '小火龍']

淺談二維陣列

var poker = [];
poker[0] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
console.log(poker.length); 1
console.log(poker[0].length); 13

傳值法 vs. 傳址法
- 傳值法:

code console
var x = 10;
var y = x;
console.log(x); 10
console.log(y); 10
var x = 100
console.log(x); 100
console.log(y); 10
y值不因x值變化而變化，單純賦值完後就不相干了

- 傳址法:

code console
var apple = [1,2,3,4,5,6]
var bee = apple
console.log(apple); (6) [1, 2, 3, 4, 5, 6]
console.log(bee); (6) [1, 2, 3, 4, 5, 6]
console.log(bee[0]); 1
bee[0] = 90;
console.log(bee); (6) [90, 2, 3, 4, 5, 6]
console.log(apple); (6) [90, 2, 3, 4, 5, 6]
傳址法可以理解為複製的不是值，而是結構+值
因此修改了A的某元素值，B的相同結構下的該元素值會一同變更，因為對標的結構位置還是一樣的
---

#### 物件(Object)的資料維護
- 當有多元素描述同一事物，且該事物需要一直重複輸入時，物件的使用方式比起單純變數賦值，或是陣列給值更易觀覽維護
- 物件{}可以包含屬性和方法

code console
重新帶一下每個位置對標的名詞
設var apple = {bee: 'cat'}
apple在這裡就是物件，因為帶大括號{}
物件裡面有bee屬性
bee屬性的值是字串cat，因為帶''

設目標:記錄學生姓名、國文成績、數學成績
用變數，容易變得冗長且變數數量很多
var student = "皮卡丘";
var math = 80;
var chinese = 70;

用陣列，可以一個式子解決，然而新增、刪改、後續維護等不易閱讀
var student = ["皮卡丘",80,70]
console.log(student[2]); 70
看到這裡還記得70是誰的值嗎?

用物件，可解決多元素資料的維護問題，易觀覽
適用於多元素描述同一事物，若該事物需要一直重複輸入又更加適合
var student = {
name: "皮卡丘",
math: 80,
chinese: 70
};
console.log(student); {name: '皮卡丘', math: 80, chinese: 70},[[Prototype]]:Object

透過.可以取得、新增object的屬性
取值 ==> 物件.屬性
console.log(student.math); 80
修改值 ==> 物件.屬性 = 值
student.math = 90;
console.log(student); {name: '皮卡丘', math: 90, chinese: 70}
新增屬性 ==> 物件.屬性 = 值
student.english = 100;
console.log(student); {name: '皮卡丘', math: 90, chinese: 70, english: 100}
元素自動帶入最後一個位置

透過[]可以取得、新增object的屬性
取值 ==> 物件["屬性"]
console.log(student['chinese']); 70
修改值 ==> 物件['屬性'] = 值
student['chinese'] = 60;
console.log(student); {name: '皮卡丘', math: 90, chinese: 60, english: 100}
新增屬性 ==> 物件['屬性'] = 值
student['science'] = 50;
console.log(student); {name: '皮卡丘', math: 90, chinese: 60, english: 100, science: 50}
元素自動帶入最後一個位置

---
#### 布林值(boolean)的初步了解: true、false

code console
var x = false;
console.log(x); false

var y = 5>3;
若覺得這樣不容易一眼看懂，也可以寫做var y = (5>3)
console.log(y); true
console.log(typeof y); boolean

運算子的基本運作概念

code console
ex:a + b
+ 　 ==> 運算子
a、b ==> 運算元

var a = 10;
var b = 3;
console.log(a % b); 1

++變數 和 變數++
var b = 3;
var c = 3;
var d = 3;
var e = 3;
情境一:變數+1的三種簡寫方式
b = b + 1;
console.log(b); 4
c+=1;
console.log(c); 4
d++;
console.log(d); 4
++e;
console.log(e); 4
情境二:b++的值顯示順序(注意!!)
console.log(b++); 3
會先顯示b的值，但一樣會進行++的動作
console.log(b); 4
因此輸出的b值為4

比較運算子 與 布林值
- =，給值
- ==，比值
- ===，比值、資料型態
- !=，不等於

code console
console.log(true == 1); true
console.log(false == 0); true

值與字串比較
var x = 10;
var y = "10";
console.log(x == y); true
console.log(x === y); false

不等於的寫法
var a = 10;
var b = 5;
console.log(a != b); true

比大小
console.log(2>1); true
console.log(1<2<3); true
console.log(3>2>1); false
這裡之所以會給出false，是因為比較的時候是一個一個比
所謂的一個一個比是怎樣的?
即 console.log(3>2);//true
console.log(console.log(3>2) > 1);為了好理解這裡寫成這樣
console.log(true > 1); 為了好理解這裡寫成這樣
console.log(1 > 1); 為了好理解這裡寫成這樣
因1沒有大於1
所以出來是false

邏輯運算子
- &&，and
- ||，or

code console
console.log(a == 10 && b == 5); true
console.log(a == 10 || b == 10); true

---
#### if、else 與 三元運算子
- if (條件|比較) {
條件成立，執行這段
} else {
條件不成立時，執行這段
}
- 三元運算子
(condition) ? value1:value2
即(條件|比較) ? 成立執行這段 : 不成立執行這段

code console
情境1: 降雨機率>=60%，則帶傘出門，否則不帶傘
if (降雨機率>=60%) {
帶傘出門
} else {
不帶傘
}
情境2: 蘋果早上賣100元，其他時段賣80元
中文直譯
if (現在時間是否為早上) {
蘋果賣100元
} else {
蘋果賣80元
}
if、else寫法
var nowTime = "AM";
現在時間
var apple = 0;
蘋果的價格，這裡的0並不會是最後輸出的值，這裡主要目的是宣告apple這個變數
if (nowTime == "AM") {
apple = 100 + "元";
} else {
apple = 80 + "元";
}
console.log(apple); 100元
三元運算子 寫法
var nowTime = "AM";
var apple = (nowTime == "AM") ? 100+"元" : 80+"元";
console.log(apple); 100元

---
#### 時間物件的寫法
- https://www.w3schools.com/js/js_date_methods.asp#gsc.tab=0

code console
var d = new Date();
現在時間:
console.log(d); Fri Oct 11 2024 16:31:00 GMT+0800 (台北標準時間)
今年西元幾年:
console.log(d.getFullYear()); 2024
現在是幾月份:(注意!)
onsole.log(d.getMonth()); 9
console.log(d.getMonth() + 1); 10
注意這裡!!對電腦來說10代表11月
因此工程師的主觀月份要-1才是電腦的值
今天幾號:(從1開始計算)
console.log(d.getDate()); 11
今天星期幾:(注意!)
console.log(d.getDay()); 5
星期天的值為0，所以值的範圍是「0~6」
現在幾點:
console.log(d.getHours()); 16
現在幾分:
console.log(d.getMinutes()); 34

明天怎麼寫:
日期.setDate()
d.setDate(d.getDate() + 1);
console.log(d); Sat Oct 12 2024 16:39:30 GMT+0800 (台北標準時間)
下個月怎麼寫:
日期.setMonth()
d.setMonth(d.getMonth() + 1);
console.log(d); Tue Nov 12 2024 16:45:04 GMT+0800 (台北標準時間)

時間物件的進階寫法
- Date.setMonth(month: number, date?: number): number
可以直接設定(月,日)
- getDate()，除了(1~31)的回傳值之外，也有("yyyy-mm-dd")賦值方式，值得注意的是可以賦值為0，為上個月的最後一天的意思
- new () => Date (+4 overloads)，這是new Date();
即意味著new Date();可以同時套用4個不同的屬性

如何透過日期的加減，取得這個月的最後一天?
試寫:(這寫法是錯的)
console.clear();
console.log(d.getMonth());
d.setDate((d.getMonth() + 1) - (d.getMonth() + 1));
console.log(d); Thu Oct 31 2024 17:06:51 GMT+0800 (台北標準時間)
這裡我不確這這樣寫問題出在哪，感覺這不是OK的答案
方法A:
var apple = new Date();
apple.setMonth(apple.getMonth() + 1, 0);
console.log(apple); Thu Oct 31 2024 17:06:51 GMT+0800 (台北標準時間)
方法B:
var bee = new Date(2024,10,0);
console.log(bee); Thu Oct 31 2024 00:00:00 GMT+0800 (台北標準時間)
這個方法寫出的時間點是個絕對時間，輸出為當天的凌晨12點
方法C:
var temp = new Date();
var bee = new Date(temp.getFullYear(), temp.getMonth() + 1, 0)
console.log(bee); Thu Oct 31 2024 00:00:00 GMT+0800 (台北標準時間)
這個方法寫出的時間點是個絕對時間，輸出為當天的凌晨12點
值得學習的是這裡的temp同時套用在年、月兩個位置，因為new Date();允許同時套用4個不同屬性

月相差幾天怎麼寫
var a = new Date();
var b = new Date('2024-11-11')
console.log(a); Fri Oct 11 2024 17:08:34 GMT+0800 (台北標準時間)
console.log(b); Mon Nov 11 2024 08:00:00 GMT+0800 (台北標準時間)
var diff = b - a;
console.log(diff / 86400000);//30.618053506944445
時間的差值預設是以毫秒為單位
一天幾毫秒 ==> millisecond = 86400000 = 1000毫秒*60秒*60分*24時

---
#### 內建的數學屬性
- https://www.w3schools.com/js/js_math.asp
- Math.random(): number，取亂數 0(包含0) ~ 1(不包含1)
- Math.round(x: number): number，四捨五入取整數，負數時一樣
- Math.ceil(x: number): number，向上取整
- Math.floor(x: number): number，向下取整
- Math.trunc(x: number): number，無條件捨去小數點

code console
取亂數: 0(包含0) ~ 1(不包含1)
var a = Math.random();
console.log(a);
var b = Math.round(Math.random()*6);
console.log(b);
var c = Math.ceil(Math.random()*6);
console.log(c);
var d = Math.floor(Math.random()*6);
console.log(d);
var e = Math.trunc(Math.random()*6);
console.log(e);

練習題:
Qes:透過 Math.random() 取得 2-5 之間的亂數
2-5總共有5-2+1個整數
var f = Math.floor((Math.random() * 4) + 2);
console.log(f);
寫成公式
Math.floor((Math.random() * (最大值 - 最小值 + 1)) + 最小值);

在負數時Math.trunc、Math.floor、Math.ceil、Math.round的差異
var g = Math.trunc(-4.2);
console.log(g); -4
var h = Math.ceil(-4.2);
console.log(h); -4
var i = Math.floor(-4.2);
console.log(i); -5
var j = Math.round(-4.2);
console.log(j); -4
var k = Math.round(-4.8);
console.log(k); -5

---
### [疑惑]
- VScode自動識別字串內的字是否為數值，可若這樣做感覺以後容易出BUG，不確定這樣的方法是否OK

code console
var y = 100/"10";
console.log(y); 10

- 如何透過日期的加減，取得這個月的最後一天?(已解決)

試寫:
code console
d.setMonth(d.getMonth() + 1);
console.log(d);
console.clear();
console.log(d.getMonth());
d.setDate((d.getMonth() + 1) - (d.getMonth() + 1));
console.log(d); Thu Oct 31 2024 17:06:51 GMT+0800 (台北標準時間)
這裡我不確這這樣寫問題出在哪，感覺這不是OK的答案

- 為何這裡會是4.140000000000001

code console
var a5 = parseFloat("3.14")+1;
console.log(a5); 4.140000000000001

- Math.trunc、Math.floor、Math.ceil在正負數時的取整差異，跑亂數的時候有跑出奇怪的數字，可惜沒記錄到

- 自己出題:我想取得 -2~-5 之間的亂數，怎麼取，公式又該怎麼寫

### [解惑]
- 如何透過日期的加減，取得這個月的最後一天?

試寫:
code console
d.setMonth(d.getMonth() + 1);
console.log(d);
console.clear();
console.log(d.getMonth());
d.setDate((d.getMonth() + 1) - (d.getMonth() + 1));
console.log(d); Thu Oct 31 2024 17:06:51 GMT+0800 (台北標準時間)
Ques:這裡我不確這這樣寫問題出在哪，感覺這不是OK的答案
Ans:問題出在我對console.clear();的理解
原先的理解是清空這語法以上的所有賦值
經查證是僅清空輸出在console上的數據
因此上面的code賦值並沒有清除
而原先有給予d.getMonth()賦予了+1的值
因此d的值來到了11月份
11.setDate(0)則為10月31日