好好學習，天天向上
本文已收錄至我的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
