前端零基礎 JS 教學 第三天 03 - day 陣列 與 函式

我想靜靜刁民發表於2019-02-14

今天我們老規矩,繼續複習一下昨天學過的知識:我們來靜靜一下

提示一下:我講的每個字都是乾貨自己提煉的大白話,所有要認真仔細的學習。不懂留言就問啦~不用這麼⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄我想靜靜,別問我靜靜是誰

複習:

 1、 = ==  === 他們的作用和區別分別是什麼?
 	答: 單等是賦值,雙等是判斷(值) 	三等是全等(值,資料型別)
 2、 邏輯運算子 有那三個? 他們的權重依次是什麼
 	答:&& ||  !  權重最高的是: ! && ||
 3、&& 什麼時候為真 || 什麼時候為假
 	答:&&同時滿足為真,  或|| 同時為假即為假
 4、 a+=5 是什麼意思,類似於什麼
 	答:a =  a+ 5 ; 自己加5 
 5、運算子是否有優先順序,我們現在學的優先順序最高的是什麼? 最低的什麼
 	答:優先順序()小括號 賦值= 是最低的
 6、流程控制分為哪三種
 	答:順序 分支 迴圈
 7、什麼時候用分支語句?我們學了那幾個
 	答:多個裡面選擇時候用分支 if...else  if(條件表示式){返回true 和false}
 	分支裡面還有switch(1) 常量{case 1:} 是全等的關係 ===記住不要少了break
 	三元運算子 3>5 ? 3+1 : 5 +1; 這個比if...else 簡單
 8、什麼時候用迴圈語句?我們學了那幾個
 	答:while  do while  for  三個迴圈 迴圈三個條件 計數器, 計數器自增 判斷條件
 9、說出for 迴圈語句執行的順序是怎麼樣的
 	答:for(var i=0; i<=10; i++){xxxx}  執行思路 var i=0;執行一次永遠   i<10是第二步驟
 	xxx 語句是第三步  i++是第四步 所以執行的 2,3,4
 10、說出break 和continue 的區別
	答:break 跳出整個迴圈, continue 是退出本次迴圈 
 11、能會程式碼除錯,查勘程式碼的執行過程
 	答: 開啟瀏覽器 F12 sources ,也可以通過watch 來檢視
複製程式碼

今天我們重點:學習 陣列與函式

理解:
 	 陣列的定義以及操作
 	 陣列字面量
 	 函式的定義以及操作
 	 
 達到的效果是:
 	能使用陣列
 	能遍歷陣列
 	能給陣列排序
 	能使用函式
 	能根據需求封裝函式
 	能使用函式的返回值
複製程式碼

陣列重點 array

    1、為什麼要有陣列
理解:之前學習的資料型別,只能儲存一個值我們想要儲存大量的值,此時如何儲存

陣列的作用:可以把一組組的相關的資料(一起存放),並提供方便的訪問,陣列可以存放多個值,變數只能存放一個值 

 2、什麼是陣列?
 	一組有序的資料
 	
 3、js中建立陣列分為兩種
    字面量:在原始碼中一個固定值得表示法
    
        // 建立陣列1第一種方法
	var arr = new Array(); //這是一個陣列的建構函式 固定用法不能改
	//  建立陣列2第二種方法  陣列字面量 實際開發中常用第二種
	var arr1 = [ ]; 使用中括號
	
案例://給我們的陣列 傳值 儲存資料,
    // 陣列裡面可以放任意的資料型別,可以放多個值
    // 多個資料中間用英文的逗號隔開
    var arr = ['nihao',18,true]; 字元型,數值型,布林型
    console.log(arr);
複製程式碼

前端零基礎 JS 教學 第三天 03 - day 陣列  與   函式

重點: 設定和訪問陣列元素

 1、元素:陣列中每個空間裡存放的資料
    答:就是陣列中的每一個元素
 2、下標索引,用來訪問陣列空間的序號(陣列下標從0開始)
    答:看上面圖裡面的0,1,2陣列從零開始就是索引號也叫下標
 3、陣列可以通過下標來訪問,設定,修改對應小白空間裡的元素
   var arr = ['麼麼噠','你好嗎','親親噠'];
	  // 輸出 你好嗎 
   console.log(arr[1]); //陣列名中括號[索引號] 必須這樣才能輸出想要輸出的那個值
   
提問:
	什麼是陣列元素:答:陣列中的每個資料
	什麼是陣列下標:答:每個陣列都有一個唯一的序號就是下標
	什麼是陣列的索引號: 答:就是陣列的下標
	陣列的索引從幾開始 : 答 0 
 
練習:定義一個陣列,裡面存放星期一到星期日 輸出 星期五
   var arr = ['星期一','星期二','星期三'];
   console.log(arr[2])//星期二
   
正課:陣列的長度
    	var arr = ['星期一','星期二','星期三',1,4,5,6];
    //length 可以動態的獲取陣列的長度
	console.log(arr.length);
複製程式碼

重點 :遍歷陣列所有的成員

var arr = ['星期一','星期二','星期三',1,4,5,6];
	console.log(arr[0])
	console.log(arr[1])
	console.log(arr[2])
我們要是全部列印很麻煩所以想起了迴圈
這裡我們看到 陣列的下標是從0 開始的然後 for 迴圈的for(var i=0;)也是從零開始的所以這就產生了故事
複製程式碼

什麼是遍歷?

遍歷:就是把每個元素從頭到尾都訪問一次,通過for 迴圈進行遍歷

var arr = ['星期一','星期二','星期三',1,4,5,6];
	
//記住i 永遠從0 開始必須的 遍歷陣列必須從0 開始
// for 裡面的i 正好和 陣列的索引對上了 for 迴圈裡面的 var i = 0 這個i 是一個變數
// length 可以動態的獲取陣列元素的個數 所以下面要寫 arr.length 的長度變成動態的

for(var i=0; i<arr.length; i++){
	console.log(i)  //i就相當於索引號下標,就是數字
	console.log(arr[i]); //輸出陣列名[索引號]
}


案例: 求一組數值 [2,6,1,7,5]的和還有平均值

//思路 一次取出裡面的值 之後相加 求和
// 依次 遍歷 for 取出裡面的值 之後相加
var arr = [2,6,1,7,4];
var sum = 0;  //求和
var average = 0; //平均值

for(var i=0; i<arr.length; i++){
	 // 依次遍歷 for 取出裡面的值 之後 相加 一定是陣列名加上索引號是裡面的值
	  sum += arr[i];
	  // sum = sum + arr[i];
}
average = sum  / arr.length;
console.log('陣列想家的和是:'+sum); //陣列相加的和  20
console.log('陣列的平均值是:' + average ); //  4
複製程式碼

陣列謹記 獲取陣列的元素 === 陣列名[索引號]

//遍歷陣列

var arr = [2,3,4,55,66,7,9];
// 遍歷用for var i=0;取零是索引號從0 開始 然後i<arr.length裡面的長度是動態的,然後i++
for(var i=0; i<arr.length;i++){
	// console.log(i); //這裡不要輸出i輸出了i就會輸出了0123456這樣的下標索引號
	// 獲取陣列的元素 ===  陣列名[索引號];
	console.log(arr[i]);
}
複製程式碼

重點案例:求一組陣列中最大的值[11,22,3,4,55,88,33,101,91];

思路:
	1、我們需要一個變數存放最大值max
	     var arr = [11,22,3,4,55,88,33,101,91];
	2、然後開始比較從第一個開始比較把陣列裡面11 放在裡面把陣列裡面的第一個值給max 目的為了和後面的陣列相比較22比11大所以替換成22然後22繼續和後面的比較誰大就把值放到max裡面
	    var max= arr[0] 陣列裡面第一個值
	3、max裡面的值一次與陣列裡面的值相比較 for
	    for(var i=0;i<arr.length;i++)
	4、如果max 裡面的值小於後面的某個值我們應該就把這個大的值賦值給max
	    if(max<=arr[i]){max = arr[i]};

var arr = [11,22,3,4,55,88,33,101,91];
	var max = arr[0]; //陣列裡面第一個值
	for(var i=1; i<arr.length; i++){
		if(max <= arr[i]){
			max = arr[i];
		}
}
	console.log(max); //最大值101
for(var i=1;這裡細心地有人要問我為什麼用1啊不是說0也可以嗎?),用1是因為max=arr[0]已經
把第一個陣列元素給了max這樣在遍歷的時候可以優化遍歷,這就是簡單的程式碼優化

練習:這樣我們再來個練習: 求一組陣列中最小小小的值[11,22,3,4,55,88,33,101,91];
複製程式碼

重要案例:將陣列裡面的資料轉換為字串

案例: 將陣列裡面的資料轉換為字串
var arr = ['red','pink','green','blue'];  //陣列
	var str = '';  //用變數把字串存起來,空字串遍歷
	for(var i=0; i<arr.length;i++){
		// i是索引號
		// arr[i]是元素
		str+=arr[i];
		// str =  str + arr[i];
		// str是空字串,加上arr[i]是零0 是red 加上pink依次這樣就是 redpink....
	}
	// 遍歷陣列把裡面的元素都去出來然後相加,數值相加字元相連 
	console.log(str);
    
案例:將陣列裡面的資料轉換為字串 新增分隔符     
    新增分隔符:
    var arr = ['red','pink','green','blue'];  //陣列
	var str = ''; //空字串
	var spe =','; //這裡新增的分隔符
	for(var i=0; i<arr.length;i++){
		str = str + arr[i] + spe;
	}
	console.log(str);
複製程式碼

陣列追加元素

var arr = [1,2,3,4,5];
	// 想要在裡面追加一個 100 
	// 有人想這樣是不是ok了  arr = 100 這樣輸出的就是100他會覆蓋掉以前的
	arr[5] = 100; //這樣追加成功了因為下標是第五個從零開始
	arr[6] = 101;
	arr[0] = 'A';// 陣列裡面的值可以追加也可以 替換 陣列元素
	console.log(arr);
	console.log(arr.length);

	arr.length = 9;
	console.log(arr);
	console.log(arr[8]);

	// 其中第8,9空間沒有給值 就是宣告變數未給值 預設的就是undefined 
	// 答:陣列裡面原先有值是替換,沒有值是追加 謹記 
	下面是陣列追加的詳解圖
複製程式碼

前端零基礎 JS 教學 第三天 03 - day 陣列  與   函式

陣列思考題:

// 要求將陣列中['andy','jack','memeda','nihaoma']中的 jack 選出來 放到新陣列裡面

var arr = ['andy','jack','memeda','nihaoma'];
	var newArr = [];
	for(var i=0; i<arr.length;i++){
		if('jack' == arr[i]){
			newArr = arr[i];
		}
}
	console.log(newArr);
	
思路:
	1、我們有兩個陣列一箇舊arr 一個新陣列newArr
	2、我們遍歷舊陣列選出jack 然後存放到新陣列裡面
複製程式碼

案例:求出陣列中大於10的元素放在一個新陣列中進行追加不是使用push() 方法使用的 是變數++方法

案例:案例:要求將陣列中大於10的元素選擇出來放入新陣列中,[2,0,6,1,77,52,12,9,4,55,44,5,7,0.52,12,9,4];

        思路:
                1、宣告一個新的陣列用來存放新元素
    		2、遍歷原來的陣列找出大於等於10的元素
    		3、一次追加給新元素

//1、舊陣列
	var arr = [2,0,6,1,77,52,12,9,4,55,44,5,7,0.52,12,9,4];
	//2、 新陣列
	var newArr = [];
	// j用來記錄新陣列的索引號
	var  j=0;
	//3、 遍歷所有舊陣列裡面的元素
	for(var i=0; i<arr.length;i++){
		// i索引號>=10 
		if(arr[i] >=10){
			// 新陣列的索引號和就舊陣列的索引號沒有任何關係所以不能用i
			newArr[j] = arr[i];
			j++;
		}
	}

	console.log(newArr);

	// 思路:兩個陣列 一個新一箇舊,然後遍歷陣列,然後判斷條件大於等於10的選出來,放入新陣列中
	// 謹記:陣列不能直接給值,var arr = [1,2,3] arr = 10;列印出來是10 新陣列需要追加
複製程式碼

陣列去重(重點案例) 重點重點,去重一共記得是五種方法好像是啊

案例:要求將陣列中的零去掉,形成一個不包含零的新陣列
	要求:
		1、需要一個新陣列用來存放篩選之後的資料
		2、遍歷原來的陣列,把不是0的資料,天機到新陣列裡面
		
	思路:
		1、2個陣列新和舊
		2、遍歷我們的舊陣列
		3、判斷等於0 的元素
		4、追加陣列

        var  arr = [2,0,6,1,77,52,12,9,4,55,44,5,7,0.52,12,9,4];
	var newArr = [];
	for(var i=0; i<arr.length; i++){
		// 判斷裡面只要不等於去重的元素就可以
		if(arr[i] !== 0){
			// newArr每給一個值,他的長度就會自動+1;
			//這裡是把arr 老陣列的值給到新陣列裡面
			newArr[newArr.length] = arr[i];
		}
	}
	console.log(newArr);
複製程式碼

陣列案例 反轉陣列

要求:翻轉陣列,將陣列的內容反過來儲存 ['jack','red','pink','tuoni'];

var arr = ['jack','red','pink','tuoni'];
	var newArr=[];
	for(var i=0; i<arr.length;i++){
		// 新陣列的i不斷接收新資料
		newArr[i] = arr[arr.length - i - 1];
			//這裡第一步先算arr.length長度等於4減去i等於4為什麼等於4呢因i是0減1 = 3 所以就把tuoni給到newArr[i]身上了然後依次迴圈
	}
	console.log(newArr);
	
思路:通過已知求未知
	核心思路:把arr的最後一個元素 tuoni 取出來給新陣列作為第一個 
複製程式碼

氣泡排序 重要

var arr = [5,0,33,11,23,3,4,5,6];
		// 外層的for 迴圈來控制我們的趟數就是行數 5個數字(arr.length)我們換4趟(arr.length-1)
		for(var i=0; i<arr.length-1; i++){
			// 裡面for控制每行交換幾次 length - i -1;
			for(var j=0; j<arr.length-i-1; j++){
				if(arr[j] > arr[j+1]){
					var temp = arr[j];
					arr[j] = arr[j+1];
					arr[j+1] = temp;
				}
			}
		}
console.log(arr);

    氣泡排序:是一種演算法把一系列的資料按照一定的順序進行排列顯示(從小大或者從大到小);
    5,4,3,2,1
答:五個資料需要換4次,6個資料是五次


簡介: 冒泡培訓是一種簡單的排序演算法,他重複的走訪國藥排序的數列,一次比較兩個元素,
如果他們順序錯誤就把它們交換過來,走訪數列工作是重複的進行指導沒有再續約交換,也就是說
該數列已經排序完成,這個演算法的名字由來是因為越小的元素會經由交換慢慢浮到數列的頂端


	var arr = [221,12,312,43,12,3];
	// 1、一共需要的趟數我們用外層for 迴圈 6個資料我們需要走5趟,長度就是陣列長度
	// 減去1 arr.length -1;
	// 外層控制次數排好,依次的順序排好 6個數就是減一
	for(var i=0; i<arr.length-1;i++){
		// 2、每一趟交換的次數我們用裡層for 迴圈
		// 每次交換都是減少1個 長度就是陣列長度減去次數
		// 但是我們次數從0 開始的 所以最終 arr.length - i -1
		for(var j=0; j<arr.length - i -1; j++){
			if(arr[j] > arr[j+1]){
				// 3、交換兩個變數
				var temp = arr[j]; //儲存第一個資料給temp
				arr[j] =  arr[j+1]; //把第二個數給第一個變數
				arr[j+1] = temp;
			}
		}
	}
	console.log(arr);
複製程式碼

陣列複習:

	1、什麼是陣列
		答:就是可以存放多個資料,一組有序的資料,
	2、陣列建立方式
		答:兩種建立方式字面量 和new Array
	3、設定和訪問陣列元素
		答:元素:陣列中每個空間裡存放的資料,下標(索引)用來訪問陣列空間的序號,從零開始
		陣列可以通過下標來訪問設定修改對應下標空間裡的元素
	4、陣列長度
		答:length 
	5、遍歷陣列
		答:遍歷陣列就是通過for 迴圈下標遍歷
	6、新增陣列元素(追加)
		答:追加陣列通過索引就是下標
複製程式碼

***** 函式 ***** 重點中的重點

函式:
    介紹:函式就是封裝了一段,可以被重複呼叫執行的程式碼塊,可以實現大量程式碼的複用


	var num = 10;

	// 下面是函式的宣告 和呼叫 重要 
	
	// 函式需要宣告 使用function進行宣告 等價於上面的 var
	// function 叫函式宣告 裡面定義了一個 handshake是握手 這個函式就是 握手 num 等價於 handshake
	// 函式名後面跟一個小括號 然後跟一個花括號就是大括號
	function Handshake(){
		console.log('握手1次')
		console.log('握手2次')
		console.log('握手3次')
		console.log('握手4次')
	}
	// 函式呼叫  函式名() 函式的呼叫方式
	// 函式呼叫幾次 捂手幾次 
	Handshake(); 
	Handshake(); 

    解答:
	1、函式做什麼用
		答:封裝一段重複使用的程式碼塊
	2、封裝是什麼意思
		答:就是打包
	3、宣告函式用什麼?
		答:function
	4、如何呼叫函式   重點
		答:函式名後面加小括號,小括號是可以接受代引數函式
複製程式碼

函式的引數

帶引數的函式:
	答:汽車就是我們已經封裝好的函式,我們直接就能開,可以換不同的檔位,
函式引數
	答:在函式內部某些值不能固定,只有在呼叫的時候才能確定這個值
	引數分為 形參 實參 兩種
	形參:形式上的引數,函式定義的時候,傳遞的引數,當前並不知道是什麼
	實參:實際的引數,函式呼叫的時候,傳遞的引數,這個引數我們知道給形參賦值 
語法 :
	//帶引數的函式宣告 
	function 函式名 (形參1,形參2,.....){//可以定義任意多的引數,用逗號分隔開
		//函式體
	}
	//帶引數的函式呼叫
	函式名(實參1,實參2,.....)
	

分割線~~~~~~~~
案例第二個:
    	//這裡是形參 
	function sum(x,y){
		// 可以把 x,y 看成一個變數  但是這是一個形參 
		console.log(x + y)
	}

	// 這裡是實參,簡單點來說 可以實實在在看見的 10跟20 這裡把10給x y給20 
	sum(10,20);
	sum(1,2);

// 我們彈出一個名字 還有年齡可以彈出對話方塊  
function sayHi (name,age){
	alert(name +'你好你的年齡是' + age )
}
// 函式不呼叫,自己不執行 
sayHi('張三','18')
sayHi('張三111','181')
複製程式碼

函式的返回值 return

概念:返回值概念:函式執行完後,可以把執行的結果 通過return 語法返回給呼叫者
返回值本質 就是呼叫函式,並將需要的值返回給呼叫者,函式外部想使用函式內部的值的時候可以使用return

    function sum(x,y){  // 形參
		// 謹記函式裡面不要輸出要用返回值 
		// 這種寫法如果難理解也可以這樣
		// var num = x + y
		// return num;
		// 這是兩種寫法 看你喜歡那個
		return x + y; //誰呼叫返回給誰 返回值 
	}
	sum(1,2); //實參  這裡不會輸出任何數值 
	console.log(sum(1,2));  //這裡 列印出3 因為 return 把 x + y的值都返回給了 sum 

謹記:return 下面的程式碼無論是什麼都不會在執行了包括 alert 和任何 
複製程式碼

封裝函式求陣列最大值

// var arr = [12,2,3,455,43,32,132,433]
	
	function getMax(arr){ //arr 形參
		var max = arr[0];
		for(var i=0; i<arr.length; i++) {
			// i 索引號
			// arr[i] 元素 
			// arr 陣列 
			if(arr[i] > max ){
				max = arr[i];
			}
		}
		// 要把return 寫到for 迴圈外面 
		return max;
	}
	// getMax([12,2,3,455,43,32,132,433]); //實參

	console.log(getMax([12,2,3,455,43,32,132,433])) //輸出結果 455
複製程式碼

相關文章