JavaScript学习笔记5—数组和函数

云卷云舒_jing

已于 2022-07-04 13:55:17 修改

阅读量238

点赞数

分类专栏： JavaScript笔记文章标签：学习 javascript 开发语言前端

于 2022-07-03 23:14:31 首次发布

本文链接：https://blog.csdn.net/qq_45709187/article/details/125590243

版权

JavaScript笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

13.3 break ,continue ,return 的区别

14.arguments的使用

15.函数案例

1.创建数组Array

数组的好处：可以存储多个数据。

1.1利用new创建数组

//1.利用new创建数组
var arr = new Array();//创建了一个空的数组

1.2利用数组字面量创建数组

//2.利用数组字面量创建数组，数据之间用逗号隔开
var arr1 = [];//创建一个空数组
var arr2 = [1,2,'hello',true];//1,2，hello，true称为数组元素
console.log(arr2);//[ 1, 2, "hello", true ]

1.3索引号

//3.索引号  格式：数组名[索引号]  索引号从0开始
console.log(arr2[0]);//1
console.log(arr2[1]);//2
console.log(arr2[2]);//hello

2.遍历数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历数组</title>
		<script>
			//遍历数组
			var arr = ['red','green','blue'];
			for(var i = 0; i < 3; i++){
				console.log(arr[i]);
			}
			
			// arr.length动态检测数组长度
			console.log(arr.length);
			for(var i = 0; i < arr.length; i++){
				console.log(arr[i]);
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

3.数组案例-求和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>求和、平均数</title>
		<script>
			var arr = [2,4,6,8,10];
			var sum = 0;
			var average = 0;
			for(var i = 0; i < arr.length; i++){
				sum+=arr[i];
			}
			average = sum / arr.length;
			console.log(sum, average);//30 6
		</script>
	</head>
	<body>
	</body>
</html>

4.数组案例-求最大值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>求数组最大值</title>
		<script>
			var arr = [2,4,5,7];
			var max = arr[0];
			for(var i = 1; i < arr.length; i++){
				if(arr[i] > max){
					max = arr[i];
				}
			}
			console.log(max);//7
		</script>
	</head>
	<body>
	</body>
</html>

5.案例-数组转字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr = ['red','blue','pink','yellow'];
			var str = '';
			var sep = '|'
			for(var i = 0; i < arr.length; i++){
				str += arr[i] + sep;
			}
			console.log(str);
		</script>
	</head>
	<body>
	</body>
</html>

6.新增数组元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增数组元素</title>
		<script>
			//1.修改数组长度
			var arr = ['red','blue','pink','yellow'];
			console.log(arr);
			arr.length = 5;
			console.log(arr);//Array(5) [ "red", "blue", "pink", "yellow", <1 empty slot> ]
			console.log(arr[4]);//undefined
			
			//2.修改索引号，追加数组元素
			var arr1 = ['red','blue','pink','yellow'];
			arr1[4] = 'green';
			console.log(arr1);// [ "red", "blue", "pink", "yellow", "green" ]
			arr1[0] = 'black';
			console.log(arr1);//[ "black", "blue", "pink", "yellow", "green" ]
			
			//不要给数组名赋值，否则会覆盖掉以前所有的数据
			arr1 = 'white';
			console.log(arr1);//white
		</script>
	</head>
	<body>
	</body>
</html>

案例-新增数组元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组新增元素</title>
		<script>
			// 将1-10新增进一个数组
			var arr = [];
			for(var i = 0; i < 10; i++){
				arr[i] = i + 1;
			}
			console.log(arr);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
			
			// 将数组中大于10的元素选出
			//方法1
			var arr1 = [1,3,5,7,9,15,17,23,34,45];
			var newArr = [];
			var j = 0;
			for(i = 0; i < arr1.length; i++){
				if(arr1[i] > 10){
					newArr[j] = arr1[i];
					j++;
				}
			}
			console.log(newArr);//[ 15, 17, 23, 34, 45 ]
			// 方法2
			var arr1 = [1,3,5,7,9,15,17,23,34,45];
			var newArr = [];
			for(i = 0; i < arr1.length; i++){
				if(arr1[i] > 10){
					newArr[newArr.length] = arr1[i];//刚开始时newArr长度是0
				}
			}
			console.log(newArr);//[ 15, 17, 23, 34, 45 ]
		</script>
	</head>
	<body>
	</body>
</html>

7.删除数组元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除数组元素</title>
		<script>
			//把数组中的0元素删除
			var arr = [0,1,2,3,4,5,6,7,8,0];
			var newArr = [];
			for(var i = 0; i < arr.length; i++){
				if(arr[i] != 0){
					newArr[newArr.length] = arr[i];
				}
			}
			console.log(newArr);//[ 1, 2, 3, 4, 5, 6, 7, 8 ]
		</script>
	</head>
	<body>
	</body>
</html>

8.翻转数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>翻转数组</title>
		<script>
			var arr = [1,2,3,4,5];
			var newArr = [];
			for(var i = arr.length-1; i >= 0; i--){
				newArr[newArr.length] = arr[i];
			}
			console.log(newArr);//[ 5, 4, 3, 2, 1 ]
			
		</script>
	</head>
	<body>
	</body>
</html>

9.冒泡排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>冒泡排序</title>
		<script>
			//冒泡排序是一轮一轮的两两交换
			//1.一共需要的趟次 用作外层for循环，5个数据需要4趟
			//2.每趟交换的次数 用作里层for循环，第一趟交换4次，第二趟交换3次……第四趟交换一次。
			//3.交换两个变量
			
			//将[5,4,3,2,1]从小到大排序
			var arr = [5,4,3,2,1];
			for(var i = 0; i < arr.length - 1; i++){
				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);//[1,2,3,4,5]
		</script>
	</head>
	<body>
	</body>
</html>

10.函数的概念

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

11.函数的使用

函数在使用时分为两步：声明函数和调用函数。

11.1声明和调用

声明函数：

// 声明函数
function 函数名() {
//函数体代码
}

function 是声明函数的关键字,必须小写。
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum。

调用函数：

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
调用的时候千万不要忘记添加小括号。

例子：声明和调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
		<script>
			//函数就是封装了一段可重复使用的代码
			
			//数字的累计求和
			//声明函数 : function 函数名(){函数体}
			function getSum(num1, num2){
				var sum = 0;
				for(var i = num1; i <= num2; i++){
					sum += i;
				}
				console.log(sum);
			}
			// 调用函数 : 函数名()
			getSum(1,100);//5050
			getSum(10,20);//165
		</script>
	</head>
	<body>
	</body>
</html>

函数的两种声明方式：

自定义函数方式(命名函数)
函数表达式方式(匿名函数）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// （1）fun是变量名 不是函数名
			// （2）函数表达式声明方式和声明变量差不多 只不过变量里面存的是值 而 函数表达式里面存的是函数
			// （3）函数表达式也可以进行传递参数
			
			// 函数的两种声明方式
			// 1.利用函数关键字自定义函数（命名函数）
			function fn(){
				
			}
			fn();
			
			// 2.函数表达式(匿名函数)
			// var 变量名 = function(){}
			var fun = function(aru){
				console.log('我是函数表达式'); 
				console.log(aru);
			}
			fun('你好');
			// 结果：
			// 我是函数表达式
			// 你好
		</script>
	</head>
	<body>
	</body>
</html>

11.2函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

12.函数的参数

形参和实参：在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

例：求两数之和

// 声明函数
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 调用函数
getSum(1, 3); // 4
getSum(6, 5); // 11
getSum(100, 200); // 形参和实参个数相等，输出正确结果
getSum(100, 400, 500, 700); // 实参个数多于形参，只取到形参的个数
getSum(200); // 实参个数少于形参，多的形参定义为undefined，结果为NaN

注：在JavaScript中，形参的默认值是undefined。

例：利用函数求两个数之间的整数累计和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>形参和实参</title>
		<script>
			//利用函数求两个数之间的整数累计和
			function getSums(start, end){
				var sum = 0;
				for(var i = start; i <= end; i++){
					sum += i;
				}
				console.log(sum);
			}
			getSums(1,100);//5050
			getSums(1,10);//55
		</script>
	</head>
	<body>
	</body>
</html>

13.函数的返回值

我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

13.1 return 语句

语法格式：

function 函数名(){
    return 需要返回的结果;
}
函数名();

例子1：返回一个值

function getResult(){
	return 'hello';//返回值
}
//调用
console.log(getResult());//hello

例子2：求两个数的最大值

function getMax(num1, num2){
	return num1 > num2 ? num1 : num2;
}
console.log(getMax(2,5));//5

例子3：求数组中的最大值

function getArrMax(arr){
	var max = arr[0];
	for(var i = 1; i <= arr.length; i++){
		if(arr[i] > max){
			max = arr[i];
		}
	}
	return max;
}
var re = getArrMax([6,7,8,9]);
console.log(re);//9

13.2 return 终止函数

return 语句之后的代码不被执行。
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
函数都是有返回值的，函数没有 return 返回 undefined

<script>
	//1.return终止函数
	function getSum(num1, num2){
		return num1 + num2;//return后面的代码不会被执行
		alert('此条不会被执行');
	}
	console.log(getSum(1,2));//3
	
	//2.return只能返回一个值，返回最后的值
	function fn(num1, num2){
		return num1, num2;//返回的结果是最后一个值
	}
	console.log(fn(1,2));//2
	
	// 3.求任意两个数加减乘除的结果
	function getResult(num1, num2){
		return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
	}
	var re = getResult(1,2);
	console.log(re);//[ 3, -1, 2, 0.5 ]
	
	// 4.如果函数有return则返回return的值，如果没有return则返回undefined 
	function fun1(){
		
	}
	console.log(fun1());//undefined
	
</script>

13.3 break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）
continue ：跳出本次循环，继续执行下次循环（如 for、while）
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

14.arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

arguments的使用：只有函数有arguments对象而且每个函数都内置好了这个arguments 用来存储了所有传递过来的实参。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>argument的使用</title>
		<script>
			
			//arguments的使用  只有函数有arguments对象 而且每个函数都内置好了这个arguments 用来存储了所有传递过来的实参
			function fn(){
				console.log(arguments);//里面存储了所有传递过来的实参  Arguments { 0: 1, 1: 2, 2: 3, … }
				console.log(arguments.length);//3
				console.log(arguments[2]);//3
				//可以按照数组的方式遍历arguments
				for(var i = 0; i < arguments.length; i++){
					console.log(arguments[i]);//1 2 3
				}
			}
			fn(1,2,3);
	
			// 伪数组 并不是真正意义上的数组
			// 1.具有数组的length属性
			// 2.按照索引的方式进行存储的
			// 3.它没有真正数组的一些方法pop() push()等
		
		</script>
	</head>
	<body>
	</body>
</html>

例子：arguments案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// 利用函数求任意个数的最大值
			function getMax(){//arguments=[1,2,3]
				var max = arguments[0];
				for(var i = 0; i < arguments.length; i++){
					if(arguments[i] > max){
						max = arguments[i];
					}
				}
				return max;
			}
			console.log(getMax(1,2,3));//3
			console.log(getMax(1,2,3,4,5));//5
			console.log(getMax(1,2,3,8,9,10));//10
		</script>
	</head>
	<body>
	</body>
</html>

15.函数案例

例子1：利用函数翻转数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>利用函数翻转数组</title>
		<script>
			//利用函数翻转任意数组reverse
			function reverse(arr){
				var newArr = [];
				for(var i = arr.length - 1; i >= 0; i--){
					newArr[newArr.length] = arr[i];
				}
				return newArr;
			}
			var arr1 = reverse([1,2,3,4]);
			console.log(arr1);// [ 4, 3, 2, 1 ]
			var arr2 = reverse(['pink','blue','yellow','red']);
			console.log(arr2);//[ "red", "yellow", "blue", "pink" ]
		</script>
	</head>
	<body>
	</body>
</html>

例子2：函数封装冒泡排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数封装冒泡排序</title>
		<script>
			//利用函数冒泡排序sort
			function sort(arr){
				for(var i = 0; i < arr.length-1; i++){
					for(var j = 0;j < arr.length-1-i; j++){
						if(arr[j] > arr[j + 1]){
							var temp = arr[j];
							arr[j] = arr[j + 1];
							arr[j + 1] = temp;
						}
					}
				}
				return arr;
			}
			var arr1 = sort([5,6,1,8]);
			console.log(arr1);//[ 1, 5, 6, 8 ]
			var arr2 = sort([33,2,45,67]);
			console.log(arr2);//[ 2, 33, 45, 67 ]
		</script>
	</head>
	<body>
	</body>
</html>

例子3：利用函数判断闰年

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>判断闰年</title>
		<script>
			//利用函数判断闰年
			function isRunYear(year){
				//如果是闰年，返回true 否则 返回false
				var flag = false;
				if(year % 4 == 0 && year & 100 != 0 || year % 100 == 0){
					flag = true;
				}
				return flag;
			}
			console.log(isRunYear(2000));
			console.log(isRunYear(1999));
		</script>
	</head>
	<body>
	</body>
</html>

例子4：函数调用另一个函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数调用另一个函数</title>
		<script>
			function fn1(){
				console.log(11);
				fn2();//在函数fn1里面调用fn2函数
			}
			fn1();//调用fn1
			function fn2(){
				console.log(22);
			}
			// 结果：
			// 11
			// 22
			// 运行时遇到函数fn1时没调用不执行，到fn1调用时，执行fn1函数，打印11，遇到调用函数fn2，执行fn2里面的打印22
		</script>
	</head>
	<body>
	</body>
</html>

例子5：用户输入年份，输出当年2月份天数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//用户输入年份，输出当年2月份天数
			function backDay(){//②-执行函数
				var year = prompt('请您输入年份：');
				if(isRunYear(year)){//③-调用函数
					alert('当前年份是闰年，2月份有29天');
				}else{
					alert('当前年份不是闰年，2月份有28天');
				}
			}
			backDay();//①-调用函数
			
			//利用函数判断闰年
			function isRunYear(year){//④-执行函数
				//如果是闰年，返回true 否则 返回false
				var flag = false;
				if(year % 4 == 0 && year & 100 != 0 || year % 100 == 0){
					flag = true;
				}
				return flag;
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

学习来源：黑马pink老师视频

根据视频内容整理出的学习笔记，用于复习查看。

云卷云舒_jing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记5—数组和函数

目录1.创建数组Array1.1利用new创建数组1.2利用数组字面量创建数组1.3索引号2.遍历数组3.数组案例-求和4.数组案例-求最大值5.案例-数组转字符串6.新增数组元素7.删除数组元素8.翻转数组9.冒泡排序10.函数的概念11.函数的使用11.1声明和调用11.2函数的封装12.函数的参数13.函数的返回值13.1 return 语句13.2 return 终止函数13.3 break ,continue ,return 的区别14.arguments的使用15.函数案例数组的好处：可以存储多
复制链接

扫一扫