整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          JavaScript基礎(chǔ)大總結(jié)

          初識JavaScirpt

          • JavaScript 是世界上最流行的語言之一,是一種運(yùn)行在客戶端的腳本語言 (Script 是腳本的意思)
          • 腳本語言:不需要編譯,運(yùn)行過程中由 js 解釋器( js 引擎)逐行來進(jìn)行解釋并執(zhí)行
          • 現(xiàn)在也可以基于 Node.js 技術(shù)進(jìn)行服務(wù)器端編程

          ?瀏覽器執(zhí)行JS簡介

          瀏覽器分成兩部分:渲染引擎和 JS 引擎

          • 渲染引擎:用來解析HTML與CSS,俗稱內(nèi)核,比如 chrome 瀏覽器的 blink ,老版本的 webkit
          • JS 引擎:也稱為 JS 解釋器。 用來讀取網(wǎng)頁中的JavaScript代碼,對其處理后運(yùn)行,比如 chrome 瀏覽器的 V8

          瀏覽器本身并不會執(zhí)行JS代碼,而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 。JS 引擎執(zhí)行代碼時(shí)逐行解釋每一句源碼(轉(zhuǎn)換為機(jī)器語言),然后由計(jì)算機(jī)去執(zhí)行,所以 JavaScript 語言歸為腳本語言,會逐行解釋執(zhí)行。

          ?JS的組成

          JavaScript 包括 ECMAScriptDOMBOM



          ?ECMAScript

          ECMAScript 是由ECMA 國際( 原歐洲計(jì)算機(jī)制造商協(xié)會)進(jìn)行標(biāo)準(zhǔn)化的一門編程語言,這種語言在萬維網(wǎng)上應(yīng)用廣泛,它往往被稱為 JavaScript 或 JScript,但實(shí)際上后兩者是 ECMAScript 語言的實(shí)現(xiàn)和擴(kuò)展。

          ECMAScript:ECMAScript 規(guī)定了JS的編程語法和基礎(chǔ)核心知識,是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn)。

          DOM文檔對象模型

          文檔對象模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進(jìn)行操作(大小、位置、顏色等)。

          BOM瀏覽器對象模型

          BOM (Browser Object Model,簡稱BOM) 是指瀏覽器對象模型,它提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口,比如彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等。

          1、JS初體驗(yàn)

          1.1、行內(nèi)式JS

          <input type="button" value="點(diǎn)我試試" onclink="javascript:alert('Hello World')" />
          1. 可以將單行或少量JS代碼寫在HTML標(biāo)簽的事件屬性中(以on開頭的屬性),如: onclink
          2. 注意單雙引號的使用:在HTML中我們推薦使用雙引號,JS中我們推薦使用單引號
          3. 可讀性差,在 HTML 中編入 JS 大量代碼時(shí),不方便閱讀
          4. 特殊情況下使用

          1.2、內(nèi)嵌式JS

          <script>
               alert('Hello World!');
          </script>
          • 可以將多行JS代碼寫到<script>標(biāo)簽中
          • 內(nèi)嵌 JS 是學(xué)習(xí)時(shí)常用的方式

          1.3、外部JS

          <script src="my.js"></script>
          1. 利于HTML頁面代碼結(jié)構(gòu)化,把單獨(dú)JS代碼獨(dú)立到HTML頁面之外,既美觀,又方便
          2. 引用外部JS文件的script標(biāo)簽中間不可以寫代碼
          3. 適合于JS代碼量比較大的情況

          2、JS基本語法

          2.1、注釋

          2.1.1、單行注釋

          //  單行注釋
          • 快捷鍵ctrl + /

          2.1.2、多行注釋

          /*
          	多行注釋
          */    
          • 快捷鍵 shift + alt + a
          • vscode中修改快捷鍵方式:vscode? 首選項(xiàng)按鈕? 鍵盤快捷方式 ? 查找原來的快捷鍵? 修改為新的快捷鍵? 回車確認(rèn)

          2.2、輸入輸出語句

          方法

          說明

          歸屬

          alert(msg);

          瀏覽器彈出警示框

          瀏覽器

          console.log(msg);

          瀏覽器控制臺打印輸出信息

          瀏覽器

          prompt(info);

          瀏覽看彈出輸入框,用戶可以輸入

          瀏覽器

          • alert() 主要用來顯示消息給用戶
          • console.log() 用來給程序員看自己運(yùn)行時(shí)的消息

          2.3、變量

          • 變量是用于存放數(shù)據(jù)的容器,我們通過變量名獲取數(shù)據(jù),甚至數(shù)據(jù)可以修改
          • 本質(zhì):變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間

          2.3.1、變量初始化

          1. var是一個(gè)JS關(guān)鍵字,用來聲明變量(variable變量的意思)。使用該關(guān)鍵字聲明變量后,計(jì)算機(jī)會自動為變量分配內(nèi)存空間。
          2. age 是程序員定義的變量名,我們要通過變量名來訪問內(nèi)存中分配的空間
          //聲明變量同時(shí)賦值為18
          var age = 18; 
          //同時(shí)聲明多個(gè)變量時(shí),只需要寫一個(gè) var, 多個(gè)變量名之間使用英文逗號隔開。
          
          var age = 18, address ='火影村',salary = 15000;
          12345

          2.3.2、聲明變量特殊情況


          情況

          說明

          結(jié)果

          var age; console.log(age);

          只聲明,不賦值

          undefined

          console.log(age)

          不聲明 不賦值 直接使用

          報(bào)錯(cuò)

          age = 10;console.log(age);

          不聲明 只賦值

          10

          2.3.3、變量的命名規(guī)范

          1. 由字母(A-Z,a-z),數(shù)字(0-9),下劃線(_),美元符號($)組成,如:usrAge,num01,__name
          2. 嚴(yán)格區(qū)分大小寫。 var app;var App; 是兩個(gè)變量
          3. 不能以數(shù)字開頭。
          4. 不能是關(guān)鍵字,保留字。例如:var,for,while
          5. 遵循駝峰命名法。首字母小寫,后面單詞的首字母需要大寫。myFirstName
          6. 推薦翻譯網(wǎng)站:有道 愛詞霸

          2.4、數(shù)據(jù)類型

          JavaScript **是一種弱類型或者說動態(tài)語言。**這意味著不用提前聲明變量的類型,在程序運(yùn)行過程中,類型會被自動確定。

          var age = 10; 			 //這是一個(gè)數(shù)字型
          var areYouOk = '使得';	//這是一個(gè)字符串
          12
          • 在代碼運(yùn)行時(shí),變量的數(shù)據(jù)類型是由 JS引擎 根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷 的,運(yùn)行完畢之后, 變量就確定了數(shù)據(jù)類型。
          • JavaScript 擁有動態(tài)類型,同時(shí)也意味著相同的變量可用作不同的類型
          var x = 6;		//x為數(shù)字
          var x = "Bill";	//x為字符串

          JS 把數(shù)據(jù)類型分為兩類:

          • 基本數(shù)據(jù)類型(Number,String,Boolean,Undefined,Null)
          • 復(fù)雜數(shù)據(jù)類型(Object)

          2.4.1、基本數(shù)據(jù)類型

          簡單數(shù)據(jù)類型

          說明

          默認(rèn)值

          Number

          數(shù)字型,包含整型值和浮點(diǎn)型值,如21,0.21

          0

          Boolean

          布爾值類型,如true,false ,等價(jià)于1和0

          false

          Undefined

          var a; 聲明了變量a但是沒有賦值,此時(shí)a=undefined

          undefined(未定義的)

          string

          字符串類型,如“張三”

          “”

          Null

          var a = null;聲明了變量a為空值

          null

          2.4.2、數(shù)字型Number

          JavaScript 數(shù)字類型既可以用來保存整數(shù)值,也可以保存小數(shù)(浮點(diǎn)數(shù))。

          var age = 12;		//整數(shù)
          var Age = 21.3747;	//小數(shù)

          2.4.2、數(shù)字型進(jìn)制

          最常見的進(jìn)制有二進(jìn)制、八進(jìn)制、十進(jìn)制、十六進(jìn)制。

          // 1.八進(jìn)制數(shù)字序列范圍:0~7
          var num1 = 07; 		//對應(yīng)十進(jìn)制的7
          var Num2 = 019;		//對應(yīng)十進(jìn)制的19
          var num3 = 08;		//對應(yīng)十進(jìn)制的8
          // 2.十六進(jìn)制數(shù)字序列范圍:0~9以及A~F
          var num = 0xA;
          • 在JS中八進(jìn)制前面加0,十六進(jìn)制前面加 0x

          ①數(shù)字型范圍

          • JS中數(shù)值的最大值:Number.MAX_VALUE
          • JS中數(shù)值的最小值:Number.MIN_VALUE
          consol.log(Number.MAX_VALUE);
          consol.log(Number.MIN_VALUE);

          ②數(shù)字型的三個(gè)特殊值

          alert(Infinity); 	//Infinity(無窮大)
          alert(-Infinity); 	//-Infinity(無窮小)
          alert(NaN);       	//NaN - Not a Number ,代表任何一個(gè)非數(shù)值
          • Infinity ,代表無窮大,大于任何數(shù)值
          • -Infinity ,代表無窮小,小于任何數(shù)值
          • Nan ,Not a Number,代表一個(gè)非數(shù)值

          ③isNaN

          這個(gè)方法用來判斷非數(shù)字,并且返回一個(gè)值,如果是數(shù)字返回的是false,如果不是數(shù)字返回的是true

          var userAge = 21;
          var isOk = isNan(userAge);
          console.log(isOk);		//false,21不是一個(gè)非數(shù)字
          var userName = "andy";
          console.log(isNan(userName));	//true,"andy"是一個(gè)非數(shù)字

          2.4.3、字符串型String

          字符串型可以是引號中的任意文本,其語法為 “雙引號” 和 "單引號’’

          var strMsg = "我愛北京天安門~";		//使用雙引號表示字符串
          var strMsg = '我愛北京';			  //使用單引號表示字符串

          因?yàn)?HTML 標(biāo)簽里面的屬性使用的是雙引號,JS 這里我們更推薦使用單引號

          ①字符串引號嵌套

          JS可以用 單引號嵌套雙引號,或者用 雙引號嵌套單引號外雙內(nèi)單,外單內(nèi)雙

          var strMsg ='我是一個(gè)“高富帥”' //可以用 ' ' 包含 " "
          var strMsg2 ="我是'高富帥'" //可以用" "  包含  ''

          ②字符串轉(zhuǎn)義符

          類似HTML里面的特殊字符,字符串中也有特殊字符,我們稱之為轉(zhuǎn)義符。

          轉(zhuǎn)義符都是 \ 開頭的,常用的轉(zhuǎn)義符及其說明如下:

          轉(zhuǎn)義符

          解釋說明

          \n

          換行符,n是newline

          \ \

          斜杠\

          \ ’

          ’ 單引號

          \ ‘’

          ‘’ 雙引號

          \ t

          tab 縮進(jìn)

          \ b

          空格,b是blank的意思

          ③字符串長度

          字符串是由若干字符組成的,這些字符的數(shù)量就是字符串的長度。通過字符串的 length 屬性可以獲取整個(gè)字符串的長度。

          //通過字符串的length屬性可以獲取整個(gè)字符串的長度
          var strMsg = "我是高富帥!";
          alert(strMsg.length);     //顯示6

          ④字符串的拼接

          • 多個(gè)字符串之間可以使用 + 進(jìn)行拼接,其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
          • 拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串,再拼接成一個(gè)新的字符串

          注意:字符串 + 任何類型 =拼接之后的新字符串

          //1 字符串相加
          alert('hello' + ' ' + 'World');  //hello World
          //2 數(shù)值字符串相加
          alert('100' + '100'); //100100
          //3 數(shù)值字符串+數(shù)值
          alert('12'+12); //1212
          //4 數(shù)值+數(shù)值
          alert(12+12); //24
          • + 號總結(jié)口訣:數(shù)值相加,字符相連
          var  age = 18;
          console.log('我今年'+age+'歲');
          console.log('我今年'+age+'歲');  //引引加加,最終也是上面的形式

          ⑤字符串拼接加強(qiáng)

          console.log('Pink老師' + 18);			//只要有字符就會相連
          var age = 18;
          // console.log('Pink老師age歲了');		//這樣不行,會輸出 "Pink老師age歲了"
          
          console.log('Pink老師' + age);		 // Pink老師18
          console.log('Pink老師' + age + '歲啦');	// Pink老師18歲啦
          • 我們經(jīng)常會將字符串和變量來拼接,因?yàn)樽兞靠梢院芊奖愕匦薷睦锩娴闹?/span>
          • 變量是不能添加引號的,因?yàn)榧右柕淖兞繒兂勺址?/span>
          • 如果變量兩側(cè)都有字符串拼接,口訣==“引引加加 ”,刪掉數(shù)字==變量寫加中間

          2.4.4、布爾型Boolean

          • 布爾類型有兩個(gè)值:true 和 false ,其中 true 表示真(對),而 false 表示假(錯(cuò))。
          • 布爾型和數(shù)字型相加的時(shí)候, true 的值為 1 ,false 的值為 0。
          var flag = true;
          console.log(flag + 1); // 2 true當(dāng)加法來看當(dāng)1來看,flase當(dāng)0來看

          2.4.5、undefined未定義

          • 一個(gè)聲明后沒有被賦值的變量會有一個(gè)默認(rèn)值 undefined ( 如果進(jìn)行相連或者相加時(shí),注意結(jié)果)
          // 如果一個(gè)變量聲明未賦值,就是undefined 未定義數(shù)據(jù)類型
          var str;
          console.log(str);				//undefined
          var variable = undefined;
          console.log(variable + 'Pink'); //undefinedPink
          console.log(variable + 18); //NaN 

          1.undefined 和 字符串 相加,會拼接字符串

          2.undefined 和 數(shù)字相加,最后結(jié)果是NaN

          2.4.6、空值null

          • 一個(gè)聲明變量給 null 值,里面存的值為空
          var space = null;
          console.log(space + 'pink'); //nullpink
          console.llog(space + 1); // 1 

          2.4.7、typeof

          • typeof 可用來獲取檢測變量的數(shù)據(jù)類型
          var num = 18;
          console.log(typeof num) // 結(jié)果 number  

          不同類型的返回值

          類型

          結(jié)果

          string

          typeof “小白”

          “string”

          number

          typeof 18

          “number”

          boolean

          typeof true

          “boolean”

          undefined

          typeof undefined

          “undefined”

          null

          typeof null

          “object”

          2.4.8、字面量

          字面量是在源代碼中一個(gè)固定值的表示法,通俗來說,就是字面量表示如何表達(dá)這個(gè)值。

          • 數(shù)字字面量:8,9,10
          • 字符串字面量:‘大前端’,‘后端’
          • 布爾字面量:true、false

          通過控制臺的顏色判斷屬于哪種數(shù)據(jù)類型

          黑色

          字符串

          藍(lán)色

          數(shù)值

          灰色

          undefined 和 null

          2.5、數(shù)據(jù)類型轉(zhuǎn)換

          使用表單、prompt 獲取過來的數(shù)據(jù)默認(rèn)是字符串類型的,此時(shí)就不能直接簡單的進(jìn)行加法運(yùn)算,而需要轉(zhuǎn)換變量的數(shù)據(jù)類型。通俗來說,就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另外一種數(shù)據(jù)類型

          我們通常會實(shí)現(xiàn)3種方式的轉(zhuǎn)換:

          • 轉(zhuǎn)換為字符串類型
          • 轉(zhuǎn)換為數(shù)字型
          • 轉(zhuǎn)換為布爾型

          ①轉(zhuǎn)換為字符串型

          方式

          說明

          案例

          toString()

          轉(zhuǎn)成字符串

          var num = 1; alert(num.toString());

          String()強(qiáng)制轉(zhuǎn)換

          轉(zhuǎn)成字符串

          var num = 1; alert(String(num));

          加號拼接字符串

          和字符串拼接的結(jié)果都是字符串

          var num =1; alert(num+“我是字符串”);

          //1.把數(shù)字型轉(zhuǎn)換為字符串型 toString()  變量.toString()
          var num = 10;
          var str = num.toString();
          console.log(str);
          
          //2.強(qiáng)制轉(zhuǎn)換
          console.log(String(num));
          • toString()String() 使用方式不一樣
          • 三種轉(zhuǎn)換方式,我們更喜歡用第三種加號拼接字符串轉(zhuǎn)換方式,這一方式也稱為隱士轉(zhuǎn)換

          ②轉(zhuǎn)換為數(shù)字型

          方式

          說明

          案例

          parselnt(string)函數(shù)

          將string類型轉(zhuǎn)成整數(shù)數(shù)值型

          parselnt(‘78’)

          parseFloat(string)函數(shù)

          將string類型轉(zhuǎn)成浮點(diǎn)數(shù)數(shù)值型

          parseFloat(‘78.21’)

          Number()強(qiáng)制轉(zhuǎn)換函數(shù)

          將string類型轉(zhuǎn)換為數(shù)值型

          Number(‘12’)

          js 隱式轉(zhuǎn)換(- * /)

          利用算術(shù)運(yùn)算隱式轉(zhuǎn)換為數(shù)值型

          ‘12’-0

          // 1.parseInt()
          var age =prompt('請輸入您的年齡');
          consolo.log(parseInt(age));  //數(shù)字型18
          consolo.log(parseInt('3.14'));  //3取整
          consolo.log(parseInt('3.94'));  //3,不會四舍五入
          consolo.log(parseInt('120px'));  //120,會去掉單位
          
          // 2.parseFloat()
          console.log(parseFloat('3.14'));  //3.14
          consolo.log(parseFloat('120px'));  //120,會去掉單位
          
          
          // 3.利用Number(變量)
          var str ='123';
          console.log(Number(str));
          console.log(Number('12'));   
          
          // 4.利用了算術(shù)運(yùn)算 - * /   隱式轉(zhuǎn)換
          console.log('12'-0);  // 12

          1.注意 parseIntparseFloat ,這兩個(gè)是重點(diǎn)

          2.隱式轉(zhuǎn)換是我們在進(jìn)行算數(shù)運(yù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
          console.log(Boolean('')); //false
          console.log(Boolean(0));  //false
          console.log(Boolean(NaN)); //false
          console.log(Boolean(null)); //false
          console.log(Boolean(undefined)); //false
          console.log(Boolean('小白')); //true
          console.log(Boolean(12));   //true

          2.6、運(yùn)算符

          運(yùn)算符(operator)也被稱為操作符,是用于實(shí)現(xiàn)賦值、比較和執(zhí)行算數(shù)運(yùn)算等功能的符號

          JavaScript 中常用的運(yùn)算符有:

          • 算數(shù)運(yùn)算符
          • 遞增和遞減運(yùn)算符
          • 比較運(yùn)算符
          • 邏輯運(yùn)算符
          • 賦值運(yùn)算符

          2.6.1、算術(shù)運(yùn)算符

          概念:算術(shù)運(yùn)算使用的符號,用于執(zhí)行兩個(gè)變量或值的算術(shù)運(yùn)算。

          運(yùn)算符

          描述

          實(shí)例

          +

          10 + 20 =30

          -

          10 - 20 =-10

          *

          10 * 20 =200

          /

          10 / 20 =0.5

          %

          取余數(shù)(取模)

          返回出發(fā)的余數(shù) 9 % 2 =1

          2.6.2、浮點(diǎn)數(shù)的精度問題

          浮點(diǎn)數(shù)值的最高精度是17位小數(shù),但在進(jìn)行算數(shù)計(jì)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù)

          var result = 0.1 +0.2; //結(jié)果不是0.3,0.30000000000000004
          console.log(0.07 * 100); //結(jié)果不是7,而是7.000000000000001

          所以不要直接判斷兩個(gè)浮點(diǎn)數(shù)是否相等

          2.6.3、遞增和遞減運(yùn)算符

          遞增(++)

          遞減(- -)

          放在變量前面時(shí),我們稱為前置遞增(遞減)運(yùn)算符

          放在變量后面時(shí),我們稱為后置遞增(遞減)運(yùn)算符

          注意:遞增和遞減運(yùn)算符必須和變量配合使用。

          ①前置遞增運(yùn)算符

          ++num num = num + 1

          使用口訣:先自加,后返回值

          var num = 10;
          alert (++num + 10); // 21

          先自加 10+1=11,返回11,此時(shí)num=11

          ②后置遞增運(yùn)算符

          num ++ num = num +1

          使用口訣:先返回原值,后自加

          var num = 10;
          alert(10 + num++); // 20

          ③小結(jié)

          • 前置遞增和后置遞增運(yùn)算符可以簡化代碼的編寫,讓變量的值 + 1 比以前寫法更簡單
          • 單獨(dú)使用時(shí),運(yùn)行結(jié)果相同,與其他代碼聯(lián)用時(shí),執(zhí)行結(jié)果會不同
          • 開發(fā)時(shí),大多使用后置遞增/減,并且代碼獨(dú)占一行

          2.6.4、比較(關(guān)系)運(yùn)算符

          比較運(yùn)算符是兩個(gè)數(shù)據(jù)進(jìn)行比較時(shí)所使用的運(yùn)算符,比較運(yùn)算后,會返回一個(gè)布爾值(true / false)作為比較運(yùn)算的結(jié)果。

          運(yùn)算符名稱

          說明

          案例

          結(jié)果

          <

          小于號

          1 < 2

          true

          >

          大于號

          1 > 2

          false

          >=

          大于等于號(大于或者等于)

          2 >= 2

          true

          <=

          小于等于號(小于或者等于)

          3 <= 2

          false

          ==

          判等號(會轉(zhuǎn)型)

          37 == 37

          true

          !=

          不等號

          37 != 37

          false

          === !==

          全等 要求值和數(shù)據(jù)類型都一致

          37 === ‘37’

          false

          ①===== 小結(jié)

          符號

          作用

          用法

          =

          賦值

          把右邊給左邊

          ==

          判斷

          判斷兩邊值是否相等(注意此時(shí)有隱士轉(zhuǎn)換)

          ===

          全等

          判斷兩邊的值和數(shù)據(jù)類型是否完全相同

          console.log(18 == '18');		//true
          console.log(18 === '18');		//false

          2.6.5、邏輯運(yùn)算符

          邏輯運(yùn)算符是用來進(jìn)行布爾值運(yùn)算的運(yùn)算符,其返回值也是布爾值

          邏輯運(yùn)算符

          說明

          案例

          &&

          “邏輯與”,簡稱"與" and

          true && false

          ||

          “邏輯或”,簡稱"或" or

          true || false

          “邏輯非”,簡稱"非" not

          !true

          邏輯與:兩邊都是 true才返回 true,否則返回 false

          邏輯或:兩邊都為 false 才返回 false,否則都為true

          邏輯非:邏輯非(!)也叫作取反符,用來取一個(gè)布爾值相反的值,如 true 的相反值是 false

          var isOk = !true;
          console.log(isOk);  // false
          //邏輯非(!)也叫作取反符,用來取一個(gè)布爾值相反的值,如 true 的相反值是 false

          2.6.5.1、短路運(yùn)算(邏輯中斷)

          短路運(yùn)算的原理:當(dāng)有多個(gè)表達(dá)式(值)時(shí),左邊的表達(dá)式值可以確定結(jié)果時(shí),就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值

          ①邏輯與

          • 語法:表達(dá)式1 && 表達(dá)式2
          • 如果第一個(gè)表達(dá)式的值為真,則返回表達(dá)式2
          • 如果第一個(gè)表達(dá)式的值為假,則返回表達(dá)式1
          console.log(123 && 456);   //456
          console.log(0 && 456);     //0
          console.log(123 && 456 && 789);  //789

          ②邏輯或

          • 語法:表達(dá)式1 || 表達(dá)式2
          • 如果第一個(gè)表達(dá)式的值為真,則返回表達(dá)式1
          • 如果第一個(gè)表達(dá)式的值為假,則返回表達(dá)式2
          console.log(123 || 456); //123
          console.log(0 || 456);   //456
          console.log(123 || 456 || 789);  //123
          var num = 0;
          console.log(123 || num++);
          // 先返回在加,相當(dāng)于 (123 || 0)
          console.log(num);    // 123

          2.6.6、賦值運(yùn)算符

          概念:用來把數(shù)據(jù)賦值給變量的運(yùn)算符。

          賦值運(yùn)算符

          說明

          案例

          =

          直接賦值

          var usrName = ‘我是值’

          += ,-=

          加,減一個(gè)數(shù)后再賦值

          var age = 10; age+=5;//15

          *=,/=,%=

          成,除,取模后再賦值

          var age = 2; age*=5; //10

          var age = 10;
          age += 5;  // 相當(dāng)于 age = age + 5;
          age -= 5;  // 相當(dāng)于 age = age - 5;
          age *= 10; // 相當(dāng)于 age = age * 10;

          2.6.7、運(yùn)算符優(yōu)先級

          優(yōu)先級

          運(yùn)算符

          順序

          1

          小括號

          ()

          2

          一元運(yùn)算符

          ++ – !

          3

          算數(shù)運(yùn)算符

          先 * / 后 + -

          4

          關(guān)系運(yùn)算符

          >, >= , < , <=,

          5

          相等運(yùn)算符

          ,!=,=,!==

          6

          邏輯運(yùn)算符

          先 && 后 ||(先與后或)

          7

          賦值運(yùn)算符

          =

          8

          逗號運(yùn)算符

          1.一元運(yùn)算符里面的邏輯非優(yōu)先級很高

          2.邏輯與邏輯或 優(yōu)先級高

          3.練習(xí)題

          console.log( 4 >= 6 || '人' != '阿凡達(dá)' && !(12 * 2 == 144) && true)	// true
          var a = 3 > 5 && 2 < 7 && 3 == 4; 
          console.log(a); 	//false 
          
          var b = 3 <= 4 || 3 > 1 || 3 != 2; 
          console.log(b); 	//true
          
          var c = 2 === "2"; 
          console.log(c);  	//false
          
          var d = !c || b && a ;
          console.log(d);		//true

          2.7、流程控制

          流程控制主要有三種結(jié)構(gòu),分別是順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu),這三種結(jié)構(gòu)代表三種代碼執(zhí)行的順序

          2.7.1、分支結(jié)構(gòu)

          JS 語言提供了兩種分支結(jié)構(gòu)語句:JS 語句 switch語句

          ①if語句

          // 條件成立執(zhí)行代碼,否則什么也不做
          if (條件表達(dá)式) {
              //條件成立執(zhí)行的代碼語句
          }

          案例:進(jìn)入網(wǎng)吧

          彈出一個(gè)輸入框,要求用戶輸入年齡,如果年齡大于等于 18 歲,允許進(jìn)網(wǎng)吧

          var usrAge = prompt('請輸入您的年齡:');
          if(usrAge >= 18)
          {
                alert('您的年齡合法,歡迎來到老子網(wǎng)吧享受學(xué)習(xí)的樂趣!');
          }

          ②if else 語句

          // 條件成立,執(zhí)行if里面代碼,否則執(zhí)行else里面的代碼
          if(條件表達(dá)式)
          {
              //[如果]條件成立執(zhí)行的代碼
          }
          else
              {
                  //[否則]執(zhí)行的代碼
              }

          案例:判斷閏年

          接收用戶輸入的年份,如果是閏年就彈出閏年,否則彈出是平年

          算法:能被4整除且不能整除100的為閏年(如2004年就是閏年,1901年不是閏年)或者能夠被 400 整除的就是閏年

          var year = prompt('請輸入年份');
          if (year % 4 == 0 && year % 100 !=0 || year % 400 ==0)
          {
             alert('這個(gè)年份是閏年');
          }
          else
          {
            alert('這個(gè)年份是平年');
          }

          ③if else if 語句

          if(條件表達(dá)式1)
          {
            語句1;
          }
          else if(條件表達(dá)式2)
          {
             語句2;
          }
          else if(條件表達(dá)式3)
          {
            語句3;
          }
          else
          {
             //上述條件都不成立執(zhí)行此處代碼
          }

          案例:接收用戶輸入的分?jǐn)?shù),根據(jù)分?jǐn)?shù)輸出對應(yīng)的等級字母 A、B、C、D、E

          其中:

          1. 90分(含)以上 ,輸出:A
          2. 80分(含)~ 90 分(不含),輸出:B
          3. 70分(含)~ 80 分(不含),輸出:C
          4. 60分(含)~ 70 分(不含),輸出:D
          5. 60分(不含) 以下,輸出: E
           var score = prompt('請您輸入分?jǐn)?shù):');
          if (score >= 90) {
            alert('寶貝,你是我的驕傲');
          } else if (score >= 80) {
            alert('寶貝,你已經(jīng)很出色了');
          } else if (score >= 70) {
            alert('你要繼續(xù)加油嘍');
          } else if (score >= 60) {
            alert('孩子,你很危險(xiǎn)');
          } else {
            alert('可以再努力點(diǎn)嗎,你很棒,但還不夠棒');
          }

          2.7.2、三元表達(dá)式

          • 語法結(jié)構(gòu) : 表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3
          • 執(zhí)行思路

          如果表達(dá)式1為true,則返回表達(dá)式2的值,如果表達(dá)式1為false,則返回表達(dá)式3的值

          案例:數(shù)字補(bǔ)0
          用戶輸入數(shù)字,如果數(shù)字小于10,則在前面補(bǔ)0,比如01,09,

          如果數(shù)字大于10,則不需要補(bǔ),比如20

          var figuer = prompt('請輸入0~59之間的一個(gè)數(shù)字');
          var result = figuer < 10 ? '0' + figuer : figue
          alert(result);

          2.7.3、switch

          switch(表達(dá)式){
              case value1:
               //表達(dá)式等于 value1 時(shí)要執(zhí)行的代碼
               break;
            case value2:
               //表達(dá)式等于value2 時(shí)要執(zhí)行的代碼
               break;
            default:
               //表達(dá)式不等于任何一個(gè)value時(shí)要執(zhí)行的代碼
                  
          }
          • switch :開關(guān) 轉(zhuǎn)換 , case :小例子 選項(xiàng)
          • 關(guān)鍵字 switch 后面括號內(nèi)可以是表達(dá)式或值, 通常是一個(gè)變量
          • 關(guān)鍵字 case , 后跟一個(gè)選項(xiàng)的表達(dá)式或值,后面跟一個(gè)冒號
          • switch 表達(dá)式的值會與結(jié)構(gòu)中的 case 的值做比較
          • 如果存在匹配全等(===) ,則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行,并在遇到 break 時(shí)停止,整個(gè) switch 語句代碼執(zhí)行結(jié)束
          • 如果所有的 case 的值都和表達(dá)式的值不匹配,則執(zhí)行 default 里的代碼
          • 執(zhí)行case 里面的語句時(shí),如果沒有break,則繼續(xù)執(zhí)行下一個(gè)case里面的語句
          // 用戶在彈出框里面輸入一個(gè)水果,如果有就彈出該水果的價(jià)格, 如果沒有該水果就彈出“沒有此水果”
           var fruit = prompt('請您輸入查詢的蘋果');
                  switch (fruit) {
                      case '蘋果':
                          alert('蘋果的價(jià)格為3.5元/千克');
                          break;
                      case '香蕉':
                          alert('香蕉的價(jià)格為3元/千克');
                          break;
                      default:
                          alert('沒有這種水果');
                  }

          3、斷點(diǎn)調(diào)試

          1. 瀏覽器中按 F12–> sources -->找到需要調(diào)試的文件–>在程序的某一行設(shè)置斷點(diǎn)(在行數(shù)點(diǎn)一下)
          2. 刷新瀏覽器
          3. Watch: 監(jiān)視,通過watch可以監(jiān)視變量的值的變化,非常的常用
          4. F11: 程序單步執(zhí)行,讓程序一行一行的執(zhí)行,這個(gè)時(shí)候,觀察watch中變量的值的變化

          4、循環(huán)

          4.1、for循環(huán)

          在程序中,一組被重復(fù)執(zhí)行的語句被稱之為循環(huán)體,能否繼續(xù)重復(fù)執(zhí)行,取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句,被稱之為循環(huán)語句

          for(初始化變量;條件表達(dá)式;操作表達(dá)式)
          {
             //循環(huán)體
          }

          1.輸入10句"娘子晚安哈!"

          //基本寫法
          for(var i = 1; i<=10; i++  )
              {
                   console.log('娘子晚安哈');
              }
          // 用戶輸入次數(shù)
          var num = prompt('請輸入次數(shù):');
          for(var i = 1; i<= num ;i++)
              {
                  console.log('娘子晚安哈');
              }

          2.求1-100之間所有整數(shù)的累加和

          // 求1-100所以的整數(shù)和
          var sum = 0;
          for (var i = 1; i <= 100; i++) {
              var sum = sum + i;
          }
          console.log(sum);

          3.求1-100之間所有數(shù)的平均值

           // 3.求1-100之間所有數(shù)的平均值
          var sum = 0;
          for (var i = 1; i <= 100; i++) {
              var sum = sum + i;
          }
          console.log(sum / 100);

          4.求1-100之間所有偶數(shù)和奇數(shù)的和

          //    4.求1-100之間所有偶數(shù)和奇數(shù)的和
          var sum1 = 0;
          var sum2 = 0;
          for (var i = 1; i <= 100; i++) {
              if (i % 2 == 0) {
                  sum1 = sum1 + i;
              } else {
                  sum2 = sum2 + i;
              }
          }
          console.log('偶數(shù)和為' + sum1);
          console.log('奇數(shù)和為' + sum2);

          5.求1-100之間所有能被3整除的數(shù)字的和

          // 5.求1-100之間所有能被3整除的數(shù)字的和
          var sum = 0;
          for (var i = 1; i <= 100; i++) {
              if (i % 3 == 0) {
                  sum += i;
              }
          }
          console.log(sum);

          6.要求用戶輸入班級人數(shù),之后依次輸入每個(gè)學(xué)生的成績,最后打印出該班級總的成績以及平均成績。

          var num = prompt('請輸入班級總的人數(shù):'); // num 班級總的人數(shù)
          var sum = 0; // 總成績
          var average = 0; // 平均成績
          for (var i = 1; i <= num; i++) {
               var score = prompt('請輸入第' + i + '個(gè)學(xué)生的成績');
              //這里接收的是str,必須轉(zhuǎn)換為數(shù)值
               sum = sum + parseFloat(score);         
          }
          average = sum / num;
          alert('班級總的成績是:' + sum);
          alert('班級總的平均成績是:' + average);

          7.一行打印5個(gè)星星

          我們采取追加字符串的方式,這樣可以打印到控制臺上

          var star = '';
          for (var i = 1; i <= 5; i++) {
               star += '☆';
           }
          console.log(star);

          4.2、雙重for循環(huán)

          循環(huán)嵌套是指在一個(gè)循環(huán)語句中再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu),例如在for循環(huán)語句中,可以再嵌套一個(gè)for 循環(huán),這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán)。

          for(外循環(huán)的初始;外循環(huán)的條件;外形循環(huán)的操作表達(dá)式){
            for(內(nèi)循環(huán)的初始;內(nèi)循環(huán)的條件;內(nèi)循環(huán)的操作表達(dá)式){
                  需執(zhí)行的代碼;
              }
          }
          • 內(nèi)層循環(huán)可以看做外層循環(huán)的語句
          • 內(nèi)層循環(huán)執(zhí)行的順序也要遵循 for 循環(huán)的執(zhí)行順序
          • 外層循環(huán)執(zhí)行一次,內(nèi)層循環(huán)要執(zhí)行全部次數(shù)

          ①打印五行五列星星

          核心:

          • 內(nèi)層循環(huán)負(fù)責(zé)一行打印五個(gè)星星
          • 外層循環(huán)負(fù)責(zé)打印五行
          var star = '';
          for(var j = 1;j<=5;j++)
          {
             for (var i = 1; i <= 5; i++)
             {
               star += '☆'
             }
              //每次滿5個(gè)星星就加一次換行
              star +='\n'  
          }
          console.log(star);

          ②打印n行n列的星星

          要求用戶輸入行數(shù)和列數(shù),之后在控制臺打印出用戶輸入行數(shù)和列數(shù)的星星

          var star = '';
          var row = prompt('請輸入行數(shù)');
          var col = prompt('請輸入列數(shù)');
          for (var j = 1; j <= col; j++) {
              for (var i = 1; i <= row; i++) {
                  star += '☆';
              }
              star += '\n';
          }
          console.log(star);

          ③打印倒三角形

          • 一共有10行,但是每行的星星個(gè)數(shù)不一樣,因此需要用到雙重 for 循環(huán)
          • 外層的 for 控制行數(shù) i ,循環(huán)10次可以打印10行
          • 內(nèi)層的 for 控制每行的星星個(gè)數(shù) j
          • 核心算法: 每一行星星的個(gè)數(shù): j = i ; j <= 10; j++
          • 每行打印完畢后,都需要重新?lián)Q一行
          var star = '';
          var row = prompt('請輸入行數(shù)');
          var col = prompt('請輸入列數(shù)');
          for (var i = 1; i <= row; i++) {
              for (var j = i; j <= col; j++) {
                  star += '☆';
              }
              star += '\n';
          }
          console.log(star);

          4.3、while循環(huán)

          while(條件表達(dá)式){
            //循環(huán)體代碼
          }

          執(zhí)行思路:

          • 先執(zhí)行條件表達(dá)式,如果結(jié)果為 true,則執(zhí)行循環(huán)體代碼;如果為 false,則退出循環(huán),執(zhí)行后面代碼
          • 執(zhí)行循環(huán)體代碼
          • 循環(huán)體代碼執(zhí)行完畢后,程序會繼續(xù)判斷執(zhí)行條件表達(dá)式,如條件仍為true,則會繼續(xù)執(zhí)行循環(huán)體,直到循環(huán)條件為 false 時(shí),整個(gè)循環(huán)過程才會結(jié)束

          注意

          • 使用 while 循環(huán)時(shí)一定要注意,它必須要有退出條件,否則會稱為死循環(huán)
          • while 循環(huán)和 for 循環(huán)的不同之處在于 while 循環(huán)可以做較為復(fù)雜的條件判斷,比如判斷用戶名和密碼

          ①打印人的一生

          從1歲到99歲

          var age = 0;
          while (age <= 100) {
              age++;
              console.log('您今年' + age + '歲了');
          }

          ②計(jì)算 1 ~ 100 之間所有整數(shù)的和

          var figure = 1;
          var sum = 0;
          while (figure <= 100) {
            sum += figure;
            figure++;
          }
          console.log('1-100的整數(shù)和為' + sum);

          4.4、do while循環(huán)

          do {
            //循環(huán)體代碼-條件表達(dá)式為true的時(shí)候重復(fù)執(zhí)行循環(huán)一代碼
          }while(條件表達(dá)式);

          執(zhí)行思路:

          1. 先執(zhí)行一次循環(huán)體代碼
          2. 再執(zhí)行表達(dá)式,如果結(jié)果為true,則繼續(xù)執(zhí)行循環(huán)體代碼,如果為false,則退出循環(huán),繼續(xù)執(zhí)行后面的代碼
          3. 先執(zhí)行再判斷循環(huán)體,所以dowhile循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼

          需求:彈出一個(gè)提示框, 你愛我嗎? 如果輸入我愛你,就提示結(jié)束,否則,一直詢問

          do {
          	var love = prompt('你愛我嗎?');
          } while (love != '我愛你');
          	alert('登錄成功');

          4.5、continue 關(guān)鍵字

          continue 關(guān)鍵字用于立即跳出本次循環(huán),繼續(xù)下一次循環(huán)(本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次)。

          例如,吃5個(gè)包子,第3個(gè)有蟲子,就扔掉第3個(gè),繼續(xù)吃第4個(gè)第5個(gè)包子

          for (var i = 1; i <= 5; i++) {
            if (i == 3) {
               console.log('這個(gè)包子有蟲子,扔掉');
               continue; // 跳出本次循環(huán),跳出的是第3次循環(huán) 
            }
            console.log('我正在吃第' + i + '個(gè)包子呢');
          }

          4.6、break關(guān)鍵字

          break 關(guān)鍵字用于立即跳出整個(gè)循環(huán)

          例如,吃5個(gè)包子,吃到第3個(gè)發(fā)現(xiàn)里面有半個(gè)蟲子,其余的也不吃了

          for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                 break; // 直接退出整個(gè)for 循環(huán),跳到整個(gè)for下面的語句
             }
             console.log('我正在吃第' + i + '個(gè)包子呢');
           }

          5、數(shù)組

          數(shù)組(Array)是指一組數(shù)據(jù)的集合,其中的每個(gè)數(shù)據(jù)被稱作元素,在數(shù)組中可以存放任意類型的元素。數(shù)組是一種將一組數(shù)據(jù)存儲在單個(gè)變量名下的優(yōu)雅方式。

          //普通變量一次只能存儲一個(gè)值
          var num = 10;
          //數(shù)組一次可以存儲多個(gè)值
          var arr =[1,2,3,4,5];

          5.1、創(chuàng)建數(shù)組

          JavaScript 中創(chuàng)建數(shù)組有兩種方式:

          • 利用 new 創(chuàng)建數(shù)組
          • 利用數(shù)組字面量創(chuàng)建數(shù)組

          ①利用 new 創(chuàng)建數(shù)組

          var 數(shù)組名 = new Array();
          var arr = new Array(); //創(chuàng)建一個(gè)新的空數(shù)組
          • 這種方式暫且了解,等學(xué)完對象再看
          • 注意 Array(),A要大寫

          ②利用數(shù)組字面量創(chuàng)建數(shù)組

          // 1.利用數(shù)組字面量方式創(chuàng)建空的數(shù)組 
          var 數(shù)組名 =[];
          // 2.使用數(shù)組字面量方式創(chuàng)建帶初始值的數(shù)組
          var 數(shù)組名 =['小白','小黑','小黃','瑞奇'];
          // 3.數(shù)組中可以存放任意類型的數(shù)據(jù),例如字符串,數(shù)字,布爾值等
          var arrStus =['小白',12,true,28.9];
          • 數(shù)組的字面量是方括號 []
          • 聲明數(shù)組并賦值稱為數(shù)組的初始化
          • 這種字面量方式也是我們以后最多使用的方式

          5.2、數(shù)組的索引(下標(biāo))

          索引 (下標(biāo)) :用來訪問數(shù)組元素的序號(數(shù)組下標(biāo)從 0 開始)

          //定義數(shù)組
          var arrStus = [1,2,3];
          //獲取數(shù)組中的第2個(gè)元素
          alert(arrStus[1]);

          5.3遍歷數(shù)組

          我們可以通過 for 循環(huán)索引遍歷數(shù)組中的每一項(xiàng)

          // 數(shù)組索引訪問數(shù)組中的元素
          var arr = ['red','green', 'blue'];
          console.log(arr[0]) // red
          console.log(arr[1]) // green
          console.log(arr[2]) // blue
          
          // for循環(huán)遍歷數(shù)組
          var arr = ['red','green', 'blue'];
          for (var i = 0; i < arr.length; i++){
              console.log(arrStus[i]);
          }

          5.4、數(shù)組的長度

          使用“數(shù)組名.length”可以訪問數(shù)組元素的數(shù)量(數(shù)組長度)

          var arrStus = [1,2,3];
          alert(arrStus.length);  // 3

          注意

          • 此處數(shù)組的長度是數(shù)組元素的個(gè)數(shù) ,不要和數(shù)組的索引號混淆
          • 當(dāng)我們數(shù)組里面的元素個(gè)數(shù)發(fā)生了變化,這個(gè) length 屬性跟著一起變化

          5.5、案例

          1.請將 [“關(guān)羽”,“張飛”,“馬超”,“趙云”,“黃忠”,“劉備”,“姜維”]; 數(shù)組里的元素依次打印到控制臺

          var arr = ["關(guān)羽","張飛","馬超","趙云","黃忠","劉備","姜維"]; 
          // 遍歷  從第一個(gè)到最后一個(gè)
          for(var i = 0; i < arr.length; i++ )  { 
             console.log( arr[i] );
          } 

          2.求數(shù)組 [2,6,1,7, 4] 里面所有元素的和以及平均值

          • ①聲明一個(gè)求和變量 sum。
          • ①遍歷這個(gè)數(shù)組,把里面每個(gè)數(shù)組元素加到 sum 里面。
          • ①用求和變量 sum 除以數(shù)組的長度就可以得到數(shù)組的平均值。
          var arr = [2, 6, 1, 7, 4];
          var sum = 0;
          var average = 0;
          for (var i = 0; i < arr.length; i++) {
              sum += arr[i];
          }
          average = sum / i; //此時(shí)i為5
          //      average = sum / arr.length;
          console.log('和為' + sum);
          console.log('平均值為' + average);

          3.求數(shù)組[2,6,1,77,52,25,7]中的最大值

          • ①聲明一個(gè)保存最大元素的變量 max。
          • ②默認(rèn)最大值可以取數(shù)組中的第一個(gè)元素。
          • ③遍歷這個(gè)數(shù)組,把里面每個(gè)數(shù)組元素和 max 相比較。
          • ④如果這個(gè)數(shù)組元素大于max 就把這個(gè)數(shù)組元素存到 max 里面,否則繼續(xù)下一輪比較。
          • ⑤最后輸出這個(gè) max。
           var arr = [2, 6, 1, 77, 52, 25, 7];
          var max = arr[0];
                  var temp;
                  for (var i = 0; i < arr.length; i++) {
                      if (max < arr[i]) {
                          temp = max;
                          max = arr[i];
                          arr[i] = temp;
                      }
                  }
                  console.log('最大值為' + max);
          
          
          方法二:
          
          var arrNum = [2,6,1,77,52,25,7];
          var maxNum = arrNum[0]; // 用來保存最大元素,默認(rèn)最大值是數(shù)組中的第一個(gè)元素
          // 從0 開始循環(huán)數(shù)組里的每個(gè)元素
          for(var i = 0;i< arrNum.length; i++){
              // 如果數(shù)組里當(dāng)前循環(huán)的元素大于 maxNum,則保存這個(gè)元素和下標(biāo)
              if(arrNum[i] > maxNum){
                  maxNum = arrNum[i]; // 保存數(shù)值到變量 maxNum
              }
          }

          4.將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素轉(zhuǎn)換為字符串

          思路:就是把里面的元素相加就好了,但是注意保證是字符相加

          • ①需要一個(gè)新變量 str 用于存放轉(zhuǎn)換完的字符串。
          • ②遍歷原來的數(shù)組,分別把里面數(shù)據(jù)取出來,加到字符串變量 str 里面。
          var arr = ['red','green','blue','pink'];
          var str ='';
          for(var i = 0; i < arr.length; i++){
              str += arr[i];
          }
          console.log(str);
          // redgreenbluepink

          5.將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’] 轉(zhuǎn)換為字符串,并且用 | 或其他符號分割

          • ①需要一個(gè)新變量用于存放轉(zhuǎn)換完的字符串 str。
          • ①遍歷原來的數(shù)組,分別把里面數(shù)據(jù)取出來,加到字符串里面。
          • ①同時(shí)在后面多加一個(gè)分隔符。
          var arr = ['red', 'green', 'blue', 'pink'];
          var str = '';
          var separator = '|';
          for (var i = 0; i < arr.length; i++) {
             str += arr[i] + separator;
          }
          console.log(str);
          // red|green|blue|pink

          5.6、數(shù)組中新增元素

          ①通過修改 length 長度新增數(shù)組元素

          • 可以通過修改 length 長度來實(shí)現(xiàn)數(shù)組擴(kuò)容的目的
          • length 屬性是可讀寫的
          var arr = ['red', 'green', 'blue', 'pink'];
          arr.length = 7;
          console.log(arr);
          console.log(arr[4]);
          console.log(arr[5]);
          console.log(arr[6]);

          其中索引號是 4,5,6 的空間沒有給值,就是聲明變量未給值,默認(rèn)值就是 undefined

          ②通過修改數(shù)組索引新增數(shù)組元素

          • 可以通過修改數(shù)組索引的方式追加數(shù)組元素
          • 不能直接給數(shù)組名賦值,否則會覆蓋掉以前的數(shù)據(jù)
          • 這種方式也是我們最常用的一種方式
          var arr = ['red', 'green', 'blue', 'pink'];
          arr[4] = 'hotpink';
          console.log(arr);

          5.7、數(shù)組中新增元素

          1.新建一個(gè)數(shù)組,里面存放10個(gè)整數(shù)( 1~10), 要求使用循環(huán)追加的方式輸出: [1,2,3,4,5,6,7,8,9,10]

          • ①使用循環(huán)來追加數(shù)組。
          • ②聲明一個(gè)空數(shù)組 arr。
          • ③循環(huán)中的計(jì)數(shù)器 i 可以作為數(shù)組元素存入。
          • 由于數(shù)組的索引號是從0開始的, 因此計(jì)數(shù)器從 0 開始更合適,存入的數(shù)組元素要+1。
          var arr = [];
          for (var i = 0; i < 10; i++){
              arr[i] = i + 1;
          }
          console.log(arr);

          2.將數(shù)組 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素選出來,放入新數(shù)組

          • ①聲明一個(gè)新的數(shù)組用于存放新數(shù)據(jù)。
          • ②遍歷原來的數(shù)組,找出大于等于 10 的元素。
          • ③依次追加給新數(shù)組 newArr。

          實(shí)現(xiàn)代碼1:

          var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
          var newArr = [];
          // 定義一個(gè)變量 用來計(jì)算 新數(shù)組的索引號
          var j = 0;
          for (var i = 0; i < arr.length; i++) {
              if (arr[i] >= 10) {
                  // 給新數(shù)組
                  newArr[j] = arr[i];
                  // 索引號 不斷自加
                  j++;
              }
          }
          console.log(newArr);

          實(shí)現(xiàn)代碼2:

          var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
          var newArr = [];
          for (var i = 0; i < arr.length; i++) {
              if (arr[i] >= 10) {
                  // 給新數(shù)組
                  newArr[newArr.length] = arr[i];
              }
          }
          console.log(newArr);

          5.8、刪除指定數(shù)組元素

          將數(shù)組[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后,形成一個(gè)不包含 0 的新數(shù)組。

          var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
          var newArr = [];
          for(var i = 0; i <arr.length; i++){
              if(arr[i] != 0){
                  newArr[newArr.length] = arr[i];
              }
          }
          console.log(newArr);
          
          //老師代碼
          var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
          var newArr = [];   // 空數(shù)組的默認(rèn)的長度為 0 
          // 定義一個(gè)變量 i 用來計(jì)算新數(shù)組的索引號
          for (var i = 0; i < arr.length; i++) {
              // 找出大于 10 的數(shù)
              if (arr[i] != 0) {
                  // 給新數(shù)組
                  // 每次存入一個(gè)值,newArr長度都會 +1  
                  newArr[newArr.length] = arr[i];
              }
          }
          console.log(newArr);

          5.9、翻轉(zhuǎn)數(shù)組

          將數(shù)組 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的內(nèi)容反過來存放

          // 把舊數(shù)組索引號的第4個(gè)取過來(arr.length - 1),給新數(shù)組索引號第0個(gè)元素(newArr.length)
          var arr = ['red','green','blue','pink','purple'];
          var newArr = [];
          for (var i = arr.length -1; i>=0; i--){
              newArr[newArr.length] = arr[i];
          }
          console.log(newArr);

          5.10、數(shù)組排序

          冒泡排序

          將數(shù)組 [5, 4, 3, 2, 1]中的元素按照從小到大的順序排序,輸出: 1,2,3,4,5

          var arr = [5,4,3,2,1];
          for (var i = 0; i < arr.length-1; i++){ //外層循環(huán)管趟數(shù),5個(gè)數(shù)共交換4躺
              for (var j = 0; j <= arr.length - i - 1; j++){
                  //里層循環(huán)管每一趟交換的次數(shù)
                  //前一個(gè)和后面一個(gè)數(shù)組元素相比較
                  if(arr[j] > arr[j+1]){
                      var temp = arr[j];
                      arr[j] = arr[j+1];
                      arr[j+1] = temp;
                  }  
              }
          }
          console.log(arr);

          匯總結(jié)束,希望對各位朋友有幫助,覺得還不錯(cuò)的給個(gè)點(diǎn)贊支撐支撐

          前,一個(gè)典型的前端項(xiàng)目技術(shù)框架的選型主要包括以下三個(gè)方面:

          1. JS模塊化框架。(Require/Sea/ES6 Module/NEJ)

          2. 前端模板框架。(React/Vue/Regular)

          3. 狀態(tài)管理框架。(Flux/Redux)

            系列文章將從上面三個(gè)方面來介紹相關(guān)原理,并且嘗試自己造一個(gè)簡單的輪子。

          本篇介紹的是 JS模塊化

          JS模塊化是隨著前端技術(shù)的發(fā)展,前端代碼爆炸式增長后,工程化所采取的必然措施。目前模塊化的思想分為CommonJS、AMD和CMD。有關(guān)三者的區(qū)別,大家基本都多少有所了解,而且資料很多,這里就不再贅述。

          模塊化的核心思想:

          1. 拆分 。將js代碼按功能邏輯拆分成多個(gè)可復(fù)用的js代碼文件(模塊)。

          2. 加載 。如何將模塊進(jìn)行加載執(zhí)行和輸出。

          3. 注入 。能夠?qū)⒁粋€(gè)js模塊的輸出注入到另一個(gè)js模塊中。

          4. 依賴管理 。前端工程模塊數(shù)量眾多,需要來管理模塊之間的依賴關(guān)系。

          根據(jù)上面的核心思想,可以看出要設(shè)計(jì)一個(gè)模塊化工具框架的關(guān)鍵問題有兩個(gè):一個(gè)是如何將一個(gè)模塊執(zhí)行并可以將結(jié)果輸出注入到另一個(gè)模塊中;另一個(gè)是,在大型項(xiàng)目中模塊之間的依賴關(guān)系很復(fù)雜,如何使模塊按正確的依賴順序進(jìn)行注入,這就是依賴管理。

          下面以具體的例子來實(shí)現(xiàn)一個(gè)簡單的 基于瀏覽器端AMD 模塊化框架(類似NEJ),對外暴露一個(gè)define函數(shù),在回調(diào)函數(shù)中注入依賴,并返回模塊輸出。要實(shí)現(xiàn)的如下面代碼所示。

          define([ '/lib/util.js', //絕對路徑
          './modal/modal.js', //相對路徑
          './modal/modal.html',//文本文件], function(Util, Modal, tpl) { /*
           * 模塊邏輯
           */
          return Module;
          })

          1. 模塊如何加載和執(zhí)行

          先不考慮一個(gè)模塊的依賴如何處理。假設(shè)一個(gè)模塊的依賴已經(jīng)注入,那么如何加載和執(zhí)行該模塊,并輸出呢?

          在瀏覽器端,我們可以借助瀏覽器的 script 標(biāo)簽來實(shí)現(xiàn) JS模塊文件 的引入和執(zhí)行,對于 文本模塊文件 則可以直接利用 ajax 請求實(shí)現(xiàn)。

          具體步驟如下:

          • 第一步,獲取 模塊文件的絕對路徑

            要在瀏覽器內(nèi)加載文件,首先要獲得對應(yīng)模塊文件的完整網(wǎng)絡(luò)絕對地址。由于 a標(biāo)簽 的href屬性總是會返回絕對路徑,也就是說它具有把相對路徑轉(zhuǎn)成絕對路徑的能力,所以這里可以利用該特性來獲取模塊的絕對網(wǎng)絡(luò)路徑。需要指出的是,對于使用相對路徑的依賴模塊文件,還需要遞歸先獲取當(dāng)前模塊的網(wǎng)絡(luò)絕對地址,然后和相對路徑拼接成完整的絕對地址。代碼如下:

          var a = document.createElement('a');
          a.id = '_defineAbsoluteUrl_';
          a.style.display = 'none';document.body.appendChild(a);function getModuleAbsoluteUrl(path) {
          a.href = path; return a.href;
          }function parseAbsoluteUrl(url, parentDir) { var relativePrefix = '.',
          parentPrefix = '..',
          result; if (parentDir && url.indexOf(relativePrefix) === 0) { // 以'./'開頭的相對路徑
          return getModuleAbsoluteUrl(parentDir.replace(/[^\/]*$/, '') + url);
          } if (parentDir && url.indexOf(parentPrefix) === 0) { // 以'../'開頭的相對路徑
          return getModuleAbsoluteUrl(parentDir.replace(/[\/]*$/, '').replace(/[\/]$/, '').replace(/[^\/]*$/, '') + url);
          } return getModuleAbsoluteUrl(url);
          }
          • 第二步, 加載和執(zhí)行模塊文件

          對于JS文件,利用 script 標(biāo)簽實(shí)現(xiàn)。代碼如下:

          var head = document.getElementsByTagName('head')[0] || document.body;
          
          function loadJsModule(url) { 
           var script = document.createElement('script');
          script.charset = 'utf-8';
          script.type = 'text/javascript';
          script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { /*
           * 加載邏輯, callback為define的回調(diào)函數(shù), args為所有依賴模塊的數(shù)組
           * callback.apply(window, args);
           */
          script.onload = script.onreadystatechange = null;
          } 
          };
          }

          對于文本文件,直接用 ajax 實(shí)現(xiàn)。代碼如下:

          var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'),
          textContent = '';
          xhr.onreadystatechange = function(){ var DONE = 4, OK = 200; if(xhr.readyState === DONE){ if(xhr.status === OK){
          textContent = xhr.responseText; // 返回的文本文件
          } else{ console.log("Error: "+ xhr.status); // 加載失敗
          }
          }
          }
          xhr.open('GET', url, true);// url為文本文件的絕對路徑xhr.send(null);

          2. 模塊依賴管理

          一個(gè)模塊的加載過程如下圖所示。

          • 狀態(tài)管理

            從上面可以看出,一個(gè)模塊的加載可能存在以下幾種可能的狀態(tài)。

          1. 加載(load)狀態(tài),包括未加載(preload)狀態(tài)、加載(loading)狀態(tài)和加載完畢(loaded)狀態(tài)。

          2. 正在加載依賴(pending)狀態(tài)。

          3. 模塊回調(diào)完成(finished)狀態(tài)。

            因此,需要為每個(gè)加載的模塊加上狀態(tài)標(biāo)志(status),來識別目前模塊的狀態(tài)。

          • 依賴分析

            在模塊加載后,我們需要解析出每個(gè)模塊的絕對路徑(path)、依賴模塊(deps)和回調(diào)函數(shù)(callback),然后也放在模塊信息中。模塊對象管理邏輯的數(shù)據(jù)模型如下所示。

            {
            path: 'http://asdas/asda/a.js',
            deps: [{}, {}, {}],
            callback: function(){ },
            status: 'pending'
            }
          • 依賴循環(huán)

            模塊很可能出現(xiàn)循環(huán)依賴的情況。也就是a模塊和b模塊相互依賴。依賴分為 強(qiáng)依賴弱依賴強(qiáng)依賴 是指,在模塊回調(diào)執(zhí)行時(shí)就會使用到的依賴;反之,就是 弱依賴 。對于 強(qiáng)依賴,會造成死鎖,這種情況是無法解決的。但 弱依賴 可以通過現(xiàn)將一個(gè)空的模塊引用注入讓一個(gè)模塊先執(zhí)行,等依賴模塊執(zhí)行完后,再替換掉就可以了。 強(qiáng)依賴弱依賴 的例子如下:

          //強(qiáng)依賴的例子
          //A模塊
          define(['b.js'], function(B) { 
           // 回調(diào)執(zhí)行時(shí)需要直接用到依賴模塊
          B.demo = 1; // 其他邏輯});//B模塊define(['a.js'], function(A) { // 回調(diào)執(zhí)行時(shí)需要直接用到依賴模塊
          A.demo = 1; // 其他邏輯});
          // 弱依賴的例子
          // A模塊
          define(['b.js'], function(B) { 
           // 回調(diào)執(zhí)行時(shí)不會直接執(zhí)行依賴模塊
          function test() {
          B.demo = 1;
          } return {testFunc: test}
          });//B模塊define(['a.js'], function(A) { // 回調(diào)執(zhí)行時(shí)不會直接執(zhí)行依賴模塊
          function test() {
          A.demo = 1;
          } return {testFunc: test}
          });

          3. 對外暴露define方法

          對于define函數(shù),需要遍歷所有的未處理js腳本(包括 內(nèi)聯(lián)外聯(lián) ),然后執(zhí)行模塊的加載。這里對于 內(nèi)聯(lián)外聯(lián) 腳本中的define,要做分別處理。主要原因有兩點(diǎn):

          1. 內(nèi)斂腳本不需要加載操作。

          2. 內(nèi)斂腳本中define的模塊的回調(diào)輸出是不能作為其他模塊的依賴的。

          var handledScriptList = [];
          window.define = function(deps, callback) { var scripts = document.getElementsByTagName('script'),
          defineReg = /s*define\s*\(\[.*\]\s*\,\s*function\s*\(.*\)\s*\{/,
          script; for (var i = scripts.length - 1; i >= 0; i--) {
          script = list[i]; if (handledScriptList.indexOf(script.src) < 0) {
          handledScriptList.push(script.src); if (script.innerHTML.search(defineReg) >= 0) { // 內(nèi)斂腳本直接進(jìn)行模塊依賴檢查。
          } else { // 外聯(lián)腳本的首先要監(jiān)聽腳本加載
          }
          }
          }
          };

          上面就是對實(shí)現(xiàn)一個(gè)模塊化工具所涉及核心問題的描述。

          OM

          • 今天開始我們開始使用 js 去操作瀏覽器和頁面中的 html 元素了

          BOM

          • BOM(Browser Object Model): 瀏覽器對象模型
          • 其實(shí)就是操作瀏覽器的一些能力
          • 我們可以操作哪些內(nèi)容
          • 獲取一些瀏覽器的相關(guān)信息(窗口的大小)
          • 操作瀏覽器進(jìn)行頁面跳轉(zhuǎn)
          • 獲取當(dāng)前瀏覽器地址欄的信息
          • 操作瀏覽器的滾動條
          • 瀏覽器的信息(瀏覽器的版本)
          • 讓瀏覽器出現(xiàn)一個(gè)彈出框(alert/confirm/prompt)
          • BOM 的核心就是 window 對象
          • window 是瀏覽器內(nèi)置的一個(gè)對象,里面包含著操作瀏覽器的方法

          獲取瀏覽器窗口的尺寸

          • innerHeight 和 innerWidth
          • 這兩個(gè)方法分別是用來獲取瀏覽器窗口的寬度和高度(包含滾動條的)
          var windowHeight = window.innerHeight
          console.log(windowHeight)
          ?
          var windowWidth = window.innerWidth
          console.log(windowWidth)

          瀏覽器的彈出層

          • alert 是在瀏覽器彈出一個(gè)提示框
          window.alert('我是一個(gè)提示框')
          • 這個(gè)彈出層只是一個(gè)提示內(nèi)容,只有一個(gè)確定按鈕
          • 點(diǎn)擊確定按鈕以后,這個(gè)提示框就消失了

          • confirm 是在瀏覽器彈出一個(gè)詢問框
          var boo = window.confirm('我是一個(gè)詢問框')
          console.log(boo)
          • 這個(gè)彈出層有一個(gè)詢問信息和兩個(gè)按鈕
          • 當(dāng)你點(diǎn)擊確定的時(shí)候,就會得到 true
          • 當(dāng)你點(diǎn)擊取消的時(shí)候,就會得到 false



          • prompt 是在瀏覽器彈出一個(gè)輸入框
          var str = window.prompt('請輸入內(nèi)容')
          console.log(str)
          • 這個(gè)彈出層有一個(gè)輸入框和兩個(gè)按鈕
          • 當(dāng)你點(diǎn)擊取消的時(shí)候,得到的是 null
          • 當(dāng)你點(diǎn)擊確定的時(shí)候得到的就是你輸入的內(nèi)容

          瀏覽器的地址信息

          • 在 window 中有一個(gè)對象叫做 location
          • 就是專門用來存儲瀏覽器的地址欄內(nèi)的信息的

          location.href

          • location.href 這個(gè)屬性存儲的是瀏覽器地址欄內(nèi) url 地址的信息
          console.log(window.location.href)
          • 會把中文編程 url 編碼的格式
          • location.href 這個(gè)屬性也可以給他賦值
          window.location.href = './index.html'
          // 這個(gè)就會跳轉(zhuǎn)頁面到后面你給的那個(gè)地址

          location.reload

          • location.reload() 這個(gè)方法會重新加載一遍頁面,就相當(dāng)于刷新是一個(gè)道理
          window.location.reload()
          • 注意: 不要寫在全局,不然瀏覽器就會一直處在刷新狀態(tài)

          瀏覽器的歷史記錄

          • window 中有一個(gè)對象叫做 history
          • 是專門用來存儲歷史記錄信息的

          history.back

          • history.back 是用來會退歷史記錄的,就是回到前一個(gè)頁面,就相當(dāng)于瀏覽器上的 ?? 按鈕 window.history.back()
          • 前提是你要有上一條記錄,不然就是一直在這個(gè)頁面,也不會回退

          history.forword

          • history.forword 是去到下一個(gè)歷史記錄里面,也就是去到下一個(gè)頁面,就相當(dāng)于瀏覽器上的 ?? 按鈕 window.history.forward()
          • 前提是你要之前有過回退操作,不然的話你現(xiàn)在就是最后一個(gè)頁面,沒有下一個(gè)

          瀏覽器的版本信息(了解)

          • window 中有一個(gè)對象叫做 navigator
          • 是專門用來獲取瀏覽器信息的

          navigator.userAgent

          • navigator.userAgent 是獲取的瀏覽器的整體信息
          console.log(window.navigator.userAgent)
          // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

          navigator.appName

          • navigator.appName 獲取的是瀏覽器的名稱
          console.log(window.navigator.appName)

          navigator.appVersion

          • navigator.appVersion 獲取的是瀏覽器的版本號
          console.log(window.navigator.appVersion)

          navigator.platform

          • navigator.platform 獲取到的是當(dāng)前計(jì)算機(jī)的操作系統(tǒng)
          console.log(window.navigator.platform)

          瀏覽器的 onload 事件

          • 這個(gè)不再是對象了,而是一個(gè)事件
          • 是在頁面所有資源加載完畢后執(zhí)行的
          window.onload = function () {
              console.log('頁面已經(jīng)加載完畢')
          }

          在 html 頁面中把 js 寫在 head 里面

          <html>
            <head>
              <meta charset="UTF-8" />
              <script>
                  // 這個(gè)代碼執(zhí)行的時(shí)候,body 還沒有加載
                // 這個(gè)時(shí)候我們就獲取不到 body 中的那個(gè) div
                
                // 就需要使用 window.onload 事件
                window.onload = function () {
                  // 這個(gè)函數(shù)會在頁面加載完畢以后在執(zhí)行
                  // 那么這個(gè)時(shí)候頁面的 DOM 元素都已經(jīng)加載了,我們就可以獲取 div 了
                }
              </script>
            </head>
            <body>
              <div></div>
            </body>
          </html>

          在 html 頁面中把 js 寫在 body 最后面

          <html>
            <head>
              <meta charset="UTF-8" />
            </head>
            <body>
              <div></div>
              
              <script>
                  // 這個(gè)代碼執(zhí)行的時(shí)候,body 已經(jīng)加載完畢了
                // 在這里就可以獲取到 div,寫不寫 window.onload 就無所謂了
                
                window.onload = function () {
                  // 這個(gè)函數(shù)會在頁面加載完畢以后在執(zhí)行
                  // 那么這個(gè)時(shí)候頁面的 DOM 元素都已經(jīng)加載了,我們就可以獲取 div 了
                }
              </script>
            </body>
          </html>

          瀏覽器的 onscroll 事件

          • 這個(gè) onscroll 事件是當(dāng)瀏覽器的滾動條滾動的時(shí)候觸發(fā)
          • 或者鼠標(biāo)滾輪滾動的時(shí)候出發(fā)
          window.onscroll = function () {
           console.log('瀏覽器滾動了')
          }
          
          
          • 注意:前提是頁面的高度要超過瀏覽器的可視窗口才可以

          瀏覽器滾動的距離

          • 瀏覽器內(nèi)的內(nèi)容既然可以滾動,那么我們就可以獲取到瀏覽器滾動的距離
          • 思考一個(gè)問題?
          • 瀏覽器真的滾動了嗎?
          • 其實(shí)我們的瀏覽器是沒有滾動的,是一直在那里
          • 滾動的是什么?是我們的頁面
          • 所以說,其實(shí)瀏覽器沒有動,只不過是頁面向上走了
          • 所以,這個(gè)已經(jīng)不能單純的算是瀏覽器的內(nèi)容了,而是我們頁面的內(nèi)容
          • 所以不是在用 window 對象了,而是使用 document 對象

          scrollTop

          • 獲取的是頁面向上滾動的距離
          • 一共有兩個(gè)獲取方式
          • document.body.scrollTop
          • document.documentElement.scrollTop
          window.onscroll = function () {
           console.log(document.body.scrollTop)
           console.log(document.documentElement.scrollTop)
          }
          • 兩個(gè)都是獲取頁面向上滾動的距離
          • 區(qū)別:
          • IE 瀏覽器
          • 沒有 DOCTYPE 聲明的時(shí)候,用這兩個(gè)都行
          • 有 DOCTYPE 聲明的時(shí)候,只能用 document.documentElement.scrollTop
          • Chrome 和 FireFox
          • 沒有 DOCTYPE 聲明的時(shí)候,用 document.body.scrollTop
          • 有 DOCTYPE 聲明的時(shí)候,用 document.documentElement.scrollTop
          • Safari
          • 兩個(gè)都不用,使用一個(gè)單獨(dú)的方法 window.pageYOffset

          scrollLeft

          • 獲取頁面向左滾動的距離
          • 也是兩個(gè)方法
          • document.body.scrollLeft
          • document.documentElementLeft
          window.onscroll = function () {
           console.log(document.body.scrollLeft)
           console.log(document.documentElement.scrollLeft)
          }
          • 兩個(gè)之間的區(qū)別和之前的 scrollTop 一樣

          定時(shí)器

          • 在 js 里面,有兩種定時(shí)器,倒計(jì)時(shí)定時(shí)器間隔定時(shí)器

          倒計(jì)時(shí)定時(shí)器

          • 倒計(jì)時(shí)多少時(shí)間以后執(zhí)行函數(shù)
          • 語法: setTimeout(要執(zhí)行的函數(shù),多長時(shí)間以后執(zhí)行)
          • 會在你設(shè)定的時(shí)間以后,執(zhí)行函數(shù)
          var timerId = setTimeout(function () {
           console.log('我執(zhí)行了')
          }, 1000)
          console.log(timerId) // 1
          • 時(shí)間是按照毫秒進(jìn)行計(jì)算的,1000 毫秒就是 1秒鐘
          • 所以會在頁面打開 1 秒鐘以后執(zhí)行函數(shù)
          • 只執(zhí)行一次,就不再執(zhí)行了
          • 返回值是,當(dāng)前這個(gè)定時(shí)器是頁面中的第幾個(gè)定時(shí)器

          間隔定時(shí)器

          • 每間隔多少時(shí)間就執(zhí)行一次函數(shù)
          • 語法: setInterval(要執(zhí)行的函數(shù),間隔多少時(shí)間)
          var timerId = setInterval(function () {
           console.log('我執(zhí)行了')
          }, 1000)
          • 時(shí)間和剛才一樣,是按照毫秒進(jìn)行計(jì)算的
          • 每間隔 1 秒鐘執(zhí)行一次函數(shù)
          • 只要不關(guān)閉,會一直執(zhí)行
          • 返回值是,當(dāng)前這個(gè)定時(shí)器是頁面中的第幾個(gè)定時(shí)器

          定時(shí)器的返回值

          • 設(shè)置定時(shí)器的時(shí)候,它的返回值是部分 setTimeout 和 setInterval 的
          • 只要有一個(gè)定時(shí)器,那么就是一個(gè)數(shù)字
          var timerId = setTimeout(function () {
           console.log('倒計(jì)時(shí)定時(shí)器')
          }, 1000)
          ?
          var timerId2 = setInterval(function () {
           console.log('間隔定時(shí)器')
          }, 1000)
          ?
          console.log(timerId) // 1
          console.log(timerId2) // 2

          關(guān)閉定時(shí)器

          • 我們剛才提到過一個(gè) timerId,是表示這個(gè)定時(shí)器是頁面上的第幾個(gè)定時(shí)器
          • 這個(gè) timerId 就是用來關(guān)閉定時(shí)器的數(shù)字
          • 我們有兩個(gè)方法來關(guān)閉定時(shí)器 clearTimeout 和 clearInterval
          var timerId = setTimeout(function () {
           console.log('倒計(jì)時(shí)定時(shí)器')
          }, 1000)
          clearTimeout(timerId)
          • 關(guān)閉以后,定時(shí)器就不會再執(zhí)行了
          var timerId2 = setInterval(function () {
           console.log('間隔定時(shí)器')
          }, 1000)
          coearInterval(timerId2)
          • 關(guān)閉以后定時(shí)器就不會再執(zhí)行了
          • 原則上是
          • clearTimeout 關(guān)閉 setTimeout
          • clearInterval 關(guān)閉 setInterval
          • 但是其實(shí)是可以通用的,他們可以混著使用

          主站蜘蛛池模板: 韩国精品福利一区二区三区| 国产精品伦一区二区三级视频| 日韩精品一区二三区中文 | 99在线精品一区二区三区| 亚洲AⅤ无码一区二区三区在线| 亚洲一区精品中文字幕| 亚洲日韩精品无码一区二区三区| 在线观看精品视频一区二区三区| 亚洲一区二区三区免费观看| 久久精品国产一区二区三区日韩| 变态拳头交视频一区二区| 免费国产在线精品一区| 波多野结衣中文一区| 国产成人精品一区二区三在线观看| 中文字幕乱码一区久久麻豆樱花| 亚洲福利一区二区| 99久久精品日本一区二区免费| 中文字幕一区视频| 2022年亚洲午夜一区二区福利| 亚洲视频一区二区三区| 中文乱码字幕高清一区二区| 国产精品视频分类一区| 亚洲AV无码国产一区二区三区 | 春暖花开亚洲性无区一区二区 | 无码AV天堂一区二区三区| 国模大尺度视频一区二区| 中文字幕乱码一区二区免费| 国产精品特级毛片一区二区三区| 国偷自产一区二区免费视频| 少妇特黄A一区二区三区| 无码国产精品一区二区免费| 精品一区二区ww| 国产不卡视频一区二区三区| 亚洲综合无码AV一区二区| 无码人妻精品一区二区在线视频 | 日本一区二区三区在线网| 好吊视频一区二区三区| 久久国产免费一区| 无码少妇一区二区三区芒果| V一区无码内射国产| 无码国产精品一区二区免费模式|