本文介绍了JavaScript的发展历程，从web的起源到JavaScript在Netscape Navigator中的诞生。详细讲解了JavaScript的特性，如解释性语言、单线程和ECMAScript标准。接着，讨论了如何在网页中引入JavaScript，包括基本语法、数据类型和流程控制结构。还深入探讨了函数的声明、参数匹配和arguments对象的使用。
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;//代表十进制 9
console.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 如果不是数字返回 的是 true
console.log(isNaN(12));//false
//字符串引号嵌套 可以外双内单 或 外单内双
var str = '我是一个"高富帅"的程序员';
console.log(str);
//字符串转义字符 都是 \ 开头 但是这些转义字符需要写在引号里面
var str = '我是一个"高富帅"的\n程序员';
console.log(str);
字符串长度
//1.检测获取字符串的长度 legth
var str = 'wo shi shui';
console.log(str.length);//11
//2.字符串的拼接 + 字符串 + 任何类型 = 拼接之后的新字符串
console.log('沙漠' + '骆驼');// 字符串的 沙漠骆驼
console.log('joy' + 18);// 'joy18'
console.log('joy' + true);// joytrue
console.log(12+12);//24
console.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');//undefinedjoy
console.log(variable + 1);//NaN undefined 和数字相加最后的结果是 NaN
//null 空值
var space = null;
console.log(space + 'joy');//nulljoy
console.log(space + 1);//1
//typeof 可以判断变量是什么数据类型
var num = 10;
console.log(typeof(num));//number
var str = 'joy';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean
var vari = undefined;
console.log(vari);//undefined
var 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.14
console.log(parseFloat('120px'));// 120 会去掉这个px单位
console.log(parseFloat('rem120px'));// NaN
//3. 利用Number(变量)
var str = '123';
console.log(Number(str));// 123
console.log(Number('12'));// 12
//4. 利用了算数运算 - * / 隐式转换
console.log('12' - 0);// 12
console.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);// 3
console.log(4 % 2);// 0
//2. 浮点数 算术运算里面会有问题
console.log(0.1 + 0.2);// 0.30000000000000004
console.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. 口诀：先返回值 后自加1
var age = 10;
console.log(age++ + 10);// 20
// 前置自增盒后置自增如果单独使用 效果是一样的
- 比较运算符
比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。
//1. 我们程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
console.log(3 == 5);// false
console.log('joy' == '刘德华');// false
console.log(18 == 18);// true
console.log(18 != 18);// false
//2. 我们程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以
console.log(18 === 18);// true
console.log(18 === '18');// false
//3. 总结：= 等号赋值 == 判断 === 全等
- 逻辑运算符
//1. 逻辑与 && and 两侧都为true 结果才为 true
console.log(3 > 2 && 3 < 0);// false
console.log(3 < 5 && 3 > 2);// true
//2. 逻辑或 || or 两侧都为假 结果才为假
console.log(1 > 6 || 4 >3);// true
console.log(3 > 5 || 3 < 2);// false
//3. 逻辑非 ！ not
console.log(!9);// false
逻辑中断（短路操作）
//1. 用我们的布尔值参与的逻辑运算 true && false == false
//2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
//3. 逻辑运算与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1 为假 那么返回表达式1
console.log(123 && 456);// 456
console.log(0 && 456);// 0
//如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN
console.log('' && 1 + 2 && 456 * 45678);//'' 结果为空
//4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
console.log(123 || 456);// 123
console.log(123 || 456 || 456 + 123);// 123
console.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 的语法结构 如果if
if (条件表达式) {
//执行语句
}
//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 还需要一个奇数 odd
var 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]);// joy
console.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 就是0
for (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对象 而且是每个函数都内置好了这个arguments
function fn() {
console.log(arguments); // 里面存储好了所有传递过来的实参 arguments = [1,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]);
}
}
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 否则 返回 false
var 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) 函数表达式也可以进行传递参数
扫一扫
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
