关于前端的碎碎念3-JavaScript基础9-JavaScript中的数组与函数
【摘要】 本节介绍JavaScript中的数组
说完css装修，我们终于要给房子打造一些功能啦~follow me~
本节介绍JavaScript中的数组与函数
JavaScript数组
数组:可以帮我们一次声明多个同类型的变量，这些变量在内存中是连续存储的
数组声明的语法：
数据类型[] var arr=[1,2,3];
数组名 var arr=new Array[1,2,3];
数组长度：arr.length;
如何访问数组：通过下标（索引）来访问数组 数组名[编号]
访问数组元素：nums[0]、nums[1]。索引从0开始。取到的元素的类型就是数组元素的类型。还可以对数组元素进行赋值
比如我们要向第0个元素赋值3，可以这样写
arr[0]=3;
冒泡排序
1,2,3,4, 5,6,7,8,9
A+b=length-1；
5个元素（2） 6（3）
0-4 0-5
1-3 1-4
2 2-4
N个元素进行交换
1. 交换n/2次
2. 在一个循环中，第i个元素和length-1-i个元素进行交换
冒泡排序：
10,20,30
让数组中的元素两两比较（第i个与第i+1个 比较）经过n（i-1）遍两两比较，数组中的元素能按照我们预期的规律排序。
要从大到小排序，我们进行两两比较的时候用<
N个数需要排n-1趟进行比较 第t趟比较的次数=元素的总个数n-趟数=n-t次
10,20,30,40,50,60,70 原始数据7个元素
20,30,40,50,60,70,10 第1趟比较6次
30,40,50,60,70,20,10 第2趟比较5次
40,50,60,70,30,20,10 第3趟比较4次
50,60,70,40,30,20,10 第4趟比较3次
60,70,50,40,30,20,10 第5趟比较2次
70,60,50,40,30,20,10 第6趟比较1次
I=0 1
I=1 2
趟数：i+1
For（int j=0；j<n-i-1;j++） For（int i=0；i<10;j++）
for (int i=0;i<numbers.Length -1;i++)
{
for(int j=0;j<numbers.Length-1-i;j++)
{
if(min<scores[i])//从大到小排列
{
交换
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//定义需要排序的数组
var arr = [2, 4, 5, 3, 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 tem=arr[j];
arr[j]=arr[j + 1];
arr[ j + 1]=tem;
}
}
}
//输出排列后的数组
document.write(arr);
</script>
</head>
</html>
说到数组，必须要提一下JavaScript中的 For...In循环
Javascript中的for in循环通常用来遍历数组
for in遍历数组
首先要了解什么是数组，所谓数组，其实就是一个保存了一组类似变量的一个集合。我们来看一个保存了爱好的数组实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/JavaScript">
var x;var hobbies = new Array();//创建一个新的数组
hobbies[0] = "JavaScript";
hobbies[1] = "CSS";
hobbies[2] = "篮球";
for (x in hobbies)//数组中的每一个变量
{document.write(hobbies[x] + "<br />");}
</script>
</head>
</html>输出结果如下：
我们来分析一下上面的例子：
var hobbies = new Array();一句创建了一个新的数组。
hobbies[0] = "JavaScript";以及之后的两句则是给hobbies数组赋值。这与我们之前见过的变量赋值不太一样，hobbies后面多出一个"[0]"，这个是变量的索引。我们之前已经说了，数组是变量的集合，因此我们在赋值之前需要指明给数组中的哪一个变量赋值。在这里，"[0]"表示的是hobbies数组所包含的第一个变量，没错，数组的索引是从0开始的，开始可能有点别扭，慢慢就习惯了。
最后的for in循环就很好理解了，
for (x in hobbies)//数组中的每一个变量
{
document.write(hobbies[x] + "<br />");
}
表示遍历hobbies数则的所有变量，并且将他们逐一输出。
JavaScript 函数
通常情况下，函数是完成特定功能的一段代码。把一段完成特定功能的代码块放到一个函数里，以后就可以调用这个函数啦，这样就省去了重复输入大量代码的麻烦。
还记得我们上一节所使用的alert吗？其实它就是一个函数，我们就以它为例来看看函数的作用吧。如果没有alert这个函数，制作一个警告框可能需要如下工作：
在屏幕上显示一个小窗口
发出“咚”的提示音
……
将警告文字显示在窗口中
给出一个确定按钮
……
然后有了alert这个函数之后，你只需要写下面一行代码：
alert("警告文字");
正如上面所说的，一个函数的作用就是完成一项特定的任务。如果没有函数时，完成一项任务可能需要五行、十行、甚至更多的代码。每次需要完成这个任务的时候都重写一遍代码显然不是一个好主意。这是我们就可以编写一个函数来完成这个任务，以后只要调用这个函数就可以了。
简单的函数定义
定义一个函数
说了这么多，那么究竟如何定义一个函数呢？看看下面的格式：
function 函数名(){
函数代码;
}
把“函数名”替换为你想要的名字，把“代码”替换为完成特定功能的代码，函数就定义好了。了解了如何定义函数，我们就来自己编写一个实现两数相加的简单函数吧。
首先给函数起一个有意义的名字：“addTwoNum”？，好像太长了，还是叫add2吧。它的代码如下：
function add2(){
sum = 1 + 1;
alert(sum);
}
函数的调用
函数定义好了，如何调用呢？
其实可以通过很多种方法调用上面的函数，我们这里使用最简单的函数调用方式——按钮的点击事件，JavaScript事件会在后面介绍。试着点击下面的按钮调用定义好的函数：
窗体顶端
点击提交
窗体底端
“等等，你这是骗人啊，根本不是两书相加的函数啊，这个函数只能做1+1啊！”
带参数的函数
好吧，我承认我撒谎了，那个函数不能实现两数相加。其实，函数的定义应该是下面的格式：
function(参数1,参数2,参数3){
部分函数代码……
……
}
按照这个格式，我们的函数应该写成：
function add2(x,y){
sum = x + y;
alert(sum);
}
x和y则是我们函数的两个参数，调用函数的时候，我们就可以通过这两个参数把两个加数传递给函数了。例如，add2(3，4)会求3+4的和，add2(56,65)则会求出56和65的和。
“再等等！这函数没有用啊，你吧结果alert出来，我想对结果做些处理怎么办啊？”
带返回值的函数
好吧，我们把alert(sum)一行改成下面的代码：
return sum;
return后面的值叫做返回值。使用下面的语句调用函数就可以将这个返回值存储在变量中了。
result = add2(3,4);
该语句执行后，result变量中的值为7(3+4)。值得说明的是，我们的函数中，参数和返回值都是数字，其实它们也可以是字符串等其它类型。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）