一、初始 JavaScript
1、JS 注释
- 使用
//
注释单行代码 - 使用
/* */
注释多行代码
// 1.单行注释 ctrl + /
/* 2.多行注释 ctrl + shift + / */
2、JS 输入输出语句
输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。
- 常用的输入输出语句
方法 | 说明 |
---|---|
alert(msg) | 浏览器弹出警示框 |
console.log(msg) | 浏览器控制台打印输出信息 |
prompt(info) | 浏览器弹出输入框,用户输入信息 |
// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出信息展示给用户
alert('计算的结果是');
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的');
二、变量
1、变量概述
1)什么是变量
变量:用于存放数据的容器,通过变量名获取数据,甚至可以修改数据(变量就是一个装东西的盒子)
2)变量在内存中的存储
本质:变量是程序在内存中申请的一块用来存放数据的空间
2、变量的使用
变量在使用时分为两步:①、声明变量;②、赋值
声明变量
// 声明变量
var age; // 声明一个名为 age 的变量
- var 是一个JS关键字,用来声明变量(variable)。使用该关键字声明变量后,计算机会自动为变量分配内存空间
- age 是程序员定义的变量名,通过变量名来访问内存中分配的空间
3、变量的初始化
变量的初始化:声明一个变量并赋值
var age = 18; //声明变量同时赋值为18
4、变量的语法扩展
1)更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准
var age = 18;
age = 81; // 最后的结果就是81,因为18被覆盖掉了
2)同时声明多个变量
同时声明多个变量时,只需要写一个var,多个变量之间使用英文逗号隔开
var age = 10, name = 'yixin', sex = 1;
3)声明变量特殊情况
情况 | 说明 | 结果 |
---|---|---|
var age;console.log(age); | 只声明 不赋值 | undefined |
console.log(age); | 不声明 不赋值 直接使用 | 报错 |
age = 10;console.log(age); | 不声明 只赋值 | 10 |
5、变量命名规范
- 由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成,如:usrAge, num01, _name
- 严格区分大小写。var app;和var App; 是两个变量
- 不能以数字开头。18age 是错误的
- 不能是关键字、保留字。例如:var、for、while
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
三、数据类型
1、数据类型简介
1)为什么需要数据类型
在计算机中,不同的数据所占用的存储空间是不同的。
数据类型就是数据的类别型号,便于把数据分成所需内存大小不同的数据,充分利用存储空间。
2)变量的数据类型
JavaScript是一种弱类型或者说动态语言。不用提前声明变量的类型,在程序运行的过程中,类型会被自动确定。
var age = 10; // 这是一个数字型
var areYouOk = 'yes'; // 这是一个字符串
在代码运行时,变量的数据类型是由JS引擎根据 = 右边变量的数据类型来判断的,运行完毕后,变量的数据类型就确定了。
JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
var x = 6; // x 为数字型
var x = "Bill"; // x 为字符串型
3)数据类型的分类
JS把数据类型分为两类:
- 简单数据类型(Number,String,Boolean,Undefined,Null)
- 复杂数据类型(object)
2、简单数据类型
1)简单数据类型(基本数据类型)
JavaScript中的简单数据类型及其说明:
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型值和浮点型值,如21、0.21 | 0 |
Boolean | 布尔值类型,如true、false,等价于1和0 | false |
String | 字符串类型,如"张三",字符串都带引号 | “” |
Undefined | var a;声明了变量 a 但是没有给值,此时a = undefined | undefined |
Null | var a = null;声明了变量 a 为空值 | null |
数字型 Number
a、数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。
在JS中八进制前面加 0,十六进制前面加 0x
// 1.八进制数字序列范围:0 ~ 7
var num1 = 07; // 对应十进制的7
var num2 = 023; // 对应十进制的19
var num3 = 010; // 对应十进制的8
// 2.十六进制数字序列范围:0 ~ 9 以及 A ~ F
var num = 0xA;
b、数字型三个特殊值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
- Infinity,代表无穷大,大于任何数值
- -Infinity,代表无穷小,小于任何数值
- NaN,Not a number,代表一个非数值
c、isNaN
用来判断一个变量是否为非数字类型,返回true或者false
var userAge = 21;
var isOk = isNaN(userAge);
console.log(isOk); // false,21不是一个非数字
var userName = "andy";
console.log(isNaN(userName)); // true,"andy"是一个非数字
字符串型 String
a、字符串引号嵌套
JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)
var strMsg = '我是"高富帅"程序员'; // 可以用''包含""
var strMsg2 = "我是'高富帅'程序员" // 可以用""包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错,不能单双引号搭配
b、字符串转义符
转义符都是 \ 开头的,常见的转移符及其说明如下:
转义符 | 解释说明 |
---|---|
\n | 换行符,n 是 newline 的意思 |
\ | 斜杠 \ |
’ | ’ 单引号 |
" | " 双引号 |
\t | tab 缩进 |
\b | 空格,b 是 blank 的意思 |
c、字符串长度
字符串是由若干个字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length
属性可以获取整个字符串的长度。
// 1.检测获取字符串的长度 length
var str = 'my name is andy';
console.log(str.length); // 15
d、字符串拼接
- 字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串
口诀:数值相加,字符相接
// 2.字符串的拼接 +
console.log('沙漠' + '骆驼'); //'沙漠骆驼'
console.log('pink' + true); //'pinktrue'
console.log(12 + 12); //24
console.log('12' + 12); //'1212'
e、字符串拼接加强
console.log('pink老师' + 18); // 只要有字符就会相连
var age = 18;
// console.log('pink老师age岁啦'); // 不能这样写
console.log('pink老师' + age + '岁啦'); // 正确写法
布尔型 Boolean
布尔类型有两个值:true 和 false,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候,true 的值为 1,false 的值为 0。
console.log(true + 1); // 2
console.log(false + 1); // 1
Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时,注意结果)
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
一个声明变量给 null 值,里面存的值为空
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
3、获取变量数据类型
1)获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
2)字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量:8,9,10
- 字符串字面量:‘黑马程序员’,“大前端”
- 布尔字面量:true,false
4、数据类型转换
1)什么是数据类型转换
把一种数据类型的变量转换成另一种数据类型
- 通常实现3种方式的转换:
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
2)转换为字符串
方式 | 说明 | 案例 |
---|---|---|
toString() | 转换成字符串 | var num = 1; alert(num.toString()); |
String() | 转换成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串(隐式转换) | 和字符串拼接的 结果都是字符串 | var num = 1; alert(num + “我是字符串”); |
3)转换为数字型(重要)
方式 | 说明 | 案例 |
---|---|---|
parseInt(string)函数 | 将string类型转成整数数值型 | parseInt(‘78’) |
parseFloat(string) | 将string类型转成浮点数数值型 | parseFloat(‘78.21’) |
Number()强制转换函数 | 将string类型转换成数值型 | Number(‘12’) |
js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12’ - 0 |
4)转换为布尔型
方式 | 说明 | 案例 |
---|---|---|
Boolean()函数 | 其他类型转成布尔值 | Boolean(‘true’); |
- 代表空、否定的值会被转换为 false,如 ‘’、0、NaN、null、undefined
- 其余值都会被转换为 true
console.log(Boolean('')); //false
console.log(Boolean('')); //true
5、练习
依次询问并获取用户的姓名、年龄、性别,并打印用户信息
var userName = prompt("请输入您的姓名:");
var userAge = prompt("请输入您的年龄:");
var userGender = prompt("请输入您的性别:");
alert("用户信息表\n姓名:" + userName + "\n年龄:"+ userAge +"\n性别:" + userGender);
四、运算符
-
运算符(operator)也称为操作符,用于实现赋值、比较和执行算数运算等功能的符号。
-
JavaScript中常用的运算符有:
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
1、算术运算符
1)算术运算符概述
概念:算术运算使用的符号,用于执行两个变量或值的算术运算。
运算符 | 描述 | 实例 |
---|---|---|
+ | 加 | 10 + 20 = 30 |
- | 减 | 10 - 20 = -10 |
* | 乘 | 10 * 20 = 200 |
/ | 除 | 10 / 20 = 0.5 |
% | 取余数(取模) | 返回除法的余数(9 % 2 = 1) |
2)浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算术计算时其精度不如整数
注:不要直接判断两个浮点数是否相等!
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7,而是:7.000000000000001
3)表达式和返回值
表达式:由数字、运算符、变量等组成的式子
console.log(1 + 1); // 2 就是返回值
2、递增和递减运算符
反复给数字变量添加或减去1,可以使用递增(++)和递减(- -)运算符来完成,递增(++)和递减(- -)放在变量前面时,称为前置递增(递减)运算符;反之,称为后置递增(递减)运算符
- 前置递增运算符
++num 前置递增,自加1,类似于 num = num + 1
注:先自加,后返回值 - 后置递增运算符
num++ 后置递增,自加1,类似于 num = num + 1
注:先返回原值,后自加
3、比较运算符
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果
运算符名称 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于号 | 1 < 2 | true |
> | 大于号 | 1 > 2 | false |
>= | 大于等于号 | 2 >= 2 | true |
<= | 小于等于号 | 3 <= 2 | false |
== | 判等号(默认转换数据类型) | 37 == 37 | true |
!= | 不等号 | 37 != 37 | false |
=== !== | 全等 要求值和数据类型都一致 | 37 === ‘37’ | false |
小结
符号 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边赋给左边 |
== | 判断 | 判断两边是否相等(注意此时有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
consolo.log(18 == '18'); // true
console.log(18 === '18'); // false
4、逻辑运算符
1)逻辑运算符概述
概念:用来进行布尔值运算的运算符,其返回值也是布尔值
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | 逻辑与,简称与 and | true && false |
|| | 逻辑或,简称或 or | true || false |
! | 逻辑非,简称非 not | !true |
2)短路运算(逻辑中断)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
-
逻辑与
- 语法:表达式1 && 表达式2
- 如果表达式1的值为真,则返回表达式2
- 如果表达式1的值为假,则返回表达式1
-
逻辑或
- 语法:表达式1 || 表达式2
- 如果表达式1的值为真,则返回表达式1
- 如果表达式1的值为假,则返回表达式2
5、赋值运算符
概念:用来把数据赋值给变量的运算符
赋值运算符 | 说明 | 案例 |
---|---|---|
= | 直接赋值 | var userName = ‘我是值’; |
+=、-= | 加、减一个数后再赋值 | var age = 10; age += 5; // 15 |
*=、/=、%= | 乘、除、取模后再赋值 | var age = 2; age *= 5; // 10 |
6、运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算术运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
五、流程控制
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,三种结构代表三种代码执行的顺序
顺序流程控制
程序按照代码的先后顺序,依次执行
1、分支流程控制 if 语句
分支语句
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码
1)if 语句
// 条件成立执行代码,否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}
2)if else 语句
// 条件成立,执行 if 里面的代码,否则执行 else 里面的代码
if (条件表达式) {
// 条件成立执行的代码
} else {
// 条件不成立执行的代码
}
3)if else if 语句(多分支语句)
// 适合于检查多重条件
if (条件表达式1) {
// 语句1;
} else if (条件表达式2) {
// 语句2;
} else if (条件表达式3) {
// 语句3;
} else {
// 上述条件都不成立执行此处代码
}
2、三元运算符
// 格式:条件表达式 ? 表达式1 : 表达式2
// 执行思路:如果条件表达式的结果为真,则返回表达式1的值;反之,返回表达式2的值
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result); // 是的
3、分支流程控制 switch 语句
switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch 语句。
switch (表达式) {
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
switch 语句和 if else if 语句的区别
- 一般情况下,它们两个语句可以相互替换
- switch…case 语句通常处理 case 为比较确定值的情况,而 if…else… 语句更加灵活,常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而 if…else 语句有几种条件,就得判断多少次。
- 当分支比较少,if…else 语句的执行效率比 switch 语句高
- 当分支比较多时,switch 语句的执行效率比较高,而且结构更清晰
六、循环
1、循环的目的
在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句
2、for 循环
在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决与循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
for 循环主要用于把某些代码循环若干次,通常跟计数有关,其语法结构如下:
for (初始化变量; 条件表达式; 操作表达式) {
// 循环体
}
练习
要求用户输入班级人数,之后依次输入每个学生的成绩,最后打印出该班级总的成绩以及平均成绩
var num = parseInt(prompt("请输入班级的人数:"));
var score = 0;
var sum = 0;
var average = 0;
for (var i = 1; i <= num; i++) {
score = parseInt(prompt("请输入第"+ i +"个同学的成绩:"));
sum += score;
}
average = sum / num;
alert("该班级总的成绩为:" + sum + "\n" + "平均成绩为:" + average);
3、双重for循环
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for循环,这样的for循环语句为双重for循环。
语法结构如下:
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
// 执行语句;
}
}
练习1:打印n行n列的星星
要求用户输入行数和列数,之后在控制台打印出用户输入行数和列数的星星
var str = '';
var rows = prompt('请输入星星的行数:');
var cols = prompt('请输入星星的列数:');
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
str = str + '★';
}
str += '\n';
}
console.log(str);
练习2:打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = 1; j <= 10 - (i - 1); j++) {
str += '★';
}
str += '\n';
}
console.log(str);
练习3:打印正三角形
var str = '';
for (var i = 1; i <= 10; i++) {
for(var j = 10 - i + 1; j <= 10; j++) {
str += '★';
}
str += '\n';
}
console.log(str);
练习4:打印九九乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + '×' + i + '=' + j * i + '\t';
}
str += '\n';
}
console.log(str);
七、数组
1、数组的概念
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。
// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];
2、创建数组
-
利用new创建数组
var 数组名 = new Array(); var arr = new Array(); // 创建一个新的空数组
-
利用数组字面量创建数组
// 1、使用数组字面量的方式创建空的数组 var 数组名 = []; // 2、使用数组字面量方式创建初始值的数组 var 数组名 = ['小白', '小黑', '大黄', '瑞奇'];
3、获取数组元素
通过索引获取数组元素,方式:数组名[索引号]
索引(下标):用来访问数组元素的序号(数组下标从0开始)
// 定义数组
var arrStus = [1, 2, 3];
// 获取数组中的第2个元素
alert(arrStus[1]);
练习:定义一个数组,里面存放星期一、星期二……直到星期日(共七天),在控制台输出:星期日
var dayStr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
console.log(dayStr[6]);
4、遍历数组
遍历:把数组中的每个元素从头到尾访问一次
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) {
console.log(arr[i]);
}
获取数组的长度,方式:数组名.length
练习1:求数组[2, 6, 1, 7, 4]里面所有元素的和以及平均值
var arr = [2, 6, 1, 7, 4];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log('元素总和为:' + sum);
console.log('平均值为:' + sum / arr.length);
练习2:求数组[2, 6, 1, 77, 52, 25, 7, 100]的最大值
var arr = [2, 6, 1, 77, 52, 25, 7, 100];
var max = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
console.log('数组中的最大值为:' + max);
练习3:数组转换为分割字符串
要求:将数组[‘red’, ‘green’, ‘blue’, ‘pink’]转换成字符串,并且用|
或其他符号分割
输出:'red|green|blue|pink|'
var arr = ['red', 'green', 'blue', 'pink'];
var temp = '';
for (var i = 0; i < arr.length; i++) {
temp += arr[i] + '|';
}
console.log(temp);
5、数组中新增元素
通过修改length长度新增数组元素
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]); // undefined
通过修改数组索引新增数组元素
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'yellow';
console.log(arr[4]); // 'yellow'
arr[0] = 'new_red' // 替换原来的元素
console.log(arr[0]); // 'new_red'
练习1:新建一个数组,里面存放10个整数(1~10)
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
console.log(arr);
练习2:筛选数组
将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7]中大于等于10的元素选出来,放入新数组
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7];
var new_arr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
new_arr[j] = arr[i];
j++;
}
}
console.log(new_arr);
6、练习
练习1:删除指定数组元素
要求:将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7]中的0去掉后,形成一个不包含0的新数组
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 10, 7];
var new_arr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
new_arr[new_arr.length] = arr[i];
}
}
console.log(new_arr);
练习2:翻转数组
要求:将数组[‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’]的内容反过来存放
输出:[‘purple’, ‘pink’, ‘blue’, ‘green’, ‘red’]
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var new_arr = [];
for (var i = arr.length - 1; i >= 0; i--) {
new_arr[new_arr.length] = arr[i];
}
console.log(new_arr);
练习3:数组排序(冒泡排序)
冒泡排序:是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.lenth - 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、函数的概念
函数:function,是被设计为执行特定任务的代码块
说明:函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。
2、函数的使用
函数在使用时分为两步:声明函数和调用函数
- 函数的声明语法
function 函数名() { 函数体 }
- 例子:
function sayHi() { document.write('hai~~'); }
- 函数名命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议:常用动词约定
function getName() {} function addSquares() {}
动词 含义 can 判断是否可执行某个动作 has 判断是否含某个值 is 判断是否为某个值 get 获取某个值 set 设置某个值 load 加载某些数据 - 函数的调用语法
// 函数调用,这些函数体内的代码逻辑会被执行 函数名();
注意:声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数
练习:
利用函数计算1-100之间的累加和
// 1.声明函数
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
// 2.调用函数
getSum();
3、函数的参数
1)形参和实参
形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如 num1 = 10),实参可以理解为是给这个变量赋值
2)函数调用
-
声明语法
function 函数名(参数列表) { 函数体 }
-
参数列表
- 传入数据列表
- 声明这个函数需要传入几个数据
- 多个数据用逗号隔开
-
例
// 单个参数 function getSquare(num1) { document.write(num1 * num1); } // 多个参数 function getSum(num1, num2) { document.write(num1 + num2); }
3)形参和实参个数不匹配问题
参数个数 | 说明 |
---|---|
实参个数等于形参个数 | 输出正确结果 |
实参个数大于形参个数 | 只取到形参的个数 |
实参个数小于形参个数 | 多的形参定义为undefined,结果为NaN |
4、函数的返回值
-
当函数需要返回数据出去时,用
return
关键字 -
语法
function 函数名() { return 需要返回的结果; }
-
例子
function getSum(x, y) { return x + y; } let num = getSum(10, 30); document.write(num);
-
注意:
- 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
- return只能返回一个值
- 函数内部只能出现 1 次 return,并且 return 后面代码不会再被执行,所以 return 后面的数据不要换行写
- return会立即结束当前函数
- 函数可以没有 return,这种情况函数默认返回值为 undefined
练习
1、利用函数求任意两个数的最大值
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(12, 45));
console.log(getMax(323, 67));
2、求数组[5, 2, 99, 101, 67, 77, 110]中的最大数值。
var array = [5, 2, 99, 101, 67, 77, 110];
function getArrMax(arr) {
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
console.log(getArrMax(array));
5、arguments的使用
- 当我们不确定有多少个参数传递的时候,可以用arguments来获取。
- 在JavaScript中,arguments实际上它是当前函数的一个内置对象。
- 所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。
- arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
- 具有length属性
- 按索引方式储存数据
- 不具有数组的push()/pop()等方法
练习:利用函数求任意个数的最大值
function getMax() {
var max = arguments[0];
for(var i = 1; i < arguments.length; i++) {
if(arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(getMax(1, 2, 3));
console.log(getMax(1, 2, 3, 4, 6));
console.log(getMax(1, 2, 3, 6, 0));
console.log(getMax(1, 2, 3, 9, 1, 100));
6、匿名函数
将匿名函数赋值给一个变量并且通过变量名称进行调用,我们将这个称为函数表达式
// 语法
let fn = function() {
// 函数体
}
// 调用
fn();
立即执行函数:避免全局变量之间的污染
// 方式一
(function () { console.log(11) })();
// 方式二
(function () { console.log(11) }());
7、练习
利用函数封装方式,翻转任意一个数组
function reverseArr(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
var testArr = ['red', 'green', 'blue', 'pink', 'purple'];
console.log(reverseArr(testArr));
利用函数封装方式,对数组排序——冒泡排序
function sort(arr) {
var temp = [];
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]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(sort([1, 4, 2, 76, 23, 34, 12]));
console.log(sort([12, 24, 2, 176, 43, 94, 132]));
输入一个年份,判断是否为闰年(闰年:能被4整除并且不能被100整除,或者能被400整除)
function isLeapYear(year) {
var flag = year + '年不是闰年';
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = year + '年是闰年';
}
return flag;
}
var year = parseInt(prompt('请输入年份'));
alert(isLeapYear(year));
用户输入年份,输出当前年份2月份的天数(如果是闰年,则2月份是29天,如果是平年,则2月份是28天)
function isLeapYear(year) {
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
function backDay(year) {
if(isLeapYear(year)) {
alert('当前年份是闰年,2月份有29天');
} else {
alert('当前年份是平年,2月份有28天');
}
}
var year = parseInt(prompt('请输入年份:'));
backDay(year);
九、作用域
1、作用域
- 通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
- 作用域的使用提高了程序逻辑的局域性,增强了程序的可靠性,减少了名字冲突。
2、变量的作用域
- 在JavaScript中,根据作用域的不同,变量可以分为
- 在函数内部或者块级作用域内部,没有声明,直接赋值的变量属于全局变量函数内部的
- 形参可以看做是局部变量
3、作用域链
- 只要是代码,就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
十、预解析
- JavaScript代码是由浏览器中的JavaScript解析器来执行的。
- JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行
- 预解析:js引擎会把js里面所有的var还有function提升到当前作用域的最前面
- 代码执行:按照代码书写的顺序从上往下执行
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
- 变量提升:把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
- 函数提升:把所有的函数声明提升到当前作用域的最前面,不调用函数
// 结果为undefined
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
// 相当于执行了以下操作
var num;
function fun() {
console.log(num);
var num = 20;
}
num = 10;
fun();
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
// 相当于 var a = 9;b = 9; c = 9; b和c直接赋值,没有var声明当作全局变量
// 集体声明:var a = 9, b = 9, c = 9;
console.log(a);
console.log(b);
console.log(c);
}
十一、对象
1、对象
- 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数值,函数等。
- 对象由属性和方法组成的。
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
2、创建对象的三种方式
1)利用字面量创建对象
对象字面量:花括号{}
里面包含了表达这个具体事物(对象)的属性和方法。
// 创建对象
// var obj = {}; // 创建了一个空的对象
var obj = {
uname: 'yixin',
age: 18,
sex: '男',
sayHi: function() {
console.log('hi~');
}
}
// 使用对象
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();
- 创建对象:
- 对象里面的属性或者方法采用键值对的形式
- 多个属性或者方法中间用逗号隔开
- 方法冒号后面跟的是一个匿名函数
- 使用对象:
- 调用对象的属性:
- 方式一:
对象名.属性名
- 方式二:
对象名['属性名']
- 方式一:
- 调用对象的方法:
对象名.方法名()
- 调用对象的属性: