好好學習，天天向上
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
連結：https://blog.csdn.net/weixin_43461520/article/details/113853339
JavaScript簡介
之前我們在寫網頁的時候，用的是HTML+CSS，這樣的網頁被稱作靜態網頁，它只是用來展示內容而已，不具備互動的功能，如果想要點選某個元素的時候執行特定的事件，就要使用到JavaScript，有了JavaScript之後，網頁就可以實現更加複雜的效果，比如和伺服器的互動等，這樣的網頁被稱作動態網頁。
瀏覽器分成渲染引擎和JS引擎兩部分，渲染引擎用來解析HTML和CSS，又稱作核心；而JS引擎則用來讀取網頁中的JavaScript程式碼，然後逐行解釋並執行JavaScript程式碼。
JavaScript開胃小菜
在正式開始JavaScript之前，先來介紹一下JavaScript的一些基礎知識。
JavaScript書寫位置
JavaScript有行內、內嵌和外部引入三種書寫方式，當內容較少時可以使用行內式去書寫，這樣比較方便，但是當程式碼比較多的時候就不推薦這種方式了。
<body>
<button onclick="alert('Robod')" >微信公眾號</button>
</body>
第二種就是內嵌式的寫法，就是用<script></script>標籤將JavaScript程式碼包裹起來，一般都會將其放在head標籤或者body標籤裡。
<script>
console.log("微信公眾號：Robod");
</script>
最後一種外部引入就是給 script 標籤一個src屬性，指向需要引入的JavaScript檔案，如果程式碼量很大的話就比較適合這種方式。
<script src="./js/xxx.js"></script>
註釋
JavaScript註釋和C語言，Java一樣，分為單行註釋和多行註釋
// 這是個單行註釋
/*
這是個多行註釋，
用來註釋多行內容
*/
輸入輸出語句
有過程式設計經驗的小夥伴們肯定都在控制檯或者某些地方列印過臨時資料用來測試程式碼的執行情況，或者是給使用者展示一些內容，在 JavaScript 中也提供了輸入和輸出的方式。
alert(msg)
這種方式是在瀏覽器中彈出一個警示框，可以用來測試程式碼，但多數情況下還是給予使用者警示的作用。
alert('小夥伴們不要忘了點贊哦~');
console.log(msg)
這種方式則是在控制檯中列印某些資料，在寫程式碼的時候可以通過控制檯列印一些資料檢視程式碼的執行情況，在瀏覽器視窗按 F12 鍵再點選 Console 即可檢視控制檯。
console.log('微信公眾號：Robod');
prompt(info)
通常我們可能需要使用者去輸入某些內容，這時候就可以彈出一個輸入框，使用者可以在輸入框中輸入內容。
prompt('這位兄臺，你點讚了嗎？');
變數和常量
計算機的記憶體是用來臨時存放資料的，資料被儲存在記憶體中的不同記憶體區域，每塊區域都有記憶體地址，我們可以通過記憶體地址去操作對應區域中的資料，當有很多資料需要放入記憶體時，那麼多的記憶體地址，記起來可不容易，所以就有了變數的概念，變數是用來儲存資料的容器。可以這樣去理解變數?賓館就相當於記憶體，裡面有個房間的房間號是4399，4399號房裡住的是王五，4399可能不太好記，給這個房間起個別名，叫Wangwu，那麼Wangwu就是一個變數，指向的就是4399號房間。
變數在使用的過程中需要先宣告再賦值，宣告變數使用 var和let 關鍵字，它們兩個的區別在於作用域的不同，當變數宣告後，計算機會自動給變數分配記憶體空間，不需要我們手動地去分配，宣告變數後再使用賦值號 “=” 為變數賦值。
var a; //宣告變數a
a = 10; //為變數 a 賦值
var b = 20; //宣告變數 b 的同時給 b 賦值
var c = prompt(); //將prompt彈出輸入框，並將輸入框中的內容賦值給變數 c
變數的值是可以修改的，而常量指的是一經賦值就不能修改的值，用const關鍵字進行宣告。
const a = 10;
a = 20;
如果修改常量的值就會報錯。
資料型別
寫過Java或者C語言的小夥伴們肯定知道，在宣告變數的時候要指定資料型別，比如Java?
int a = 10;
String s = "微信公眾號：Robod";
float b = 3.14f;
但是JavaScript在宣告變數的時候只需要寫var或者let關鍵字，但這並不意味著JavaScript沒有資料型別，而是因為JavaScript是一種弱型別的語言，在程式執行的過程中，資料的型別會被自動確定，不需要手動地指定。
可能有的小夥伴沒學過其它語言，我簡單提一嘴什麼是資料型別，前面提到過變數是用來儲存資料的容器，既然是容器，肯定要為容器貼個標籤，不貼標籤可能會出現問題，就和化學試驗室裡的藥劑瓶一樣，不貼標籤萬一把鹽酸當水喝了怎麼辦~
不同的資料型別所佔用的記憶體大小是不一樣的，區分資料型別一方面可以降低系統的出錯率，另一方面是為了更好地利用記憶體空間。
基本資料型別
基本資料型別有5個
| 型別 | 說明 | 預設值 |
|---|---|---|
| Number | 數字型 | 0 |
| Boolean | 布林值型別 | false |
| String | 字串型別 | "" |
| Undefined | 只宣告瞭變數但是還沒有賦值 | undefined |
| Null | 宣告的時候賦值為null | null |
- Number
Number就是數字型，整數和小數都是數字型，預設是十進位制，也可以用來表示二進位制、八進位制以及十六進位制。
var a = 10; //整形值
var b = 3.14; //浮點型
var c = 0b10; //二進位制，以0b開頭
var d = 077; //八進位制，以0開頭
var e = 0x11; //十六進位制，以0x開頭
var f = Number.MAX_VALUE; //數值型別的最大值,1.7976931348623157e+308
var g = Number.MIN_VALUE; //數值型別的最小值,5e-324
var h = Infinity; //無窮大
var i = -Infinity; //無窮小
var j = NaN; //Not a Number 非數字
- String
String就是字串，顧名思義，就是一串字元，這串字元是用引號包裹起來的，單引號雙引號都可以，推薦用單引號。既然引號是被用來表示字串的，那麼我想在字串中表示引號怎麼做？JavaScript為我們提供了轉移字元，可以通過 “\” 加上特定的符號表示特定的字元：
如果想要獲取一個字串的長度，可以通過其 length 屬性，多個字串可以通過 “+” 去進行拼接，但字串用的更多的還是字串與變數之間進行拼接。
var s1 = "微信公眾號: Robod";
var len = s1.length; //獲取字串s1的長度
var s2 = "s1的長度為：" + len; //s1的長度為：11
- Boolean
布林值有兩個：true(真)和false(假)，Boolean與Number進行運算的時候表示為1和0。
var a = true;
var b = 1 < 0; //false
var c = 5 + a - b * 3; //6
- Undefined 和 Null
一個只宣告但未賦值的變數其型別就是 Undefined ，Null則表示一個空物件，就是什麼都沒有的意思。
typeof 關鍵字
當我們不知道一個變數的資料型別是什麼的時候，就可以使用 typeof 關鍵字去獲取它的資料型別。
var a = "微信公眾號：Robod";
console.log(typeof a); //string
var b = 33.33;
console.log(typeof b); //number
資料型別的轉換
有三種方式可以將其它型別的資料轉換為字串型別。
//1.toString()
var a = 10;
var s1 = a.toString(); //數字a轉換為了字串 '10'
//2.String()
var b = true;
var s2 = String(b); //boolean型別的b轉換為了字串 'true'
//3.最後一種就是前面提到過的 “+” 拼接字串
var c = undefined;
var s3 = c + ''; //與空字串拼接將其轉換為字串 'undefined'
既然數字可以轉換為字串，那麼字串同樣也可以轉換為數字型
//1.parseInt()，轉換為整數，小數部分會捨去
var num1 = parseInt('666'); //將字串 '666' 轉換為數字 666
//2.parseFloat()，轉換為小數
var num2 = parseFloat('6.668'); //將字串 '6.668'轉換為浮點數 6.668
//3.Number()，整數浮點數都可以轉換
var num3 = Number('33'); //字串 '33' 轉換為數字型 33
//3.使用運算子進行隱式轉換
var num4 = '3.14' * 1; //將字串 '3.14' 轉換為數字型 3.14
使用Boolean()函式可以將其它型別的資料轉換為布林型，代表空以及否定的值會被轉換為false，如 ''、0、NaN、null、undefined，其它的則會被轉換為true。
運算子
運算子是用來實現賦值、比較和執行算數運算等功能的符號。
算數運算子
用於執行兩個變數或值得算數運算的符號被稱作算符運算子。
| 運算子 | 描述 | 示例 |
|---|---|---|
| + | 加 | 1 + 1 = 2 |
| - | 減 | 2 - 1 = 1 |
| * | 乘 | 5 * 6 = 30 |
| / | 除 | 30 / 5 = 6 |
| % | 取餘數 | 7 % 2 = 1 |
遞增和遞減運算子
遞增運算子是 ++ ，遞減運算子是 -- ，配合變數進行使用，分為前置遞加(遞減)和後置遞加(遞減)。
//遞增操作，遞減也是同樣的道理
var a = 10;
//後置遞增，先將a賦值給b，再執行自增操作，a=11，b=10
var b = a++;
//前置遞增，先將b執行自增操作，再將b的值賦值給c，b=11，c=11
var c = ++b;
比較運算子
又稱關係運算子，是兩個資料進行比較的時候所使用的運算子，比較後，返回一個布林值作為比較的結果。
| 運算子 | 描述 |
|---|---|
< |
小於 |
> |
大於 |
>= |
大於等於 |
<= |
小於等於 |
== |
等於，會轉型⭐ |
!= |
不等於 |
=== |
全等 |
!== |
非全等 |
? : |
三元運算子 |
和Java中的比較運算子有點不同的是 "==" 並不是完全等於的意思，只比較內容是否相等，不比較資料型別； "==="才和Java中的 “==”是一個意思，當值與資料型別完全一致的時候結果才是true。
var num = 10;
var s = '10';
//先將字串轉換為數值型別再進行比較，所以結果是 true
var bool1 = num == s;
//資料型別不一致，結果是 false
var bool2 = num === s;
三元運算子有點特殊，它由三個表示式組成。
/*
語法：條件表示式 ? 語句1 : 語句2;
首先判斷條件表示式的結果，如果是true，則取語句1的值，false則取語句2的值
*/
var a = (10 > 5) ? (12 / 2) : 3; //10>5的結果是true，所以a=12/2,結果是6
邏輯運算子
用來進行布林值運算的運算子被稱作邏輯運算子，它的返回值也是布林值。
| 運算子 | 說明 |
|---|---|
&& |
邏輯與 |
|| |
邏輯或 |
! |
邏輯非 |
&&和||的左右兩側都跟著一個表示式，!的右側跟著一個表示式。
//左右兩側都為true時結果為true，有一個為false結果就是false
var a = (5 > 3) && (5 === 4); //false
//只要有一個為true結果就是true
var b = (2 < 1) || (3 > 1); //true
//取表示式結果的相反結果
var c = !(5 > 3); //false
邏輯運算子兩邊的表示式不僅可以是布林值，也可以是其它型別的值。
//當第一個表示式表示0，空等含義時，返回第一個表示式的結果，反之返回第二個表示式的結果
var a = '' && 456; //a=''
var b = 123 && (5 + 5); //b=10
//當第一個表示式表示0，空等含義時，返回第二個表示式的結果,之返回第一個表示式的結果
var c = 123 || 456; //c=123
var d = undefined || 456; //d=456
需要注意的是，邏輯運算子采用的是短路運算，即第一個表示式可以確定最終結果時，第二個表示式不進行計算。
var num = 5;
//a=null,num=5，前面一個表示式可以確定結果，++num不執行
var a = null && ++num;
賦值運算子
用來把資料賦值給變數的運算子。
| 運算子 | 說明 |
|---|---|
= |
把賦值號右邊的值賦給左邊 |
+=、-= |
加減一個值後再進行賦值 |
*=、/=、%= |
乘除取餘一個值後在進行賦值 |
var age = 10;
age += 5; //相當於age=age+5; age=15
age -= 5; //相當於age=age-5; age=10
age *= 10; //相當於age=age*10; age=100
運算子優先順序
在小學的時候我們都學過，一個式子中加減和乘除同時存在時，先算乘除再算加減，有括號先算括號裡的內容，這就是運算子的優先順序，優先順序高的先算，優先順序小的後算。
流程控制
流程控制就是用來控制程式碼按照什麼順序來執行。
順序結構
順序結構就是按照程式碼的先後順序執行，沒有特定的語法結構。
分支結構
分支結構就是在程式碼執行的過程中根據不同的條件執行不同的程式碼路徑，從而得到不同的結果，就像開車的時候遇到一個分岔路口一樣，走不同的路會去往不同的地方。JavaScript中提供了if語句和switch語句這兩種分支結構語句。
if語句由if、else和else if三個組成
//當表示式1為true時，執行花括號裡的語句1
if (表示式1) {
語句1;
}
//當表示式2中的語句為true時，執行語句2，為false執行語句3
if (表示式2) {
語句2;
} else {
語句3;
}
/* 依次判斷，當有一個表示式為true時執行對應花括號裡的語句，然後跳出分支結構；
如果都不符合執行最後面的else裡的語句 */
if (表示式3) {
語句4
} else if (表示式4) {
語句5
} else if (表示式5) {
語句6
} else {
語句7
}
前面提到了三元表示式其實就和分支結構差不多。
switch語句和if else if一樣也是多分支結構，它基於不同的條件來執行不同的程式碼
//通過表示式的值去選擇對應的value，然後執行對應的語句，都不符合執行最後的default中的語句
switch (表示式) {
case value1:
語句1
break;
case value2:
語句2
break;
......
default:
執行最後的語句;
}
迴圈結構
在寫程式的過程中，經常會遇到一些具有規律性的重複操作，所以有了迴圈結構後就可以重複執行某些操作，減少程式碼量。在JavaScript中有三種迴圈語句。JavaScript的迴圈和java中的迴圈是一樣的，所以有Java程式設計經驗的小夥伴可以略過這一節。
第一種是for迴圈。
/*
for (初始化變數; 條件表示式; 操作表示式) {
//迴圈體
}
*/
for(var i=0;i<10;i++) {
console.log('微信公眾號：Robod');
}
上面這個例子中，首先 i 的值初始化為0，然後由條件表示式進行判斷，符合條件執行花括號裡的程式碼，然後執行操作表示式，再由條件表示式進行判斷，符合條件再次執行花括號裡的程式碼，直到不符合條件表示式時跳出迴圈。
第二種是while迴圈。
/*
while (條件表示式) {
//迴圈體
}
*/
var i = 0;
while (i < 10) {
console.log('微信公眾號：Robod');
i++;
}
首先判斷是否符合條件表示式，符合則執行花括號裡的程式碼，然後再進行判斷，直到不符合條件時跳出迴圈。
最後一種是do while迴圈。
/*
do {
//迴圈體
} while (條件表示式)
*/
var i = 0;
do {
console.log('微信公眾號：Robod');
} while (++i < 10);
和while迴圈不同的是，do while迴圈不管符不符合條件都會先執行一遍花括號裡的程式碼，然後再進行條件判斷，直到不符合條件時退出迴圈，相較於前兩種迴圈結構，do while迴圈用的就比較少了。
在執行迴圈的時候可能會遇到一種情況，在迴圈執行的時候，不符合某些條件時結束這一次迴圈直接執行下一次迴圈，可以使用continue關鍵詞。
//假設現在有個需求，按學號順序篩選出身高大於170的同學
//在下面這段程式碼中，遇到身高不符的同學時，跳過該名同學，下面的程式碼不執行，直接看下一名同學
for (var i = 1; i <= 50; i++) {
if (同學i的身高 < 170cm) {
continue;
}
//把這位同學拎出來
}
與continue相對應的是break，當遇到break的時候直接結束迴圈。
//現在有另一個需求，按照學號順序挑出一名身高在170以上的同學即可
//下面這段程式碼中，當找到有一個同學的身高在170以上時就使用break結束迴圈
for (var i = 0; i <= 50; i++) {
if (同學i的身高 >= 170cm) {
console.log('同學i');
break;
}
}
陣列
陣列，顧名思義，就是一組資料的集合，和Java不同的是，JavaScript的陣列可以存放任意型別的資料，陣列的建立有兩種方式，一種是使用new關鍵字建立，另一種是使用陣列字面量建立。
//1.使用new關鍵字
var array1 = new Array(); //建立了空陣列
var array2 = new Array(1, 'Robod', true); //建立陣列的時候新增陣列元素
//2.利用陣列字面量建立陣列
var array3 = []; //建立空陣列
var array4 = [1, 'Robod', true]; //建立陣列的時候新增陣列元素
每個陣列元素都有一個編號，這個編號就是索引，按照元素插入的順序從0開始遞增，通過陣列名[索引]的方式可以訪問陣列元素。
var array = new Array(1, 'Robod', true); //索引從0開始，從左向右索引依次是0,1,2
var name = array[1]; //獲取索引為1的值賦值給變數name，name='Robod'
通過陣列的length屬性可以獲取陣列的長度。
var array = new Array(1, 'Robod', true);
var len = array.length; //通過length屬性獲取陣列的長度
//結合迴圈可以實現陣列的遍歷
for (var i = 0; i < len; i++) {
console.log(arr[i]);
}
JavaScript中，陣列是可以實現擴容的，比如本來的容量是3，容量不夠用了，可以通過擴容的方式再向陣列裡新增資料。
var array = new Array(1, 'Robod', true); //陣列的容量是3
//1.通過修改陣列的length屬性實現陣列的擴容
array.length = 4; //將陣列容量修改為4，第四個元素的值是undefined
//2.直接通過陣列名[索引]的方式向陣列追加資料，也可以實現陣列的擴容
array[4] = '666'; //之前陣列容量是4，現在直接給第五個元素賦值即可將陣列容量擴充至5
函式
平常在寫程式碼的過程中，經常會在不同的地方編寫一些功能相同的程式碼，那麼這些程式碼可以將它們提取出來，封裝成一個個不同的函式，當需要用到這段某個函式時，直接呼叫就可以了，這樣可以減少很大一部分程式碼量。
函式需要先宣告再使用，宣告函式使用function關鍵字。
/*宣告函式：
function 函式名() {
函式體
}
*/
function f() { //宣告函式
console.log('Robod');
}
/*呼叫函式通過 函式名() 的方式*/
f(); //呼叫函式
?的例子中是沒有引數和返回值的情況，所謂引數就是在函式呼叫時給函式指定的條件，比如一個函式的作用是求兩個數的和，那麼在呼叫函式時肯定要把要相加的兩個數傳給函式；返回值則是函式執行完畢後給呼叫方一個反饋，用的是return關鍵字。
function add(a, b) { //a,b是形式引數，形參就是從呼叫方傳遞過來的
var result = a + b;
return result;
}
var sum = add(20, 30); //括號裡的是實際引數，實參就是傳遞給函式的
?的例子中形參和實參是一一對應的，JavaScript允許形參和實參個數不對應
function add(a, b) {
var result = a + b;
return result;
}
//1.實參個數大於形參時，多餘的實參將被捨棄，也就是40被捨棄了,結果是50
var sum1 = add(20, 30, 40);
//2.實參個數小於形參時，多餘的形參值為undefined，該例的計算結果為NaN
var sum2 = add(20);
JavaScript中還給我們提供了一個非常好用的東西——arguments，它是函式的內建物件，每個函式都有這樣一個內建物件，它的作用就是儲存了傳遞的所有實參，它採用了偽陣列的方式儲存實參，也就是說，我們在宣告函式時可以不指定形參，通過arguments就可以獲取到傳遞過來的所有實參。
//計算任意個數的引數的和
function add() {
var result = 0;
for (let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
var sum = add(20, 30, 40, 50);
?的例子中，arguments長?這樣
宣告函式還有另一種方式，就是函式表示式，又稱匿名函式。
var f = function () {
//函式體
}
f(); //通過 “變數名()” 的方式呼叫函式
這種方式宣告的函式沒有函式名，只有變數名，函式的呼叫是通過 變數名() 的方式，函式呼叫時也是可以攜帶引數的。兩種宣告方式差不多。
作用域
程式碼中所使用到的變數名都有一個適用範圍，超過範圍就訪問不了。就和WiFi訊號一樣，超過訊號覆蓋範圍就連線不上了。
全域性作用域
全域性作用域在任何一個地方都能使用，全域性變數會一直在記憶體中駐留，直到瀏覽器關閉時才會被銷燬。在函式外部使用var關鍵字宣告的變數就是全域性變數，它在任意一個函式中都可以訪問。
區域性作用域
區域性作用域又稱函式作用域，只有在函式的內部才可以訪問，在函式外面就訪問不了了。
function f() {
var a = 10;
}
console.log(a);
比如上面一段程式碼，在函式 f 內部定義了一個變數a，如果在函式外面去訪問它就會報錯。
塊級作用域
在其它很多語言都會有塊級作用域的概念，比如Java和C語言等，而JavaScript一開始是沒有塊級作用域的，直到ES6中才通過新增let關鍵字實現了塊級作用域。塊級作用域指的就是用花括號 “{}” 包裹起來的區域。
if (true) {
var a = 10;
let b = 20;
console.log(b); //20
}
console.log('a=' + a); //a是全域性變數，可以訪問
console.log('b=' + b); //b的作用域是塊級作用域，在花括號外面訪問不了
作用域鏈
JavaScript中，函式是可以巢狀宣告的，這樣就會存在一個問題，當多個函式中都存在同名變數，訪問的時候訪問的是哪一個變數？
function f1() {
var num = 10;
function f2() {
var num = 20;
function f3() {
console.log('f3:' + num); //20
}
f3();
console.log('f2:' + num); //20
}
f2();
console.log('f1:' + num); //10
}
f1();
每個函式都有一個作用域，如果函式內還有函式，那麼在這個作用域中又會誕生一個作用域，內部函式可以訪問外部函式的變數，這用用鏈式查詢決定哪些資料能被內部函式訪問，就稱為作用域鏈。
比如上面的例子，f3 中沒有名為num的變數，所以它就會去訪問上一級的 f2 中的變數num，如果還沒有的話就會再去上一級訪問，以此類推。而 f2 和 f1 中各自都有名為num的變數，所以就會訪問自己的變數num。
預解析
js引擎分為預解析和程式碼執行，預解析的意思就是會把js程式碼裡所有的var還有function提升到當前作用域的最前面。預解析分為變數預解析(變數提升)和函式預解析(函式提升)。
變數預解析
先看這樣一段程式碼?
console.log(a); //undefined
var a = 10;
它的列印結果是undefined，按理說列印的時候變數還沒有被宣告，應該報錯的呀，不是宣告瞭但未賦值的變數列印結果才是undefined嗎？因為變數提升是把變數的宣告提升到當前作用域的最前面，但是不提升賦值操作，就相當於下面這段程式碼：
var a;
console.log(a); //undefined
a = 10;
所以列印的結果才是undefined。
函式預解析
函式提升是把函式宣告提升到當前作用域最前面。
f();
function f() {
console.log('微信公眾號：Robod');
}
上面這段程式碼中的函式宣告是放在函式呼叫後面的，也可以正常執行，因為函式宣告被js引擎放在的前面，相當於下面這段程式碼：
function f() {
console.log('微信公眾號：Robod');
}
f();
但是用函式表示式的方式宣告函式可不是這樣，比如下面這段程式碼：
f();
var f = function () {
console.log('微信公眾號：Robod');
}
?這段程式碼執行起來的話則會報錯，函式表示式的預解析過程與變數預解析一樣，它相當於下面這段程式碼：
var f;
f();
f = function () {
console.log('微信公眾號：Robod');
}
所以函式表示式的呼叫要放在函式表示式的下面。
物件
在 JavaScript 中，物件是一組無序的相關屬性和方法的集合，所有的事物都是物件，例如字串、數值、陣列、函式等。物件就是一個具體的事物，物件由屬性和方法組成，屬性是物件的某些特質，是名詞；方法是物件的行為，是名詞。比如狗是物件嗎，狗不是物件，它是一個泛指，但是一條叫小明的狗就是一個物件，它擁有年齡，體重等屬性，也擁有吃飯，跑，跳等方法。
物件的建立有三種方式
字面量
建立物件使用的字面量是 “{}”，裡面包含了物件的屬性和方法。
/* 語法：
var 物件名 = {
屬性名1: 屬性值,
屬性名2: 屬性值, //用逗號隔開
......,
方法名1: function () {
...
},
方法名2: function (引數) {
...
}
......
}*/
var robod = {
name: 'robod',
height: 180,
yanzhi: 'max',
eat: function (rice) {
console.log('乾飯人！乾飯魂！乾飯都是人上人！');
}
}
物件屬性以及方法的呼叫?
//通過 “物件名.屬性名” 的方式呼叫物件的屬性
console.log(robod.name);
//通過 “物件名['屬性名']” 的方式呼叫物件的屬性
console.log(robod['yanzhi']);
//通過 “物件名.方法名()” 的方式呼叫物件的方法
robod.eat();
new Object()
Java裡建立物件用的是new關鍵字，JavaScript也可以new一個物件。
//先建立一個空物件
var robod = new Object();
//再通過 “=” 賦值的方式新增屬性及方法
robod.name = 'robod';
robod.height = 180;
robod.yanzhi = 'max';
robod.eat = function () {
console.log('乾飯人！乾飯魂！乾飯都是人上人！');
}
建構函式
前面兩種方式一次只能建立一個物件，如果有兩個物件的和方法是一樣的，只能複製程式碼了，這樣會使得程式碼比較臃腫。用建構函式的方式建立物件就變得比較簡單，這和Java類似，就是將物件中一些相同的屬性和方法抽出來封裝到一個建構函式中。
function LiangZai(name, height, yanzhi, rice) {
this.name = name; //this.屬性名 = 傳遞過來的引數
this.height = height;
this.yanzhi = yanzhi;
this.eat = function () { //this.方法名
console.log(rice);
}
}
var robod = new LiangZai('Robod', 180,
'max', '乾飯人！乾飯魂！乾飯都是人上人！');
var xiaoming = new LiangZai('小明', 175, '大帥比', '小米');
建構函式泛指某一大類，比如上面的建構函式就泛指靚仔這一類，而建立的物件則是一個具體的例項，比如上面建立了robod和xiaoming兩位靚仔，建構函式其實就相當於Java中Class的概念。
遍歷物件
有時候我們可能需要遍歷物件中的屬性以及屬性值，可以通過for in的方式，這種方式也是可以遍歷方法的
var robod = {
name: 'robod',
height: 180,
yanzhi: 'max',
eat: function () {
console.log('乾飯人！乾飯魂！乾飯都是人上人！');
}
}
for (const key in robod) { //in前面的key遍歷時代指屬性名和方法名，後面的是物件名
console.log(key);
console.log(robod[key]); //格式為 “物件名[key]”
}
內建物件
內建物件是指JavaScript中自帶的一些物件，這些物件提供了一些常用的方法，可以簡化我們的開發工作。
Math物件
Math封裝了一些數學中的常數和常用的方法，比如求絕對值，取整等。Math不用new，裡面的屬性和方法都是靜態的可以直接呼叫，相當於Java中的靜態類。
Math.PI; //圓周率
Math.floor(); //向下取整
Math.ceil(); //向上取整
Math.random(); //四捨五入就近取整
Math.abs(); //絕對值
Math.max(); //求最大值
Math.min(); //求最小值
日期物件 Date
Date裡封裝了一些和日期相關的方法，比如獲取一個日期字串，返回從1970年1月1日到現在的毫秒數等。Date物件在使用前要用new去進行例項化。
var date = new Date();
//獲取Date總的毫秒數，從1970年1月1日到現在過了多少毫秒
//1.valueOf()方法
date.valueOf();
//2.getTime()方法
date.getTime();
//3.now()方法，靜態方法，直接呼叫
Date.now();
//4.簡單的寫法
+new Date();
陣列物件 Array
Array物件在前面已經說過了，是用來建立陣列的，它裡面包含了一些和陣列相關的方法，比如刪除元素，新增元素等。
var arr = [1, 2, 3, 4, 5];
//末尾新增一個或多個元素
arr.push(6, 7); //1, 2, 3, 4, 5, 6, 7
//刪除陣列最後一個元素
arr.pop(); //1, 2, 3, 4, 5, 6
//向陣列的開頭新增一個或多個元素
arr.unshift(-1, 0); //-1, 0, 1, 2, 3, 4, 5, 6
//刪除陣列的第一個元素
arr.shift(); //0, 1, 2, 3, 4, 5, 6
//陣列中給定元素的第一個索引,不存在返回-1
console.log(arr.indexOf(3));
arr.indexOf(3); //3
//陣列中給定元素的最後一個索引,不存在返回-1
console.log(arr.lastIndexOf(3)); //3
//把陣列轉換成字串，用逗號分隔每一項
console.log(arr.toString()); //0,1,2,3,4,5,6
//把陣列轉換成字串，用指定分隔符分隔每一項
console.log(arr.join('￥$￥')); //0￥$￥1￥$￥2￥$￥3￥$￥4￥$￥5￥$￥6
字串物件
JavaScript中的字串和Java中的字串一樣，也是具有不可變性的，所以字串物件中的所有方法都不會修改字串本身，操作完成後會返回一個新的字串。
var s = '乾飯人，乾飯魂，乾飯都是人上人';
//查詢指定內容的下標,indexOf('要查詢的字元或字串', 從哪個位置開始查詢(可省略))
console.log(s.indexOf('飯', 3)); //5
//從後往前查詢，lastIndexOf('要查詢的字元或字串', 從哪個位置開始查詢(可省略))
console.log(s.lastIndexOf('乾飯', 5)); //4
//獲取指定位置的字元，charAt(字元的索引號)
console.log(s.charAt(6)); //魂
//獲取指定位置的字元,str[索引號]
console.log(s[6]); //魂
//拼接兩個或多個字串，等同於 “+”
'乾飯人'.concat('乾飯魂', '乾飯都是人上人'); //乾飯人乾飯魂乾飯都是人上人
//擷取字串，substr(起始位置的索引號,擷取的字元個數)
console.log(s.substr(4, 3)); //乾飯魂
//擷取字串，slice(起始位置，結束位置(不包含結束位置的字元))
console.log(s.slice(4, 7)); //乾飯魂
//替換字元，replace('被替換的字元或字串','替換為的字元或字串')，只會替換第一個
console.log(s.replace('飯', 'rice')); //幹rice人，乾飯魂，乾飯都是人上人
//轉換為陣列，split('分隔符')
console.log(s.split('，')); //["乾飯人", "乾飯魂", "乾飯都是人上人"]
文件查詢
上面我所提到的方法只是一小部分，更多的內容可以參考MDN的網站（https://developer.mozilla.org/zh-CN/），只要在搜尋框內搜尋對應的關鍵字就會出現對應的內容，上面有詳細的屬性、方法及用法等的說明。
但是直接使用MDN的網站還是有些不太方便，有一種更加簡單的方法。我在之前的《寫文章一年了，我用到的工具都在這兒了！》一文中安利過一款非常好用的軟體——uTools。它裡面有一款外掛叫做JavaScript 文件，通過這款外掛就可以很迅速的查詢MDN中的內容。
看見沒，只要按快捷鍵Alt+空格調出uTools，然後輸入js後按回車就會開啟JavaScript 文件外掛，之後再輸入想要搜尋的內容就是在搜尋MDN的內容了。
總結
其實之前就學過JavaScript，但是好長時間沒看了，當時也沒做筆記，好多東西都忘了，所以這幾天趁著放假趕緊把JavaScript重溫了一下，然後寫了篇筆記記錄一下JavaScript中的知識點，怕時間長了又忘了。這一篇主要是將JavaScript的基礎語法的，操作頁面元素的內容會放在下一篇文章中。文中有什麼不對的地方歡迎指正！
碼字不易，可以的話，給我來個
點贊，收藏，關注如果你喜歡我的文章，歡迎關注微信公眾號 『 R o b o d 』
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
連結：https://blog.csdn.net/weixin_43461520/article/details/113853339
