前端零基础 JS 教学 第三天 03 - day 数组 与 函数

今天我们老规矩，继续复习一下昨天学过的知识：我们来静静一下

提示一下：我讲的每个字都是干货自己提炼的大白话，所有要认真仔细的学习。不懂留言就问啦~不用这么⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄我想静静，别问我静静是谁

复习：

 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);
复制代码

重点： 设置和访问数组元素

 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 
	// 答：数组里面原先有值是替换，没有值是追加 谨记 
	下面是数组追加的详解图
复制代码

数组思考题：

// 要求将数组中['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
复制代码

转载于:https://juejin.im/post/5c61282951882562e34eb58c