主頁 > 前端設計 > Nice!JavaScript基礎語法知識都在這兒了

Nice!JavaScript基礎語法知識都在這兒了

2021-02-20 11:25:03 前端設計

好好學習,天天向上


本文已收錄至我的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號房間,

變數在使用的程序中需要先宣告再賦值,宣告變數使用 varlet 關鍵字,它們兩個的區別在于作用域的不同,當變數宣告后,計算機會自動給變數分配記憶體空間,不需要我們手動地去分配,宣告變數后再使用賦值號 “=” 為變數賦值,

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宣告的時候賦值為nullnull
  • 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進行運算的時候表示為10

var a = true;
var b = 1 < 0; //false
var c = 5 + a - b * 3; //6
  • Undefined 和 Null

一個只宣告但未賦值的變數其型別就是 UndefinedNull則表示一個空物件,就是什么都沒有的意思,

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, '大帥比', '小米');

建構式泛指某一大類,比如上面的建構式就泛指靚仔這一類,而創建的物件則是一個具體的實體,比如上面創建了robodxiaoming兩位靚仔,建構式其實就相當于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/qianduan/261397.html

標籤:其他

上一篇:ant design vue中a-table固定頭和列后出現行內容不對齊的情況

下一篇:html顯示時間,并且實時重繪(詳細代碼)

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more