日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網(wǎng)為廣大站長提供免費(fèi)收錄網(wǎng)站服務(wù)，提交前請(qǐng)做好本站友鏈：【 網(wǎng)站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務(wù)（50元/站），

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會(huì)員：747

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

發(fā)布時(shí)間：2023-07-02 23:53:33 作者：網(wǎng)友整理

?初識(shí)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代碼，對(duì)其處理后運(yùn)行，比如 chrome 瀏覽器的 V8

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

 

?JS的組成

JavaScript 包括 ECMAScript、DOM、BOM

 

 

?ECMAScript

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

 

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

DOM文檔對(duì)象模型

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

BOM瀏覽器對(duì)象模型

BOM (Browser Object Model，簡稱BOM) 是指瀏覽器對(duì)象模型，它提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(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. 注意單雙引號(hào)的使用：在HTML中我們推薦使用雙引號(hào)，JS中我們推薦使用單引號(hào)
  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);

瀏覽器控制臺(tái)打印輸出信息

瀏覽器

prompt(info);

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

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

2.3、變量

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

2.3.1、變量初始化

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

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)，下劃線(_)，美元符號(hào)($)組成，如: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 **是一種弱類型或者說動(dòng)態(tài)語言。**這意味著不用提前聲明變量的類型，在程序運(yùn)行過程中，類型會(huì)被自動(dòng)確定。

var age = 10; 			 //這是一個(gè)數(shù)字型
var areYouOk = '使得';	//這是一個(gè)字符串
12
  • 在代碼運(yùn)行時(shí)，變量的數(shù)據(jù)類型是由 JS引擎 根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷 的，運(yùn)行完畢之后， 變量就確定了數(shù)據(jù)類型。
  • JavaScript 擁有動(dòng)態(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; 		//對(duì)應(yīng)十進(jìn)制的7
var Num2 = 019;		//對(duì)應(yīng)十進(jìn)制的19
var num3 = 08;		//對(duì)應(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

字符串型可以是引號(hào)中的任意文本，其語法為 “雙引號(hào)” 和 "單引號(hào)’’

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

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

①字符串引號(hào)嵌套

JS可以用 單引號(hào)嵌套雙引號(hào)，或者用 雙引號(hào)嵌套單引號(hào)（外雙內(nèi)單，外單內(nèi)雙）

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

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

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

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

轉(zhuǎn)義符

解釋說明

n

換行符，n是newline

斜杠

’

’ 單引號(hào)

‘’

‘’ 雙引號(hào)

t

tab 縮進(jìn)

b

空格，b是blank的意思

③字符串長度

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

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

④字符串的拼接

  • 多個(gè)字符串之間可以使用 + 進(jìn)行拼接，其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
  • 拼接前會(huì)把與字符串相加的任何類型轉(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
  • + 號(hào)總結(jié)口訣：數(shù)值相加，字符相連
var  age = 18;
console.log('我今年'+age+'歲');
console.log('我今年'+age+'歲');  //引引加加，最終也是上面的形式

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

console.log('Pink老師' + 18);			//只要有字符就會(huì)相連
var age = 18;
// console.log('Pink老師age歲了');		//這樣不行,會(huì)輸出 "Pink老師age歲了"

console.log('Pink老師' + age);		 // Pink老師18
console.log('Pink老師' + age + '歲啦');	// Pink老師18歲啦
  • 我們經(jīng)常會(huì)將字符串和變量來拼接，因?yàn)樽兞靠梢院芊奖愕匦薷睦锩娴闹?/li>
  • 變量是不能添加引號(hào)的，因?yàn)榧右?hào)的變量會(huì)變成字符串
  • 如果變量兩側(cè)都有字符串拼接，口訣==“引引加加 ”，刪掉數(shù)字==變量寫加中間

2.4.4、布爾型Boolean

  • 布爾類型有兩個(gè)值：true 和 false ，其中 true 表示真（對(duì)），而 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è)聲明后沒有被賦值的變量會(huì)有一個(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 和 字符串 相加，會(huì)拼接字符串

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 可用來獲取檢測(cè)變量的數(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

通過控制臺(tái)的顏色判斷屬于哪種數(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ù)類型。

我們通常會(huì)實(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));

加號(hào)拼接字符串

和字符串拼接的結(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)換方式，我們更喜歡用第三種加號(hào)拼接字符串轉(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('請(qǐng)輸入您的年齡');
consolo.log(parseInt(age));  //數(shù)字型18
consolo.log(parseInt('3.14'));  //3取整
consolo.log(parseInt('3.94'));  //3,不會(huì)四舍五入
consolo.log(parseInt('120px'));  //120,會(huì)去掉單位

// 2.parseFloat()
console.log(parseFloat('3.14'));  //3.14
consolo.log(parseFloat('120px'));  //120,會(huì)去掉單位


// 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.注意 parseInt 和 parseFloat ，這兩個(gè)是重點(diǎn)

2.隱式轉(zhuǎn)換是我們?cè)谶M(jìn)行算數(shù)運(yùn)算的時(shí)候，JS自動(dòng)轉(zhuǎn)換了數(shù)據(jù)類型

③轉(zhuǎn)換為布爾型

方法

說明

案例

Boolean()函數(shù)

其他類型轉(zhuǎn)成布爾值

Boolean(‘true’);
  • 代表空，否定的值會(huì)被轉(zhuǎn)換為false，如 ’ ’ , 0, NaN , null , undefined
  • 其余的值都會(huì)被被轉(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)算等功能的符號(hào)

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

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

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

概念：算術(shù)運(yùn)算使用的符號(hào)，用于執(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é)果會(huì)不同
  • 開發(fā)時(shí)，大多使用后置遞增/減，并且代碼獨(dú)占一行

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

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

運(yùn)算符名稱

說明

案例

結(jié)果

<

小于號(hào)

1 < 2

true

>

大于號(hào)

1 > 2

false

>=

大于等于號(hào)(大于或者等于)

2 >= 2

true

<=

小于等于號(hào)(小于或者等于)

3 <= 2

false

==

判等號(hào)(會(huì)轉(zhuǎn)型)

37 == 37

true

!=

不等號(hào)

37 != 37

false

=== !==

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

37 === ‘37’

false

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

符號(hào)

作用

用法

=

賦值

把右邊給左邊

==

判斷

判斷兩邊值是否相等(注意此時(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)先級(jí)

優(yōu)先級(jí)

運(yùn)算符

順序

1

小括號(hào)

()

2

一元運(yùn)算符

++ – ！

3

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

先 * / 后 + -

4

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

>, >= , < , <=,

5

相等運(yùn)算符

，！=，=，！==

6

邏輯運(yùn)算符

先 && 后 ||（先與后或）

7

賦值運(yùn)算符

=

8

逗號(hào)運(yùn)算符

，

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

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

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('請(qǐng)輸入您的年齡:');
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('請(qǐng)輸入年份');
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ù)輸出對(duì)應(yīng)的等級(jí)字母 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('請(qǐng)您輸入分?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('請(qǐng)輸入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 后面括號(hào)內(nèi)可以是表達(dá)式或值， 通常是一個(gè)變量
  • 關(guān)鍵字 case , 后跟一個(gè)選項(xiàng)的表達(dá)式或值，后面跟一個(gè)冒號(hào)
  • switch 表達(dá)式的值會(huì)與結(jié)構(gòu)中的 case 的值做比較
  • 如果存在匹配全等(===) ，則與該 case 關(guān)聯(lián)的代碼塊會(huì)被執(zhí)行，并在遇到 break 時(shí)停止，整個(gè) switch 語句代碼執(zhí)行結(jié)束
  • 如果所有的 case 的值都和表達(dá)式的值不匹配，則執(zhí)行 default 里的代碼
  • 執(zhí)行case 里面的語句時(shí)，如果沒有break，則繼續(xù)執(zhí)行下一個(gè)case里面的語句
// 用戶在彈出框里面輸入一個(gè)水果，如果有就彈出該水果的價(jià)格， 如果沒有該水果就彈出“沒有此水果”
 var fruit = prompt('請(qǐng)您輸入查詢的蘋果');
        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('請(qǐng)輸入次數(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.要求用戶輸入班級(jí)人數(shù)，之后依次輸入每個(gè)學(xué)生的成績，最后打印出該班級(jí)總的成績以及平均成績。

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

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

我們采取追加字符串的方式，這樣可以打印到控制臺(tái)上

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ù)，之后在控制臺(tái)打印出用戶輸入行數(shù)和列數(shù)的星星

var star = '';
var row = prompt('請(qǐng)輸入行數(shù)');
var col = prompt('請(qǐng)輸入列數(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('請(qǐng)輸入行數(shù)');
var col = prompt('請(qǐng)輸入列數(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í)行完畢后，程序會(huì)繼續(xù)判斷執(zhí)行條件表達(dá)式，如條件仍為true，則會(huì)繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為 false 時(shí)，整個(gè)循環(huán)過程才會(huì)結(jié)束

注意：

  • 使用 while 循環(huán)時(shí)一定要注意，它必須要有退出條件，否則會(huì)稱為死循環(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)語句至少會(huì)執(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 之后的代碼就會(huì)少執(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ù)存儲(chǔ)在單個(gè)變量名下的優(yōu)雅方式。

//普通變量一次只能存儲(chǔ)一個(gè)值
var num = 10;
//數(shù)組一次可以存儲(chǔ)多個(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é)完對(duì)象再看
  • 注意 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ù)組的字面量是方括號(hào) []
  • 聲明數(shù)組并賦值稱為數(shù)組的初始化
  • 這種字面量方式也是我們以后最多使用的方式

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

索引 (下標(biāo)) ：用來訪問數(shù)組元素的序號(hào)（數(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ù)組的索引號(hào)混淆
  • 當(dāng)我們數(shù)組里面的元素個(gè)數(shù)發(fā)生了變化，這個(gè) length 屬性跟著一起變化

5.5、案例

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

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)換為字符串，并且用 | 或其他符號(hào)分割

  • ①需要一個(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]);

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

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

  • 可以通過修改數(shù)組索引的方式追加數(shù)組元素
  • 不能直接給數(shù)組名賦值，否則會(huì)覆蓋掉以前的數(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ù)組的索引號(hào)是從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ù)組的索引號(hào)
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 給新數(shù)組
        newArr[j] = arr[i];
        // 索引號(hào) 不斷自加
        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ù)組的索引號(hào)
for (var i = 0; i < arr.length; i++) {
    // 找出大于 10 的數(shù)
    if (arr[i] != 0) {
        // 給新數(shù)組
        // 每次存入一個(gè)值，newArr長度都會(huì) +1  
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

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

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

// 把舊數(shù)組索引號(hào)的第4個(gè)取過來(arr.length - 1),給新數(shù)組索引號(hào)第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é)束，希望對(duì)各位朋友有幫助，覺得還不錯(cuò)的給個(gè)點(diǎn)贊支撐支撐

分享到：
標(biāo)簽：JavaScript
用戶無頭像

網(wǎng)友整理

注冊(cè)時(shí)間：

網(wǎng)站：5 個(gè)   小程序：0 個(gè)  文章：12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊(cè)賬號(hào)，推廣您的網(wǎng)站吧！
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲，玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù)，積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績?cè)u(píng)定2018-06-03

通用課目體育訓(xùn)練成績?cè)u(píng)定