javascript学习之路1

web发展史

Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于1993年问世。

1994年11月，Mosaic浏览器的开发人员创建了网景公司（Netscape Communications Corp.），并发布了Mosaic Netscape 1.0 beta浏览器，后改名为Navigator。

js历史

JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。期初JavaScript被命名为LiveScript，后来为了借助Java语言创造良好的营销效果最终改名JavaScript

浏览器组成

shell部分
内核部分

渲染引擎（语法规则和渲染）、js引擎、其他模块

js的特色

解释性语言

扩展：（必须了解）

编译： c、c++ --------------------解释： javascript、php

优点：快 ---------------------------优点：跨平台（不需要编译成文件）

不足：移植性不好（不跨平台）-- 不足：稍微慢

单线程（js引擎）

同步：一步一步执行

异步：同时执行

ECMA标注

ECMAScript

js三大部分

ECMAScript、DOM、BOM

几大主流浏览器及其内核：(专业知识，必须记住)

IE trident

Chrome webkit/blink

firefox Gecko

Opera presto

Safari webkit

如何引入js?

页面级js

<script type="text/javascript">document.write('hi');
</script>

外部引入js

<scrip type="text/javascript" src="lesson.js"></script>

为符合web标准（w3c标准中的一种）结构、样式、行为相分离，通常采用外部引入。

js基本语法

变量 var a=100;//声明的同时赋值

命名规则

变量名必须以**英文字母、 _ 、$**开头，不能以数字开头
变量名可以包括英文字母、_、$、数字
不可以用系统的关键字、保留字作为变量名
严格区分大小写
变量名必须有意义（最好采用英文）
驼峰命名法如 myFirstName

我们尽量不要直接使用name 作为变量名（name在浏览器中有特殊的含义的）

关键字：有特殊语法含义的

保留字：未来可能会使用到的

值类型——数据类型

原始值(不可改变的原始值)

Number String Boolean underfined null

引用值

array Object function …date RegExp

var arr = [1,2,3,4,5,false,“abc”];

js语句基本规则：

语句后要用分号结束“；”

js语法错误会引发后续代码终止，但不会影响其它js代码块

书写格式要规范，“= + / -”两边都应该有空格

   // var name = prompt('请输入你的昵称');// alert(name);//1.更新变量var myname = 'joy';console.log(myname);myname = 'mike';console.log(myname);//2.声明多个变量var age = 18,address = '地球';gz = 2000;//3.只声明，不赋值 结果是？var sex;console.log(sex);//undefined//不声明 不赋值 直接使用某个变量会报错console.log(tel);//不声明 直接赋值使用可以执行qq =110;console.log(qq);

一个变量被重新赋值后，原有的值会被覆盖，变量值将以最后一次赋的值为准。

数据类型简介

引入：为什么需要数据类型？

不同的数据所占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是就定义了不同的数据类型。

- 数字型 Number

js数字类型既可以用来保存整数值，也可以用来保存小数（浮点数）。

数字型范围：

var num;//这里的 num 我们是不确定属于哪种数据类型的//js 的变量数据类型是只有在程序运行过程中，根据等号右边的值来确定的//js 是动态语言 变量的数据类型是可以变化的var x = 10;//x 是数字型x = 'joy';//x 是字符型//1.八进制 0~7 我们程序里面数字前面加0 表示八进制var num1 = 010;console.log(num1);//010 转换为十进制就是 8//2.十六进制 0~9 a~f    #ffffff 数字的前面加 0x 表示十六进制var num3 = 0x9;console.log(num3);var num4 = 0xa;//代表十进制 9console.log(num4);//转换为十进制就是 10//3.数字型的最大值alert(Number.MAX_VALUE);//1.7976931348623157e+308//4.数字型的最小值alert(Number.MIN_VALUE);//5e-324//5.无穷大alert(Number.MAX_VALUE * 2);//Infinity//6.无穷小alert(-Number.MIN_VALUE * 2);//-Infinity//7.非数字console.log('joy'-100);//NaN

- 字符串型 String

可以是引号中的任意文本，其语法为双引号 “” 和单引号 " 推荐使用单引号

   //isNaN() 这个方法来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回 的是 trueconsole.log(isNaN(12));//false//字符串引号嵌套 可以外双内单 或 外单内双var str = '我是一个"高富帅"的程序员';console.log(str);//字符串转义字符 都是 \ 开头  但是这些转义字符需要写在引号里面var str = '我是一个"高富帅"的\n程序员';console.log(str);

字符串长度

    //1.检测获取字符串的长度 legthvar str = 'wo shi shui';console.log(str.length);//11//2.字符串的拼接 +    字符串 + 任何类型 = 拼接之后的新字符串console.log('沙漠' + '骆驼');// 字符串的 沙漠骆驼console.log('joy' + 18);// 'joy18'console.log('joy' + true);// joytrueconsole.log(12+12);//24console.log('12' + 12);//'1212'var age = 18;//变量不要写到字符串里面，是通过和 字符串相连的方式实现的//口诀：引引加加console.log('joy' + age + '岁');//joy18岁//弹出一个输入框（prompt）,让用户输入年龄（用户输入）//把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）//使用 alert 语句弹出警示框（输出结果）var age = prompt('请输入您的年龄：');var str = '您今年' + age + '岁了';alert(str);

- 布尔型

    var flag = true;//flag 布尔型var flag1 = false;//flag1 布尔型console.log(flag + 1);//2   true 参与加法运算当1来看console.log(flag1 + 1);//1  false 参与加法运算当0来看//如果一个变量声明未赋值 就是 undefined 未定义数据类型var str;console.log(str);var variable = undefined;console.log(variable + 'joy');//undefinedjoyconsole.log(variable + 1);//NaN undefined 和数字相加最后的结果是 NaN//null 空值var space = null;console.log(space + 'joy');//nulljoyconsole.log(space + 1);//1

    //typeof 可以判断变量是什么数据类型var num = 10;console.log(typeof(num));//numbervar str = 'joy';console.log(typeof str);//stringvar flag = true;console.log(typeof flag);//booleanvar vari = undefined;console.log(vari);//undefinedvar timer = null;console.log(typeof timer);//object//prompt 取过来的值是 字符型的var age = prompt('请输入您的年龄');console.log(age);console.log(typeof age);

数据类型的转换：

转换为字符串类型

加号拼接字符串(重点掌握)

    //1.把数字型转换成字符串型 toString()var num = 10;var str = num.toString();console.log(str);console.log(typeof str);//2.我们利用 String()console.log(String(num));//3.利用 + 拼接字符串的方法实现转换效果 (隐式转换)console.log(num + '');

转换为数字型
前两种方法重点掌握

    var age = prompt('请输入您的年龄');//1. parseInt(变量)  可以把字符型的转换为数字型  得到的是整数console.log(parseInt(age));console.log(parseInt('3.94'));// 3 取整console.log(parseInt('120px'));//120 会去掉这个px单位console.log(parseInt('rem120px'));// NaN//2. parseFloat(变量) 可以把 字符型的转换为数字型 得到的是小数 浮点数console.log(parseFloat('3.94'));// 3.14console.log(parseFloat('120px'));// 120 会去掉这个px单位console.log(parseFloat('rem120px'));// NaN//3. 利用Number(变量) var str = '123';console.log(Number(str));// 123console.log(Number('12'));// 12//4. 利用了算数运算 - * / 隐式转换console.log('12' - 0);// 12console.log('123' - '120');// 3

    //案例1：//弹出一个输入框(prompt),让用户输入出生年份(用户输入)//把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄//弹出警示框(alert)，把计算的结果输出(输出结果)var year = prompt('请输入您的出生年份');var age = 2021 - year;//year 取过来的是字符串型 但是这里用的减法 有隐式转换alert('您今年' + age + '岁了');//案例2：//计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果var num1 = prompt('请输入第一个数');var num2 = prompt('请输入第二个数');var result = parseFloat(num1) + parseFloat(num2);alert('结果是：' + result);

转换为布尔型

Boolean() 函数

代表空、否定的值否定的值会被转换成 false,如 ‘’、0、NaN、null、undefined
其余值都会被转换成true

案例：

    var name = prompt('请输入您的姓名');var age = prompt('请输入您的年龄');var sex = prompt('请输入您的性别');alert('您的姓名是：' + name +'\n您的年龄是：'+ Number(age) +'\n您的性别是：' + sex);

解释型语言和编译型语言
!(02.png)[D:\前端学习\images\02.png]

运算符

也称为操作符，用于实现赋值、比较和执行算术运算等功能的符号

js中常用的运算符有：

算数运算符

    console.log(1 / 1);// 1//1.  % 取余（模）//可以用来判断 一个数 能否被整除console.log(3 % 5);// 3console.log(4 % 2);// 0//2. 浮点数 算术运算里面会有问题console.log(0.1 + 0.2);// 0.30000000000000004console.log(0.07 * 100);// 7.000000000000001//3. 我们不能直接拿着浮点数来进行相比较var num = 0.1 + 0.2;console.log(num == 0.3);// false

递增和递减运算符

    //1.前置递增运算符  ++ 写在变量的前面var age = 10;++age;//类似于age = age + 1;console.log(age);//2. 先自加1 后返回值var p = 10;console.log(++p + 10);// 21//3. 后置自增 var num = 10;num++;console.log(num);//4. 口诀：先返回值 后自加1var age = 10;console.log(age++ + 10);// 20// 前置自增盒后置自增如果单独使用 效果是一样的

比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

    //1. 我们程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以console.log(3 == 5);// falseconsole.log('joy' == '刘德华');// falseconsole.log(18 == 18);// trueconsole.log(18 != 18);// false//2. 我们程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以console.log(18 === 18);// trueconsole.log(18 === '18');// false//3. 总结：= 等号赋值   == 判断   === 全等

逻辑运算符

    //1. 逻辑与 &&  and 两侧都为true 结果才为 trueconsole.log(3 > 2 && 3 < 0);// falseconsole.log(3 < 5 && 3 > 2);// true//2. 逻辑或 || or 两侧都为假 结果才为假console.log(1 > 6 || 4 >3);// trueconsole.log(3 > 5 || 3 < 2);// false//3. 逻辑非 ！ not console.log(!9);// false

逻辑中断（短路操作）

    //1. 用我们的布尔值参与的逻辑运算 true && false == false//2. 123 && 456 是值 或者是 表达式 参与逻辑运算？//3. 逻辑运算与短路运算 如果表达式1 结果为真 则返回表达式2  如果表达式1 为假  那么返回表达式1console.log(123 && 456);// 456console.log(0 && 456);// 0//如果有空的或者否定的为假 其余是真的 0 '' null undefined NaNconsole.log('' && 1 + 2 && 456 * 45678);//'' 结果为空//4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2console.log(123 || 456);// 123console.log(123 || 456 || 456 + 123);// 123console.log(0 || 1234 + 345 || 345);// 1579// 逻辑中断很重要 它会影响我们程序的运行结果var num = 0;console.log(123 || ++num);console.log(num);// 0

赋值运算符

用来把数据赋值给变量的运算符。

    var age = 10;age += 5;// 相当于 age = age + 5;age -= 5;// 相当于 age = age - 5;age *= 10;// 相当于 age = age * 10;

运算符的优先级

流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

- 顺序结构

是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行

- 分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS 语言提供了两种分支结构语句

if 语句

    //1. if 的语法结构  如果ifif (条件表达式) {//执行语句}//2. 执行思路  如果if 里面的条件表达式为真 true 则执行大括号里的执行语句//如果 if 条件表达式结果为假 则不执行大括号面的语句  则执行if 语句后面的代码//3. 体验if(3 < 5){alert('hello!');}//判断输入的年份是否是闰年？var year = prompt('请输入年份');if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){alert(year + '是闰年！');}else{alert(year + '是平年');}

if else if 语句(多分支语句结构)

    // 1. 多分支语句   就是利用多个条件来选择不同的语句执行 得到不同的结果  多选1 的过程// 2. if else if语句是多分支语句// 3. 语法规范if (条件表达式1) {// 语句1;} else if (条件表达式2) {// 语句2;} else if (条件表达式3) {// 语句3;} else {// 最后的语句;}// 4. 执行思路// 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句  // 如果条件表达式1 不满足，则判断条件表达式2  满足的话，执行语句2 以此类推// 如果上面的所有条件表达式都不成立，则执行else 里面的语句// 5. 注意点// (1) 多分支语句还是多选1 最后只能有一个语句执行// (2) else if 里面的条件理论上是可以任意多个的// (3) else if 中间有个空格//判断成绩级别var gald = prompt('请输入你的考试分数');if(gald >= 90){alert('A');}else if(gald >= 80){alert('B');}else if(gald >= 70){alert('C');}else if(gald >= 60){alert('D');}else(gald < 60)alert('E');

三元表达式

    // 1. 有三元运算符组成的式子我们称为三元表达式// 2. ++num     3 + 5     ? :// 3. 语法结构 // 条件表达式 ？ 表达式1 ： 表达式2// 4. 执行思路// 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值// 5. 代码体验var num = 10;var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的console.log(result);// if (num > 5) {//     result = '是的';// } else {//     result = '不是的';// }// 用户输入0~59之间的一个数字// 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则  不做操作// 用一个变量接受这个返回值，输出var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');// 三元表达式   表达式 ？ 表达式1 ：表达式2 var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量alert(result);

switch 语句

    // 1. switch 语句也是多分支语句 也可以实现多选1// 2. 语法结构 switch 转换、开关  case 小例子或者选项的意思switch(表达式) {case value1:执行语句1;break;case value2:执行语句2;break;case value3:执行语句3;break;...default:执行最后的语句;}// 3. 执行思路  利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句  如果都没有匹配上，那么执行 default里面的语句// 4. 代码验证switch (8) {case 1:console.log('这是1');break;case 2:console.log('这是2');break;case 3:console.log('这是3');break;default:console.log('没有匹配结果');}// switch注意事项var num = 1;switch (num) {case 1:console.log(1);case 2:console.log(2);case 3:console.log(3);break;}// 1. 我们开发里面 表达式我们经常写成变量// 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等   必须是值和数据类型一致才可以 num === 1// 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case

- 循环结构

在JS中，主要有三种类型的循环语句：

for 循环

    // 循环的目的：可以重复执行某些代码// 1. for 通常跟计数有关系// 2. for 语法结构// for (初始化变量;条件表达式;操作表达式){//     //循环体// }//3. 初始化变量 就是var 声明的一个普通变量，通常用于作为计数器使用//4. 条件表达式 就是用来决定每次循环是否继续执行 就是终止的条件//5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)//6. 重复打印for (var i = 1; i <= 100; i++) {console.log('hello!')}//可以让用户控制输出的次数// var num = prompt('请你输入次数');// for (var i = 1; i <= num; i++) {//     console.log('hello!')// }//for 循环可以重复执行不同的代码  因为我们有计数器变量的存在 i每次循环值都会变化//for (var i = 1; i <= 100; i++){if(i == 1){console.log('他1岁了，出生了')}else if (i == 100){console.log('他100岁了，去世了');}else{console.log('这个人今年'+ i +'岁了');}}// 1. 求1-100之间所有数的平均值   需要一个 sum 和的变量 还需要一个平均值 average 变量var sum = 0;var average = 0;for (var i = 1; i <= 100; i++) {sum = sum + i;}average = sum / 100;console.log(average);// 2. 求1-100之间所有偶数和奇数的和   我们需要一个偶数的和变量 even  还需要一个奇数 oddvar even = 0;var odd = 0;for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {even = even + i;} else {odd = odd + i;}}console.log('1~100 之间所有的偶数和是' + even);console.log('1~100 之间所有的奇数和是' + odd);// 3. 求1-100之间所有能被3整除的数字的和   var result = 0;for (var i = 1; i <= 100; i++) {if (i % 3 == 0) {// result = result + i;result += i;}}console.log('1~100之间能够被3整数的数字的和是：' + result);//求学生成绩案例var num = prompt('请输入班级总人数');// num 总的班级人数var sum = 0;// 求和的变量var avg = 0;// 求平均值的变量for (var i = 1; i <= num ;i++){var grade = prompt('请输入第'+ i +'个学生的成绩');//因为prompt取过来的数据是字符串型需要转换为数字型sum += parseFloat(grade);}avg = sum/num;alert('班级学生的总成绩为' + sum);alert('班级学生的平均成绩为' + avg;// for (var i = 1; i <= 5; i++){//     console.log('*');// }// var str = '';// for (var i = 1; i <= 5; i++){//     str = str + '*';// }    // console.log(str);//双重for 循环// for (var i = 1; i <= 3; i++){//     console.log('这是外层循环第'+ i +'次');//     for (var j = 1; j <= 3; j++){//         console.log('这是里层循环第' + j + '次');//     }// }//打印n行n列星星var rows = prompt('请输入打印的行数');var cols = prompt('请输入打印的列数');var str = '';for (var i = 1;i <= rows;i++){for (var j = 1;j <= cols;j++){str = str + '*';}str = str + '\n';}alert(str);// var str = '';// for (var i = 1; i <= 10; i++){//     for (var j = i; j <= 10; j++){//         str = str + '*';//     }//     str = str + '\n';// }// console.log(str);//打印九九乘法表var str = '';for (var i =1; i <= 9;i++){for (j = 1; j <=i; j++){str += i + 'x' + j + '=' + i*j + '\t';}str = str + '\n';}console.log(str);

while 循环

    // 1. while 循环语法结构  while 当...的时候// while (条件表达式) {//     // 循环体// }// 2. 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环// 3. 代码验证var num = 1;while (num <= 100) {console.log('好啊有');num++;}// 4. 里面应该也有计数器 初始化变量// 5. 里面应该也有操作表达式  完成计数器的更新 防止死循环// while循环案例// 1. 打印人的一生，从1岁到100岁var i = 1;while (i <= 100) {console.log('这个人今年' + i + '岁了');i++;}// 2. 计算 1 ~ 100 之间所有整数的和var sum = 0;var j = 1;while (j <= 100) {sum += j;j++}console.log(sum);// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。var message = prompt('你爱我吗?');while (message !== '我爱你') {message = prompt('你爱我吗?');}alert('我也爱你啊！');

do…while 循环

    // 1.do while 循环 语法结构do {// 循环体} while (条件表达式)// 2.  执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环// 3. 代码验证var i = 1;do {console.log('how are you?');i++;} while (i <= 100)// 4. 我们的do while 循环体至少执行一次var message = prompt('你爱我吗?');do {message = prompt('你爱我吗?');}while (message !== '我爱你');alert('我也爱你啊！');

continue

    // continue 关键字   退出本次（当前次的循环）  继续执行剩余次数循环for (var i = 1; i <= 5; i++) {if (i == 3) {continue; // 只要遇见 continue就退出本次循环 直接跳到 i++}console.log('我正在吃第' + i + '个包子');}//1. 求1~100之间 除了能被7整除以外的其它数之和var sum = 0;for (var i = 1; i <= 100; i++){if(i % 7 == 0){continue;}sum += i;}console.log(sum);

break

    // break 退出整个循环for (var i = 1; i <= 5; i++) {if (i == 3) {break;}console.log('我正在吃第' + i + '个包子');}

JS命名规范以及语法格式

标识符命名规范

变量、函数的命名必须要有意义

变量的名称一般用名词

函数的名称一般用动词

操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {if (i == 3) {break; // 直接退出整个 for 循环，跳到整个for循环下面的语句}console.log('我正在吃第' + i + '个包子呢');
}

单行注释规范

for (var i = 1; i <= 5; i++) {if (i == 3) {break; // 单行注释前面注意有个空格}console.log('我正在吃第' + i + '个包子呢');
}

其他规范

括号与花括号之间留出空格，循环结构代码注意对齐，增加代码的可读性

    //简易ATM 实现var num = prompt('请输入您要的操作：' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出');var result = 100;if (num == 1) {var add = prompt('请输入你要存入的金额');result = result + parseFloat(add);alert('你账户的余额为' + result);}else if (num == 2) {var draw = prompt('请输入你要取出的金额');var result = result - parseFloat(draw);alert('你账户的余额为' + result);}else if (num == 3) {alert('你账户的余额为' + result);}else if (num == 4) {alert('已退出');}else {alert('输入错误，请重新输入');prompt('请输入您要的操作：' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出');}

数组

问：之前学习的数据类型，只能存储一个值。如果我们想存储班级中所有学生的姓名，那么该如何存储呢？

答：可以使用数组(Array)。数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。

    // 1. 数组(Array):就是指一组数据的集合  存储在单个变量下的优雅方式。// 2. 利用new 创建数组var arr = new Array();// 创建了一个空的数组// 3. 利用数组字面量创建var arr = [];// 创建了一个空的数组var arr1 = [1,2,'joy','123',true];// 4. 我们数组里面的数据一定用逗号分隔// 5. 数组里面的数据 比如1，2， 我们称为数组元素// 6. 获取数组元素 格式 数组名[索引号]console.log(arr1[2]);// joyconsole.log(arr1);// 输出整个数组var arr2 = ['马尔扎哈','玛卡巴卡','迪丽热巴'];console.log(arr2[0]);console.log(arr2[1]);console.log(arr2[2]);console.log(arr2[3]);// 因为没有这个数组元素 所以输出的结果是 undefined

数组遍历：

    // 数组遍历 把数组从头到尾访问一遍var arr = ['red','green','blue'];for (var i = 0; i < arr.length; i++) {console.log(arr[i]);}//数组长度  数组名.length//求数组的所有元素之和及平均值var arr = [2,6,1,7,4];var sum = 0;var avg = 0;for (var i = 0; i < arr.length; i++){sum += arr[i];}avg = sum / arr.length;console.log(sum,avg);// 想要输出多个变量 用逗号分隔即可// 求数组[2,6,1,77,52,25,7]中的最大值// 声明一个保存最大元素的变量 max。// 默认最大值可以取数组中的第一个元素。// 遍历这个数组，把里面每个数组元素和 max 相比较。// 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。// 最后输出这个 max。var arr = [2,6,1,77,52,25,7];var maximum = arr[0];for (var i =1; i < arr.length; i++) {if (maximum < arr[i]) {maximum = arr[i];}}console.log('该数组里的最大值是：' + maximum);// 将数组['red','green','black','pink'] 转换为字符串，并且用 | 或其他符号分隔var arr = ['red','green','black','pink'];var str = '';var sep = '|';for (var i =0; i < arr.length; i++) {str += arr[i] + sep;}console.log(str);

新增数组元素：

    // 1. 新增数组元素 修改length长度var arr = ['red','green','blue'];console.log(arr.length);arr.length = 5;// 我们把数组元素改为了5 里面应该有5个元素console.log(arr);console.log(arr[3]);// undefined// 2. 新增数组元素 修改索引号 追加数组元素var arr1 = ['red','green','blue'];arr1[3] = 'joy';console.log(arr1);arr1[0] = 'yellow';// 这里是替换原来的数组元素console.log(arr1);arr1 = '有点意思';console.log(arr1);// 不要直接给 数组名赋值 否则里面的数组元素都没有了var arr = [2,0,6,1,77,0,52,0,25,7,89];var newArr = [];//刚开始newArr.length 就是0// var j = 0;for (var i = 0; i < arr.length; i++) {if (arr[i] > 10) {// 新数组应该从0开始 依次递增newArr[newArr.length] = arr[i];// j++; }}console.log(newArr);//数组翻转var arr = ['red','green','pink','purple'];var newArr = [];//刚开始newArr.length 就是0for (var i = arr.length - 1; i >= 0 ; i--) {newArr[newArr.length] = arr[i];}console.log(newArr);//数组排序 这里用的是冒泡排序算法var arr = [5,3,2,4,1];for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数for (var j = 0; j <= arr.length - i - 1; j++ ) { // 里面的循环管 每一趟的交换次数//内部交换两个变量的值1 前一个盒后一个数组元素相比较if (arr[j] > arr[j + 1]) {var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}}console.log(arr);

函数

    // 1. 求 1~100的累加和var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum);// 2. 求 10~50的累加和var sum = 0;for (var i = 10; i <= 50; i++) {sum += i;}console.log(sum);// 3. 函数就是封装了一段可以被重复执行调用的代码块 目的： 就是让大量代码重复使用function getSum(num1, num2) {var sum = 0;for (var i = num1; i <= num2; i++) {sum += i;}console.log(sum);}getSum(1, 100);getSum(10, 50);getSum(1, 1000);

- 函数声明:

    // 函数声明分为两步： 声明函数 和 调用函数// 1. 声明函数// function 函数名() {//     //函数体// }function sayHi() {console.log('hi~~');}// (1) function 声明函数的关键字 全部小写// (2) 函数是做某件事情，函数名一般是动词// (3) 函数不调用自己不执行// 2. 调用函数// 函数名();sayHi();//调用函数的时候千万不要忘记小括号

- 函数的参数：

    // 我们可以利用函数的参数实现函数重复不同的代码// function 函数名(形参1,形参2...) {// 在声明函数的小括号里面是 形参（形式上的参数）// }// 函数名(实参1,实参2...);// 在函数调用的小括号里面是实参（实际的参数）// 3. 形参和实参的执行过程function cook(aru) { // 形参是接收实参的  形参类似于一个变量console.log(aru);}cook('鱼香肉丝');cook('酸辣土豆丝');// 1. 利用函数求任意两个数的和function getSum(num1, num2) {console.log(num1 + num2);}getSum(1, 3);getSum(3, 8);// 2. 利用函数求任意两个数之间的和function getSums(start, end) {var sum = 0;for (var i = start; i <= end; i++) {sum += i;}console.log(sum);}getSums(1, 100);getSums(1, 10);// 3. 注意点// (1) 多个参数之间用逗号隔开// (2) 形参可以看做是不用声明的变量

函数形参和实参个数匹配问题

    function getSum(num1, num2) {console.log(num1 + num2);}// 1. 如果实参的个数和形参的个数一致 则正常输出结果getSum(1, 3); // 4// 2. 如果实参的个数多于形参的个数  会取到形参的个数getSum(9,3,2); // 12// 3. 如果实参的个数小于形参的个数  多余的形参定义为undefined  最终的结果就是 NaN// 形参可以看作是不用声明的变量  num2 是一个变量但是没有接受值  结果就是undefined  getSum(4); // NaN//建议 我们尽量让实参的个数和形参相匹配

小结：

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值是undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

    // 1. 函数是做某件事或者实现某种功能// 2. 函数的返回值格式// function 函数名() {//     return 需要返回的结果;// }// 函数名();// 函数遇到return 就把后面的结果 返回给函数的调用者// 函数的返回值 return function getSum(num1,num2) {return num1 + num2;}console.log(getSum(1,8));//返回两个数之间的较大值function getMax(num1,num2) {// if (num1 > num2) {//     return num1;// }else// return num2;return num1 > num2 ? num1 : num2;}console.log(getMax(76,90));// 利用函数求数组 [5,2,99,101,67,77] 中的最大值function getArrMax(arr) { // 接受一个数组var max = arr[0];for(var i=1; i < arr.length; i++) {if (max < arr[i]){max = arr[i];}}return max;}// 实参是一个数组送过去// 在实际开发中 经常用一个变量来接受 函数的返回值结果 使用更简单var re = getArrMax([5,2,99,101,67,77]);console.log(re);// 函数返回值注意事项// 1. return 终止函数function getSum(n1,n2) {return n1 + n2; // return 后面的代码不会被执行alert('不会执行这句话');}console.log(getSum(3,9));// 2. return 只能返回一个值function fn(n1,n2) {return n1,n2; // 返回的结果是最后一个值}console.log(fn(7,4));// 3. 求任意两个数的 加减乘除 结果function getResult(n1,n2) {return [n1 + n2, n1 - n2, n1 * n2, n1 / n2];}var re = getResult(56,65); // 返回的是一个数组console.log(re);// 4. 我们的函数如果有return 则返回的是 return 后面的值，如果函数没有return 则返回undefined

arguments 的使用

    // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个argumentsfunction fn() {console.log(arguments); // 里面存储好了所有传递过来的实参  arguments = [1,2,3]console.log(arguments.length); // 3console.log(arguments[2]); // 3// 我们可以按照数组的方式遍历argumentsfor (var i = 0; i < arguments.length; i++) {console.log(arguments[i]);}}fn(1,2,3);// 伪数组 并不是真正意义上的数组// 1. 具有数组的 length 属性// 2. 按照索引的方式进行存储的// 3. 它没有真正数组的一些方法 pop() push() 等

几个案例：

// 利用函数求任意个数的最大值function getMax() {var Max = arguments[0];for (var i = 0; i < arguments.length; i++) {if(MaxArr < arguments[i]){Max = arguments[i];}}return Max;}var re = getMax(1,45,65,34,88,97,32);console.log(re);// 利用函数翻转任意数组  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,5,9]);console.log(arr1);var arr2 = reverse(['red','blue','green']);console.log(arr2);//利用函数冒泡排序封装function sort(arr) {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;}}}return arr;}var re = sort([34,65,78,96,21,45]);console.log(re);

函数可以相互调用：

    function fn1() {console.log(11);fn2();}fn1();function fn2() {console.log(22);}// 输出结果是：11 22// 用户输入年份，输出当前年份2月份的天数function backDay() {var year = prompt('请您输入年份：');if(isRunYear(year)) { // 调用函数需要加小括号alert('当前年份是闰年！2月份有29天');} else {alert('当前年份不是闰年！2月份有28天');}}backDay();// 判断是否为闰年的函数function isRunYear(year) {// 如果是闰年 返回 true 否则 返回 falsevar flag = false;if(year % 4 ==0 && year %100 == 0 || year % 400 == 0){flag =true;}return flag;}

函数的2种声明方式

    // 1. 利用函数关键字自定义函数(命名函数)function fn() {}fn();// 2. 函数表达式(匿名函数)// var 变量名 = function()var fun = function(aru) {console.log('我是函数表达式');console.log(aru);}fun('joy');// (1) fun是变量名 不是函数名// (2) 函数表达式声明方式跟变量声明差不多，只不过里面存的是值 而 函数表达式里面存的是函数// (3) 函数表达式也可以进行传递参数