javascript
学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)
1、編程語言、ECMA、JavaScript、瀏覽器的發(fā)展史
1.1 編程語言
編程
- 編程：
- 就是讓計算機為解決某個問題而使用某種程序設(shè)計語言編寫程序代碼，并最終得到結(jié)果的過程。
- 計算機程序：
- 就是計算機所執(zhí)行的一系列的指令集合，而程序全部都是用我們所掌握的語言來編寫的，所以人們要控制計算機一定要通過計算機語言向計算機發(fā)出命令。
計算機語言
-
計算機語言指用于人與計算機之間通訊的語言，它是人與計算機之間傳遞信息的媒介。
-
計算機語言的種類非常的多，總的來說可以分成機器語言，匯編語言和高級語言三大類。
-
實際上計算機最終所執(zhí)行的都是 機器語言，它是由“0”和“1”組成的二進制數(shù)，二進制是計算機語言的基礎(chǔ)。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1FUILawB-1619832519409)(G:/BaiduNetdiskDownload/【00】源碼+課件+常用軟件/07-10 JavaScript網(wǎng)頁編程/01-JavaScript基礎(chǔ)語法資料/JavaScript基礎(chǔ)第01天/4-筆記/images/圖片1.png)]
編程語言
編程語言：可以通過類似于人類語言的“語言”來控制計算機，讓計算機為我們做事情，這樣的語言就叫做編程語言（Programming Language）。編程語言是用來控制計算機的一系列指令，它有固定的格式和詞匯（不同編程語言的格式和詞匯不一樣），必須遵守。如今通用的編程語言有兩種形式：匯編語言和高級語言。| 匯編語言 | 匯編語言和機器語言實質(zhì)是相同的，都是直接對硬件操作，只不過指令采用了英文縮寫的標識符，容易識別和記憶。 |
| 高級語言 | 高級語言主要是相對于低級語言而言，它并不是特指某一種具體的語言，而是包括了很多編程語言，常用的有C語言、C++、Java、C#、Python、PHP、JavaScript、Go語言、Objective-C、Swift等。 |
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jX4d8dFV-1619832519419)(G:/BaiduNetdiskDownload/【00】源碼+課件+常用軟件/07-10 JavaScript網(wǎng)頁編程/01-JavaScript基礎(chǔ)語法資料/JavaScript基礎(chǔ)第01天/4-筆記/images/圖片2.png)]
翻譯器
高級語言所編制的程序不能直接被計算機識別，必須經(jīng)過轉(zhuǎn)換才能被執(zhí)行，為此，我們需要一個翻譯器。翻譯器可以將我們所編寫的源代碼轉(zhuǎn)換為機器語言，這也被稱為二進制化。編程語言和標記語言區(qū)別
| 編程語言 | 編程語言有很強的邏輯和行為能力。在編程語言里, 你會看到很多 if else 、for 、while等具有邏輯性和行為能力的指令，這是主動的。 |
| 標記語言 | 標記語言（html）不用于向計算機發(fā)出指令，常用于格式化和鏈接。標記語言的存在是用來被讀取的, 他是被動的。 |
總結(jié)
1.2 ECMA
? ECMAScript是由網(wǎng)景的布蘭登·艾奇開發(fā)的一種腳本語言的標準化規(guī)范；最初命名為Mocha，后來改名為LiveScript，最后重命名為JavaScript。1995年12月，升陽與網(wǎng)景聯(lián)合發(fā)表了JavaScript。1996年11月，網(wǎng)景公司將JavaScript提交給歐洲計算機制造商協(xié)會進行標準化。ECMA-262的第一個版本于1997年6月被Ecma組織采納。ECMA Script是ECMA-262標準化的腳本語言的名稱。盡管JavaScript和JScript與ECMAScript兼容，但包含超出ECMA Script的功能。
? ECMAScript是一種可以在宿主環(huán)境中執(zhí)行計算并能操作可計算對象的基于對象的程序設(shè)計語言。ECMAScript最先被設(shè)計成一種Web腳本語言，用來支持Web頁面的動態(tài)表現(xiàn)以及為基于Web的客戶機—服務(wù)器架構(gòu)提供服務(wù)器端的計算能力。但作為一種腳本語言， ECMAScript具備同其他腳本語言一樣的性質(zhì)，即“用來操縱、定制一個已存在系統(tǒng)所提供的功能，以及對其進行自動化”。
1.3 JavaScript
? JavaScript（簡稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發(fā)Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript 基于原型編程、多范式的動態(tài)腳本語言，并且支持面向?qū)ο蟆⒚钍胶吐暶魇?#xff08;如函數(shù)式編程）風格。 [1]
? JavaScript在1995年由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計實現(xiàn)而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。 [2]
? JavaScript的標準是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日，ECMA國際組織發(fā)布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES2015。
運行模式
JavaScript是一種屬于網(wǎng)絡(luò)的高級腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現(xiàn)自身的功能的。 [6]
1.4 瀏覽器
瀏覽器是用來檢索、展示以及傳遞Web信息資源的應(yīng)用程序。Web信息資源由統(tǒng)一資源標識符( Uniform Resource Identifier，URI)所標記，它是一張網(wǎng)頁、一張圖片、一段視頻或者任何在Web上所呈現(xiàn)的內(nèi)容。使用者可以借助超級鏈接( Hyperlinks)，通過瀏覽器瀏覽互相關(guān)聯(lián)的信息。 [1]
瀏覽器窗口各部分功能如下。
1、地址欄：用于輸入網(wǎng)站的地址，IE瀏覽器通過識別地址欄中的信息，正確連接用戶要訪問的內(nèi)容。如要登錄“網(wǎng)址之家”網(wǎng)，只需在地址欄中輸入網(wǎng)址之家的網(wǎng)址：http://www.hao123.com，然后按[Enter]鍵或單擊地址欄右側(cè)的按鈕即可。在地址欄中還附帶了IE中常用命令的快捷按鈕，如刷新?、停止(x)等，前進、后退按鈕設(shè)置在地址欄前方 [2] 。
2、菜單欄：由“文件” “編輯” “查看” “收藏夾” “工具”和“幫助”菜單組成。每個菜單中包含了控制IE工作的相關(guān)命令選項，這些選項包含了瀏覽器的所有操作與設(shè)置功能 [2] 。
3、選項卡：從Internet Explorer8版本開始，IE瀏覽器可以使用多選項卡瀏覽方式，以選項卡的方式打開網(wǎng)站的頁面 [2] 。
4、頁面窗口：是IE瀏覽器的主窗口，訪問的網(wǎng)頁內(nèi)容顯示在此。頁面中有些文字或?qū)ο缶哂谐溄訉傩?#xff0c;當鼠標指針放上去之后會變成手狀，單擊鼠標左鍵，瀏覽器就會自動跳轉(zhuǎn)到該鏈接指向的網(wǎng)址；單擊鼠標右鍵，則會彈出快捷菜單，可以從中選擇要執(zhí)行的操作命令 [2] 。
5、狀態(tài)欄：實時顯示當前的操作和下載Web頁面的進度情況。正在打開網(wǎng)頁時，還會顯示網(wǎng)站打開的進度。另外，通過狀態(tài)欄還可以縮放網(wǎng)頁 [2] 。
瀏覽器的種類很多，但是主流的內(nèi)核只有四種，各種不同的瀏覽器，就是在主流內(nèi)核的基礎(chǔ)上，添加不同的功能構(gòu)成 [3] 。
1、Trident內(nèi)核
代表產(chǎn)品為Internet Explorer，又稱其為IE內(nèi)核。Trident（又稱為MSHTML），是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器有：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 [3] 。
2、Gecko內(nèi)核
代表作品為Mozilla Firefox。Gecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎，是最流行的排版引擎之一，僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9 [3] 。
3、WebKit內(nèi)核
代表作品有Safari、Chrome。WebKit是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，主要用于Mac OS系統(tǒng)，它的特點在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點是對網(wǎng)頁代碼的兼容性不高，導(dǎo)致一些編寫不標準的網(wǎng)頁無法正常顯示 [3] 。
4、Presto內(nèi)核
代表作品Opera。Presto是由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態(tài)功能，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版 [3] 。
2、基本語法：值、變量、運算、語句等等
2.1 變量
? 聲明變量
/*** 1、聲明變量* var 是一個JS關(guān)鍵字，用來聲明變量(variable),使用該關(guān)鍵字聲明變量后，計算機會自動為變量分配內(nèi)存空間* age 是程序員定義的變量名，通過變量名就可以訪問分配的空間* var 變量名;*/ var age;? 賦值
/*** 2、賦值* 變量賦值 變量名=值;*/ age=18;? 變量初始化
/*** 3、變量初始化* 聲明變量并賦值，就是變量的初始化*/var name='zs'; **變量的語法擴展** /*** 4、變量的語法擴展* 1.更新變量* 2.同時聲明多個變量* 3.聲明變量的特殊情況*/ var num=18; num=81; // 變量重新被賦值，原值被覆蓋var age=10,name='zs',sex='Man'; // 同時聲明多個變量，使用英文逗號隔開var a; console.log(a); // 只聲明，不賦值 結(jié)果：undefined console.log(b); // 不聲明，不復(fù)制，直接使用 結(jié)果：報錯 c=10; console.log(c); // 不聲明，只賦值 結(jié)果：10? 變量的命名規(guī)則
/*** ## 變量的命名規(guī)則* 由字母(A-Z a-z)、數(shù)字(0-9)、下劃線(_)、美元符號($)組成。* 嚴格區(qū)分大小寫。* 不能以數(shù)字開頭。* 不能是關(guān)鍵字、保留字。* 變量名必須有意義。 * 遵守駝峰式命名法。首字母小寫，后面單詞的首字母需要大寫*/ // Good: var userAge,num01,_name; // true var app ; var App; //屬于兩個變量 var userName; //true （駝峰式命名法） // Bad: var 18age; // false var var,for,while; //false var MMD,BBD,nl; // false nl=>age2.2 值
? 變量(值)是用來存儲值的所在處，它們有名字和數(shù)據(jù)類型。變量的數(shù)據(jù)類型決定了如何將代表這些值的位存儲到計算機的內(nèi)存中。JavaScript 是一種弱類型或者說動態(tài)語言
JS 把數(shù)據(jù)類型分為兩類：
- 簡單數(shù)據(jù)類型 （Number,String,Boolean,Undefined,Null）
- 復(fù)雜數(shù)據(jù)類型 （object)
基本數(shù)據(jù)類型
JavaScript 中的簡單數(shù)據(jù)類型及其說明如下：
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DiXQfTYH-1619832519424)(G:/BaiduNetdiskDownload/【00】源碼+課件+常用軟件/07-10 JavaScript網(wǎng)頁編程/01-JavaScript基礎(chǔ)語法資料/JavaScript基礎(chǔ)第01天/4-筆記/images/圖片16.png)]
-
數(shù)字型 Number
var age=21; // 整數(shù) var Age=21.3747; // 小數(shù)數(shù)字型進制
/*** 1、數(shù)字型進制* 最常見的進制有二進制、八進制、十進制、十六進制。*/ var num1=07; // 對用十進制7 var num3=080; // 十進制=>80 var num=0xA; // 十六進制數(shù)字序列范圍：0~9以及A~F數(shù)字型范圍
/*** 2、數(shù)字型范圍* 最大值：Number.MAX_VALUE* 最小值：Number.MIN_VALUE*/ console.log(Number.MAX_VALUE); // 結(jié)果：1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 結(jié)果：5e-32數(shù)字型的三個特殊值
/*** 3、數(shù)字型的三個特殊值* Infinity => 無窮大* -Infinity => 無窮小* NaN => Not a Number*/ console.log(Infinity > num); // 大于任何數(shù)值 console.log(-Infinity < num); // 小于任何數(shù)值 console.log(NaN('a')); // 不是一個數(shù)值isNaN
/*** 4、isNaN* 用來判斷一個變量是否為非數(shù)字的類型，返回true或者false*/ var userAge=21; console.log(isNaN(userAge)); // false,21 不是一個非數(shù)字 var userName='andy'; console.log(userName); // true,"andy" 是一個非數(shù)字 -
字符串型 String
字符串引號嵌套
/*** 1、字符串引號嵌套* JS 可以使用單引號嵌套雙引號，或者雙引號嵌套單引號 （外雙內(nèi)單，外單內(nèi)雙）*/ // Good: var strMsg='我們是"苦逼的"程序員'; var strMsg2="我們是'高尚的'工程師"; // Bad: var badQuotes='What on earth?"; // 報錯，不能單雙引號搭配字符串轉(zhuǎn)義符
/*** 2.字符串轉(zhuǎn)義符* 類似HTML里面的特殊字符，字符串中也有特殊字符，稱為轉(zhuǎn)義符。* 轉(zhuǎn)義符都是 \ 開頭的，常用的轉(zhuǎn)義符及其說明如下：* \n => 換行符* \\ => 斜杠* ' => 單引號* " => 雙引號* \t => tab縮進* \b => 空格*/ console.log('\tThis\bis\bthe\bjavascript,\nHelllo\bworld!');字符串長度
/*** 3、字符串長度* 字符串是由若干個字符組成的，這些字符的數(shù)量就是字符串的長度。* 通過自負床的length屬性可以獲取整個字符串的長度。*/ var strMsg="我們是帥氣多金的程序員！"; console.log(strMsg.length); // 12字符串拼接
/*** 4.字符串拼接* 多個字符串之間可以使用+進行拼接，* 拼接方式：字符串+任何類型=拼接之后的字符串* 拼接前會把字符串相加大的任何類型轉(zhuǎn)成字符串，再拼接成一個新的字符串* 口訣：數(shù)值相加，字符相連*/ // 字符串 "相加" console.log('hello'+' '+'world'); // hello world // 數(shù)值字符串 "相加" console.log('100'+'100'); // 100100 // 數(shù)值字符串 + 數(shù)值 console.log('110'+120); // 110120字符串拼接加強
/*** 5、字符串拼接加強* 經(jīng)常會將字符串和變量來拼接，變量可以很方便的修改里面的值* 變量是不能添加引號的，因為加引號的變量會變成字符串* 如果變量兩側(cè)都有字符串拼接，口訣：引引相加，刪掉數(shù)字，變量寫在中間*/ // Good: console.log('小花' + 18); // 只要有字符就會相連 var age = 18; console.log('小花' + age); // pink老師18 console.log('小花' + age + '歲啦'); // pink老師18歲啦 // Bad: console.log('小花age歲啦'); // 這樣不行哦布爾型Boolean
/*** 6、布爾型Boolean* 布爾型有兩個值：true||false,其中true表示真（對），false表示假（錯）* 布爾型和數(shù)字型相加的時候，true為值1，false為值0。*/ console.log(true+1); // 2 console.log(false+1); // 1Undefined和 Null
/*** 7、undefined和Null*/ // 一個聲明后沒有被賦值的變量會有一個默認值undfined(如果進行相連或相加時，結(jié)果如下：) var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN// 一個聲明變量給null值，里面存的值為空 var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1
類型轉(zhuǎn)換
使用表單、prompt 獲取過來的數(shù)據(jù)默認是字符串類型的，此時就不能直接簡單的進行加法運算，而需要轉(zhuǎn)換變量的數(shù)據(jù)類型。
轉(zhuǎn)換為字符串
| toString() | 轉(zhuǎn)成字符串 | var num=1;alert(num.toString()); |
| String() 強制轉(zhuǎn)換 | 轉(zhuǎn)成字符串 | var num=1;alert(String(num)); |
| + 拼接字符串 | 和字符串拼接的結(jié)構(gòu)都是字符串 | var num=1;alert(num+‘字符串’)； |
-
toString() 和 String() 使用方式不一樣。
-
三種轉(zhuǎn)換方式，更多第三種加號拼接字符串轉(zhuǎn)換方式， 這一種方式也稱之為隱式轉(zhuǎn)換。
轉(zhuǎn)換為數(shù)字型（重點）
| parseInt(string) | 將string類型轉(zhuǎn)成整數(shù)數(shù)值型 | parseInt(‘78’) |
| parseFloat(string) | 將string類型轉(zhuǎn)成浮點數(shù)值型 | parseFloat(‘78.21’) |
| Number(string) 強制轉(zhuǎn)換 | 將string類型轉(zhuǎn)成數(shù)值型 | Number(‘12’) |
| （- * /） js 隱式轉(zhuǎn)換 | 利用算術(shù)運算符轉(zhuǎn)換為數(shù)值型 | ‘12’-0 |
- 注意 parseInt 和 parseFloat 單詞的大小寫，這2個是重點
- 隱式轉(zhuǎn)換是我們在進行算數(shù)運算的時候，JS 自動轉(zhuǎn)換了數(shù)據(jù)類型
? 轉(zhuǎn)換為布爾型
| Boolean()函數(shù) | 其他類型轉(zhuǎn)成布爾值 | Boolean(‘true’) |
-
代表空、否定的值會被轉(zhuǎn)換為 false ，如 ‘’、0、NaN、null、undefined
-
其余值都會被轉(zhuǎn)換為 true
2.3 運算
算數(shù)運算符
-
算術(shù)運算符概述
概念：算術(shù)運算使用的符號，用于執(zhí)行兩個變量或值的算術(shù)運算。
運算符描述實例 + 加+ 10 + 20 = 30 - =減 10 - 20 = -10 * 乘 10 * 20 = 200 / 除 10 / 20 = 0.5 % 取余（取模） 9 % 2 = 1 -
浮點數(shù)的精度問題
/*** 浮點數(shù)精度問題* 浮點數(shù)值的最高精度是17為小數(shù)，但在進行算術(shù)計算時其精確度遠遠不如整數(shù)* 注意：不要判斷兩個浮點數(shù)的算術(shù)結(jié)果是否相等*/ var result=0.1 + 0.2; // 結(jié)果：0.30000000000000004 不是0.3 console.log(0.07 * 100); // 結(jié)果：7.000000000000001 不是7 -
表達式和返回值
表達式：是由數(shù)字、運算符、變量等以能求得數(shù)值的有意義排列方法所得的組合
簡單理解：是由數(shù)字、運算符、變量等組成的式子
表達式最終都會有一個結(jié)果，返回給開發(fā)者，稱為返回值
遞增和遞減運算符
-
遞增和遞減運算符概述
如果需要反復(fù)給數(shù)字變量添加或減去1，可以使用遞增（++）和遞減（ – ）運算符來完成。
/*** 在JavaScript中，遞增（++）和遞減（--）既可放在變量前面，還可放在變量后面。* 放在變量前面時，我們可以稱為前置遞增（遞減）運算符，* 放在變量后面時，我們可以稱為后置遞增（遞減）運算符。* 注：遞增和遞減運算符必須和變量配合使用。*/ -
遞增運算符
- 前置遞增 / 遞減 運算符
- 后置遞增 / 遞減運算符
比較運算符
-
比較運算符概述
概念：比較運算符（關(guān)系運算符）是兩個數(shù)據(jù)進行比較時所使用的運算符，比較運算后，會返回一個布爾值（true / false）作為比較運算的結(jié)果。
運算符名稱說明案例結(jié)果 < 小于 1 < 2 true > 大于 1 > 2 false <= 小于等于 2 <= 2 true >= 大于等于 3 >= 2 true == 判等 17 == 17 true != 不等 17 != 17 false === !== 全等/不全等 37 === ‘37’ false -
等號比較
符號作用用法 = 賦值 把右邊的 值給左邊 == 判斷 判斷兩邊的值是否相等（注意有隱式轉(zhuǎn)換） === 全等 判斷兩邊的值和數(shù)據(jù)類型是否完全相同
邏輯運算符
-
邏輯運算符概述
概念：邏輯運算符是用來進行布爾值運算的運算符，其返回值也是布爾值。后面開發(fā)中經(jīng)常用于多個條件的判斷
邏輯運算符說明案例 && 邏輯與，簡稱 ’與‘ and true && false || 邏輯或，簡稱 ’或‘ or true || false ！ 邏輯非，簡稱 ’非‘ not !true -
邏輯與&&
兩邊都是 true才返回 true，否則返回 false
?
-
邏輯或 ||
兩邊都是 true才返回 true，否則返回 false
?
-
邏輯非 ！
邏輯非（!）也叫作取反符，用來取一個布爾值相反的值，如 true 的相反值是 false
var isOk = !true; console.log(isOk); // false -
短路運算（邏輯中斷）
短路運算的原理：當有多個表達式（值）時,左邊的表達式值可以確定結(jié)果時,就不再繼續(xù)運算右邊的表達式的值;
-
邏輯與
/*** 邏輯與* 語法：表達式1 && 表達式2* - 如果表達式1的值為真，則返回表達式2* - 如果表達式1的值為假，則返回表達式1*/ console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(123 && 456 && 789); // 789 -
邏輯或
/** * 邏輯或 * 語法：表達式1 || 表達式2 * - 如果表達式1的值為真，則返回表達式1 * - 如果表達式1的值為假，則返回表達式2 */ console.log(123 || 456); // 123 console.log(0 || 456); // 456 console.log(123 || 456 || 789); // 123
-
賦值運算符
概念：用來把數(shù)據(jù)賦值給變量的運算符。| = | 直接賦值 | var userName=‘值’； |
| +=、-= | 加、減一個數(shù)后，再賦值 | var age=10; age+=5; // 15 |
| *=、/=、%= | 乘、除、取模 后，再賦值 | var age=2;age*=5；// 10 |
運算符優(yōu)先級
| 1 | 小括號 | （） |
| 2 | 一元運算符 | ++，–，！ |
| 3 | 算術(shù)運算符 | 先*， /， % ；后 +， - |
| 4 | 關(guān)系運算符 | > ， = ，<， <= |
| 5 | 相等運算符 | == ， !=， === ， !== |
| 6 | 邏輯運算符 | 先 &&， 后 || |
| 7 | 賦值運算符 | = |
| 8 | 逗號運算符 | ， |
- 一元運算符里面的邏輯非優(yōu)先級很高
- 邏輯與比邏輯或優(yōu)先級高
2.4 語句
順序流程控制
順序結(jié)構(gòu)是程序中最簡單、最基本的流程控制，它沒有特定的語法結(jié)構(gòu)，程序會按照代碼的先后順序，依次執(zhí)行，程序中大多數(shù)的代碼都是這樣執(zhí)行的。
?
分支流程控制
-
分支結(jié)構(gòu)
由上到下執(zhí)行代碼的過程中，根據(jù)不同的條件，執(zhí)行不同的路徑代碼（執(zhí)行代碼多選一的過程），從而得到不同的結(jié)果
JS 語言提供了兩種分支結(jié)構(gòu)語句：if 語句、switch 語句
-
if 語句
- 語法結(jié)構(gòu)
-
執(zhí)行流程
-
if else語句（雙分支語句）
-
語法結(jié)構(gòu)
// 條件成立 執(zhí)行 if 里面代碼，否則執(zhí)行else 里面的代碼 if (條件表達式) {// [如果] 條件成立執(zhí)行的代碼 } else {// [否則] 執(zhí)行的代碼 } -
執(zhí)行流程
-
-
if else if 語句(多分支語句)
-
語法結(jié)構(gòu)
// 適合于檢查多重條件。 if (條件表達式1) {語句1； } else if (條件表達式2) {語句2； } else if (條件表達式3) {語句3；.... } else {// 上述條件都不成立執(zhí)行此處代碼 } -
執(zhí)行邏輯
-
三元表達式
-
語法結(jié)構(gòu)
表達式1 ? 表達式2 : 表達式3; -
執(zhí)行思路
- 如果表達式1為 true ，則返回表達式2的值，如果表達式1為 false，則返回表達式3的值
- 簡單理解： 就類似于 if else （雙分支） 的簡寫
switch分支流程控制
-
語法結(jié)構(gòu)
switch 語句也是多分支語句，它用于基于不同的條件來執(zhí)行不同的代碼。當要針對變量設(shè)置一系列的特定值的選項時，就可以使用 switch。
/*** switch分支* switch 語句也是多分支語句，它用于基于不同的條件來執(zhí)行不同的代碼。* 當要針對變量設(shè)置一系列的特定值的選項時，就可以使用 switch。* 注意： 執(zhí)行case 里面的語句時，如果沒有break，則繼續(xù)執(zhí)行下一個case里面的語句。*/ switch( 表達式 ){ case value1:// 表達式 等于 value1 時要執(zhí)行的代碼break;case value2:// 表達式 等于 value2 時要執(zhí)行的代碼break;default:// 表達式 不等于任何一個 value 時要執(zhí)行的代碼 }-
switch ：開關(guān) 轉(zhuǎn)換 ， case ：小例子 選項
-
關(guān)鍵字 switch 后面括號內(nèi)可以是表達式或值， 通常是一個變量
-
關(guān)鍵字 case , 后跟一個選項的表達式或值，后面跟一個冒號
-
switch 表達式的值會與結(jié)構(gòu)中的 case 的值做比較
-
如果存在匹配全等(===) ，則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行，并在遇到 break 時停止，整個 switch 語句代碼執(zhí)行結(jié)束
-
如果所有的 case 的值都和表達式的值不匹配，則執(zhí)行 default 里的代碼
-
-
switch 語句和 if else if 語句的區(qū)別
- 一般情況下，它們兩個語句可以相互替換
- switch…case 語句通常處理 case為比較確定值的情況， 而 if…else…語句更加靈活，常用于范圍判斷(大于、等于某個范圍)
- switch 語句進行條件判斷后直接執(zhí)行到程序的條件語句，效率更高。而if…else 語句有幾種條件，就得判斷多少次。
- 當分支比較少時，if… else語句的執(zhí)行效率比 switch語句高。
- 當分支比較多時，switch語句的執(zhí)行效率比較高，而且結(jié)構(gòu)更清晰。
循環(huán)
1. for循環(huán)
-
語法結(jié)構(gòu)
/*** for循環(huán)* 執(zhí)行過程：* 1.初始化變量，初始化操作在整個 for 循環(huán)只會執(zhí)行一次。* 2.執(zhí)行條件表達式，如果為true，則執(zhí)行循環(huán)體語句，否則退出循環(huán)，循環(huán)結(jié)束。*/ for(初始化變量; 條件表達式; 操作表達式 ){//循環(huán)體 }名稱作用 初始化變量 通常被用于初始化一個計數(shù)器，該表達式可以使用 var 關(guān)鍵字聲明新的變量，這個變量幫我們來記錄次數(shù)。 條件表達式 用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán)，否則退出循環(huán)。 操作表達式 用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán)，否則退出循環(huán)。
斷點調(diào)試：
斷點調(diào)試是指自己在程序的某一行設(shè)置一個斷點，調(diào)試時，程序運行到這一行就會停住，然后你可以一步一步往下調(diào)試，調(diào)試過程中可以看各個變量當前的值，出錯的話，調(diào)試到出錯的代碼行即顯示錯誤，停下。斷點調(diào)試可以幫助觀察程序的運行過程 斷點調(diào)試的流程： 1、瀏覽器中按 F12--> sources -->找到需要調(diào)試的文件-->在程序的某一行設(shè)置斷點 2、Watch: 監(jiān)視，通過watch可以監(jiān)視變量的值的變化，非常的常用。 3、摁下F11，程序單步執(zhí)行，讓程序一行一行的執(zhí)行，這個時候，觀察watch中變量的值的變化。2. 雙重for循環(huán)
-
雙重 for 循環(huán)概述
循環(huán)嵌套是指在一個循環(huán)語句中再定義一個循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)語句中，可以再嵌套一個for 循環(huán)，這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán)。
-
雙重 for 循環(huán)語法
/*** 雙重for循環(huán)* 1 內(nèi)層循環(huán)可以看做外層循環(huán)的循環(huán)體語句* 2 內(nèi)層循環(huán)執(zhí)行的順序也要遵循 for 循環(huán)的執(zhí)行順序 * 3 外層循環(huán)執(zhí)行一次，內(nèi)層循環(huán)要執(zhí)行全部次數(shù)*/ for (外循環(huán)的初始; 外循環(huán)的條件; 外循環(huán)的操作表達式) {for (內(nèi)循環(huán)的初始; 內(nèi)循環(huán)的條件; 內(nèi)循環(huán)的操作表達式) { 需執(zhí)行的代碼;} } -
for 循環(huán)小結(jié)
- for 循環(huán)可以重復(fù)執(zhí)行某些相同代碼
- for 循環(huán)可以重復(fù)執(zhí)行些許不同的代碼，因為我們有計數(shù)器
- for 循環(huán)可以重復(fù)執(zhí)行某些操作，比如算術(shù)運算符加法操作
- 隨著需求增加，雙重for循環(huán)可以做更多、更好看的效果
- 雙重 for 循環(huán)，外層循環(huán)一次，內(nèi)層 for 循環(huán)全部執(zhí)行
- for 循環(huán)是循環(huán)條件和數(shù)字直接相關(guān)的循環(huán)
3. while循環(huán)
while語句的語法結(jié)構(gòu)如下：
/*** while 循環(huán)* 執(zhí)行思路：* 1 先執(zhí)行條件表達式，如果結(jié)果為 true，則執(zhí)行循環(huán)體代碼；如果為 false，則退出循環(huán)，執(zhí)行后面代碼* 2 執(zhí)行循環(huán)體代碼* 3 循環(huán)體代碼執(zhí)行完畢后，程序會繼續(xù)判斷執(zhí)行條件表達式，如條件仍為true，則會繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為 false 時，整個循環(huán)過程才會結(jié)束* 注：使用 while 循環(huán)時一定要注意，它必須要有退出條件，否則會成為死循環(huán)*/ while (條件表達式) {// 循環(huán)體代碼 }4. do-while循環(huán)
do… while 語句的語法結(jié)構(gòu)如下：
/*** do-while循環(huán)* 執(zhí)行思路：* 1 先執(zhí)行一次循環(huán)體代碼 * 2 再執(zhí)行條件表達式，如果結(jié)果為 true，則繼續(xù)執(zhí)行循環(huán)體代碼，如果為 false，則退出循環(huán)，繼續(xù)執(zhí)行后面代碼* 注：先再執(zhí)行循環(huán)體，再判斷，do…while循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼*/ do {// 循環(huán)體代碼 - 條件表達式為 true 時重復(fù)執(zhí)行循環(huán)體代碼 } while(條件表達式);5. continue、break
continue 關(guān)鍵字用于立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)（本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次）。
3、各種類型的函數(shù)、參數(shù)與原理
函數(shù)的聲明方式
-
自定義函數(shù)方式（命名函數(shù)）
// 函數(shù)關(guān)鍵字function自定義函數(shù)方式 function fn(){...} fn();// 函數(shù)調(diào)用（函數(shù)體上下都可以用）- 因為有名字，所以也被稱為命名函數(shù)
- 調(diào)用函數(shù)的代碼既可以放到聲明函數(shù)的前面，也可以放在聲明函數(shù)的后面
-
函數(shù)表達式方式（匿名函數(shù)）
//利用函數(shù)表達式定義函數(shù)，后面跟分號結(jié)尾 var fn=function(){...}; fn(); // 函數(shù)調(diào)用（函數(shù)體下才能用）- 因為函數(shù)沒有名字，所以也被稱為匿名函數(shù)
- 這個fn 里面存儲的是一個函數(shù)
- 函數(shù)表達式方式原理跟聲明變量方式是一致的
- 函數(shù)調(diào)用的代碼必須寫到函數(shù)體后面
函數(shù)的參數(shù)
? 函數(shù)參數(shù)語法
/*** 函數(shù)參數(shù)語法* 形參：函數(shù)定義時設(shè)置接受調(diào)用時傳入* 實參：函數(shù)調(diào)用時傳入小括號內(nèi)的真實數(shù)據(jù)* 參數(shù)的作用：在函數(shù)內(nèi)部某些值不固定,可以通過參數(shù)調(diào)用函數(shù)時傳遞不同的值進去* 1. 調(diào)用的時候?qū)崊⒅凳莻鬟f給形參的* 2. 形參簡單理解為：不用聲明的變量* 3. 實參和形參的多個參數(shù)之間用逗號（,）分隔*/ // 帶參數(shù)的函數(shù)聲明 function 函數(shù)名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數(shù)，用逗號分隔// 函數(shù)體 } // 帶參數(shù)的函數(shù)調(diào)用 函數(shù)名(實參1, 實參2, 實參3...);函數(shù)形參和實參數(shù)量不匹配時
| 實參個數(shù) = 形參個數(shù) | 輸出正確結(jié)果 |
| 實參個數(shù) > 形參個數(shù) | 只取到形參的個數(shù) |
| 實參個數(shù) < 形參個數(shù) | 多的形參定義為undfined，結(jié)果為NaN |
小結(jié)：
- 函數(shù)可以帶參數(shù)也可以不帶參數(shù)
- 聲明函數(shù)的時候，函數(shù)名括號里面的是形參，形參的默認值為 undefined
- 調(diào)用函數(shù)的時候，函數(shù)名括號里面的是實參
- 多個參數(shù)中間用逗號分隔
- 形參的個數(shù)可以和實參個數(shù)不匹配，但是結(jié)果不可預(yù)計，我們盡量要匹配
函數(shù)返回值
? return 語句
/*** 函數(shù)返回值* 函數(shù)調(diào)用整體代表的數(shù)據(jù)；函數(shù)執(zhí)行完成后可以通過return語句將指定數(shù)據(jù)返回。* - 在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值* - 如果函數(shù)沒有 return ，返回的值是 undefined*/ // 聲明函數(shù) function 函數(shù)名（）{...return 需要返回的值； } // 調(diào)用函數(shù) 函數(shù)名(); // 此時調(diào)用函數(shù)就可以得到函數(shù)體內(nèi)return 后面的值break ,continue ,return 的區(qū)別
- break ：結(jié)束當前的循環(huán)體（如 for、while）
- continue ：跳出本次循環(huán)，繼續(xù)執(zhí)行下次循環(huán)（如 for、while）
- return ：不僅可以退出循環(huán)，還能夠返回 return 語句中的值，同時還可以結(jié)束當前的函數(shù)體內(nèi)的代碼
arguments的使用
arguments 是一個類似數(shù)組的對象, 對應(yīng)于傳遞給函數(shù)的參數(shù)。
? 當不確定有多少個參數(shù)傳遞的時候，可以用 arguments 來獲取。JavaScript 中，arguments實際上它是當前函數(shù)的一個內(nèi)置對象。所有函數(shù)都內(nèi)置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實參。arguments展示形式是一個偽數(shù)組，因此可以進行遍歷。偽數(shù)組具有以下特點：
-
具有 length 屬性
-
按索引方式儲存數(shù)據(jù)
-
不具有數(shù)組的 push , pop 等方法
注意：在函數(shù)內(nèi)部使用該對象，用此對象獲取函數(shù)調(diào)用時傳的實參。
function fn(arguments){console.log(arguments); }-
arguments.callee
指向當前執(zhí)行的函數(shù)。
-
arguments.caller **
指向調(diào)用當前函數(shù)的函數(shù)。
-
arguments.length
指向傳遞給當前函數(shù)的參數(shù)數(shù)量。
arguments 對象可以與剩余參數(shù)、默認參數(shù)和結(jié)構(gòu)賦值參數(shù)結(jié)合使用。
在嚴格模式下,剩余參數(shù)剩余參數(shù)、默認參數(shù)和結(jié)構(gòu)賦值參數(shù)的存在不會改變 arguments 對象的行為,但是在非嚴格模式下就有所不同了。
-
函數(shù)的原理
/*** 函數(shù)的原理* 1、函數(shù)名：函數(shù)名時函數(shù)開始地址的一個標簽* 2、參數(shù)：函數(shù)的參數(shù)是給函數(shù)處理的資料，是函數(shù)的變量。函數(shù)的參數(shù)可以有不止一個，也可以沒有* 3、本地變量：本地變量是只在本函數(shù)中有效，函數(shù)結(jié)束后酒不可用的變量，本地變量對其他函數(shù)不可見。* 4、靜態(tài)變量：靜態(tài)變量是直到結(jié)果都一直有效的變量。函數(shù)內(nèi)的靜態(tài)變量對其他模塊/函數(shù)不可見。* 5、全局變量：全局變量是函數(shù)外申請的變量。如果多個函數(shù)用到這個全局變量，最好直接采用傳參的方式。配置文件保存到全局變量中是個不錯的點子。* 6、返回地址：返回地址是一個不直接使用的隱含的參數(shù)。簡而言之，就是函數(shù)執(zhí)行完之后去執(zhí)行指令的地址。* 7、返回值：返回值是主要的方法傳遞執(zhí)行結(jié)果給上層函數(shù)，大多數(shù)語言都只允許有一個返回值。* */4、預(yù)編譯、暗示全局變量
預(yù)編譯
預(yù)編譯階段發(fā)生變量聲明和函數(shù)聲明，沒有初始化行為（賦值），匿名函數(shù)不參與預(yù)編譯 ； 只有在解釋執(zhí)行階段才會進行變量初始化 ；
預(yù)編譯(函數(shù)執(zhí)行前)
預(yù)編譯(腳本代碼塊script執(zhí)行前)
查找全局變量聲明（包括隱式全局變量聲明，省略var聲明），變量名作全局對象的屬性，值為undefined
查找函數(shù)聲明，函數(shù)名作為全局對象的屬性，值為函數(shù)引用
預(yù)編譯小結(jié)
- 預(yù)編譯兩個小規(guī)則
- 函數(shù)聲明整體提升-(具體點說，無論函數(shù)調(diào)用和聲明的位置是前是后，系統(tǒng)總會把函數(shù)聲明移到調(diào)用前面）
- 變量 聲明提升-(具體點說，無論變量調(diào)用和聲明的位置是前是后，系統(tǒng)總會把聲明移到調(diào)用前，注意僅僅只是聲明，所以值是undefined）
總結(jié)
以上是生活随笔為你收集整理的学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ngrinder 入库mysql_scr
- 下一篇： 今天发现好多大网站感染木马程序Troja