Nice！JavaScript基礎語法知識都在這兒了-有解無憂

好好學習，天天向上

本文已收錄至我的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="https://www.cnblogs.com/robod/archive/2021/02/18/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

?????轉載請注明出處！?????

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/260928.html

標籤：其他

上一篇：一篇文章精通CSS文本的問題，值得一看。

下一篇：教你玩轉CSS Overflow