引入方式

JS 有三种书写位置,分别为行内式、内嵌式和外链式

行内式

1
<input type="button" value="点我试试" onclick="alert('Hello World')" />
  • 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中(以 on 开头的属性,如:onclick)
  • 注意单双引号的使用:在 HTML 中我们推荐使用双引号,JS 中我们推荐使用单引号
  • 可读性差,在 html 中编写 JS 大量代码时,不方便阅读
  • 引号易错,引号多层嵌套匹配时,非常容易弄混
  • 特殊情况下才使用

内嵌式

1
2
3
<script>
alert('Hello World');
</script>
  • 可以将多行 JS 代码写到 <script> 标签的事件属性中
  • 内嵌式 JS 是学习时常用的方式

外链式

1
<script src="my.js"></script>
  • 利用 HTML 页面代码结构化,把大段 JS 代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
  • 引用外部 JS 文件的 script 标签中间不可以写代码
  • 适合于 JS 代码量比较大的情况

注释

单行注释

为了提高代码的可读性,JS 与 CSS 一样,也提供了注释功能。JS 中的注释主要有两种,分别是 单行注释 和 多行注释。

单行注释的注释方式如下:

1
// 我是一行文字,不想被 JS引擎 执行,所以 注释起来

// 用来注释单行文字( 快捷键 ctrl + / )

多行注释

多行注释的注释方式如下:

1
2
3
4
/*
获取用户年龄和姓名
并通过提示框显示出来
*/

/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )

输入输出语句

为了方便信息的输入输出,JS 中提供了一些输入输出语句,其常用的语句如下:

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info)浏览器弹出输入框,用户可以输入浏览器

alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。

基本数据类型

数据类型说明默认值
Number数字型,包含整型和浮点型0
Boolean布尔值类型,如:true、falsefalse
String字符串类型,如:'张三'""
Undefinedvar a;声明了变量但没有赋值,此时 a = undefinedundefined
Nullvar a = null;声明了变量 a 为空值null

数字型

进制

1
2
3
4
5
6
7
8
9
// 1. 八进制  0 ~ 7  我们程序里面数字前面加 0 表示八进制
var num1 = 010;
console.log(num1); // 010 八进制 转换为 10进制 就是 8
var num2 = 012;
console.log(num2);
// 2. 十六进制 0 ~ 9 a ~ f #ffffff 数字的前面加 0x 表示十六进制
var num3 = 0x9;
console.log(num3);
var num4 = 0xa;

特殊值

1
2
3
4
5
6
7
8
9
10
// 3. 数字型的最大值
console.log(Number.MAX_VALUE);
// 4. 数字型的最小值
console.log(Number.MIN_VALUE);
// 5. 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大
// 6. 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
// 7. 非数字
console.log('pink老师' - 100); // NaN (Not a number)

isNaN()

1
2
3
// isNaN() 这个方法用来判断非数字   并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true
console.log(isNaN(12)); // false
console.log(isNaN('pink老师')); // true

字符串型

字符串引号嵌套

JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)

1
2
3
4
var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错,不能 单双引号搭配

字符串转义符

​ 类似 HTML 里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。

​ 转义符都是 \ 开头的,常用的转义符及其说明如下:

转义符解释说明
\n换行符,n 是 newline 的意思
\ \斜杠 \
'' 单引号
"" 双引号
\ttab 缩进
\b空格 ,b 是 blank 的意思

字符串长度

字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

1
2
var strMsg = "我是帅气多金的程序猿!";
alert(strMsg.length); // 显示 11

字符串拼接

  • 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

  • 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串

1
2
3
4
5
6
//1.1 字符串 "相加"
alert("hello" + " " + "world"); // hello world
//1.2 数值字符串 "相加"
alert("100" + "100"); // 100100
//1.3 数值字符串 + 数值
alert("11" + 12); // 1112

获取变量数据类型

  • 获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

1
2
var num = 18;
console.log(typeof num); // 结果 number

数据类型转换

转换为字符串

方式说明案例
toString()转成字符串var num = 1; alert(num.toString());
String()强制转换转成字符串var num = 1; alert(String(num));
加号拼接字符串和字符串拼接的结果都是字符串var num = 1; alert(num + "字符串");

三种转换方式,我们跟喜欢用第三种加号拼接字符串转换方式, 这种方式也称之为隐式转换

转换为数字型

方式说明案例
parseInt(string)函数将 string 类型转成整数数值型parseInt('78')
parseFloat(string)函数将 string 类型转成浮点数数值型parseFloat('78.21')
Number()强制转换函数将 string 类型转换为数值型Number('12')
js 隐式转换(- * /)利用算术运算隐式转换为数值型'12'-2

转换为布尔型

方式说明案例
Boolean()函数其他类型转成布尔值Boolean('true')
1
2
3
4
5
6
7
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var result;
var num1 = prompt("请输入第一个数");
var num2 = prompt("请输入第二个数");
var oper = prompt("请输入运算符");
switch (oper) {
case "+":
result = parseInt(num1) + parseInt(num2); /*parseInt() 函数可解析一个字符串,并返回一个整数。*/
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
}
alert("计算结果为" + num1 + oper + num2 + "=" + result);

标识符、关键字和保留字

标识符

标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

关键字

关键字:是指 JS 本身已经使用了的字,不能再用它们充当变量名、方法名。

包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

保留字

保留字:实际上就是预留的“关键字”,意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。

包括:boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意:如果将保留字用作变量名或函数名,那么除非将来的浏览器实现了该保留字,否则很可能收不到任何错误消息。当浏览器将其实现后,该单词将被看做关键字,如此将出现关键字错误。

递增和递减运算符

递增和递减运算符概述

如果需要反复给数字变量添加或减去 1,可以使用递增(++)和递减( -- )运算符来完成。在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。

递增运算符

前置递增运算符

++num 前置递增,就是自加 1,类似于 num = num + 1,但是 ++num 写起来更简单。

使用口诀:先自加,后返回值

1
2
var num = 10;
alert(++num + 10); // 21

后置递增运算符

num++ 后置递增,就是自加 1,类似于 num = num + 1 ,但是 num++ 写起来更简单。

使用口诀:先返回原值,后自加

1
2
var num = 10;
alert(10 + num++); // 20

浮点数的精度问题

浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。

1
2
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001

所以:不要直接判断两个浮点数是否相等 !

逻辑运算符

== 和 != 比较若类型不同,先尝试转换类型(隐式转换),再作值比较,最后返回值比较结果 。

而 === 和 !== 只有在相同类型下,才会比较其值。

逻辑中断

短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

逻辑与

语法: 表达式 1 && 表达式 2

  • 如果第一个表达式的值为真,则返回表达式 2

  • 如果第一个表达式的值为假,则返回表达式 1

1
2
3
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(123 && 456 && 789); // 789

逻辑或

语法: 表达式 1 || 表达式 2

  • 如果第一个表达式的值为真,则返回表达式 1

  • 如果第一个表达式的值为假,则返回表达式 2

1
2
3
console.log(123 || 456); //  123
console.log(0 || 456); // 456
console.log(123 || 456 || 789); // 123

运算符优先级

优先级运算符顺序
1小括号()
2一元运算符++ -- !
3算术运算符先 * / % 后 + -
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先 && 后
7赋值运算符=
8逗号运算符,
  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

分支流程控制

if 语句

1
2
3
4
// 条件成立执行代码,否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}

if else 语句(双分支语句)

1
2
3
4
5
6
// 条件成立  执行 if 里面代码,否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}

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

1
2
3
4
5
6
7
8
9
10
11
12
// 适合于检查多重条件。
if (条件表达式1) {
语句1
} else if (条件表达式2) {
语句2
} else if (条件表达式3) {
语句3
....
} else {
// 上述条件都不成立执行此处代码
}

三元表达式

1
表达式1 ? 表达式2 : 表达式3;

执行思路

  • 如果表达式 1 为 true ,则返回表达式 2 的值,如果表达式 1 为 false,则返回表达式 3 的值
  • 简单理解:就类似于 if else (双分支) 的简写

switch 分支流程控制

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。

1
2
3
4
5
6
7
8
9
10
switch (表达式) {
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
  • 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
  • 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
  • switch 表达式的值会与结构中的 case 的值做比较
  • 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
  • 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

执行 case 里面的语句时,如果没有 break,则继续执行下一个 case 里面的语句。

switch 语句和 if else if 语句的区别

  • 一般情况下,它们两个语句可以相互替换
  • switch...case 语句通常处理 case 为比较确定值的情况, 而 if…else 语句更加灵活,常用于范围判断(大于、等于某个范围)
  • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而 if…else 语句有几种条件,就得判断多少次。
  • 当分支比较少时,if… else 语句的执行效率比 switch 语句高。
  • 当分支比较多时,switch 语句的执行效率比较高,而且结构更清晰。

循环

for 循环

1
2
3
for (初始化变量; 条件表达式; 操作表达式) {
//循环体
}

双重 for 循环语法

1
2
3
4
5
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
  • 内层循环可以看做外层循环的循环体语句
  • 内层循环执行的顺序也要遵循 for 循环的执行顺序
  • 外层循环执行一次,内层循环要执行全部次数

while 循环

1
2
3
while (条件表达式) {
// 循环体代码
}

使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环

do-while 循环

1
2
3
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while (条件表达式);

先再执行循环体,再判断,do…while 循环语句至少会执行一次循环体代码

continue

continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。

例如,吃 5 个包子,第 3 个有虫子,就扔掉第 3 个,继续吃第 4 个第 5 个包子,其代码实现如下:

1
2
3
4
5
6
7
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log("这个包子有虫子,扔掉");
continue; // 跳出本次循环,跳出的是第3次循环
}
console.log("我正在吃第" + i + "个包子呢");
}

运行结果如下:

20211120203254

break

break 关键字用于立即跳出整个循环(循环结束)。

例如,吃 5 个包子,吃到第 3 个发现里面有半个虫子,其余的不吃了,其代码实现如下:

1
2
3
4
5
6
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整个for 循环,跳到整个for下面的语句
}
console.log("我正在吃第" + i + "个包子呢");
}

运行结果如下:

20211120203517

数组

JS 中创建数组有两种方式:

利用 new 创建数组

1
2
var 数组名 = new Array() ;
var arr = new Array(); // 创建一个新的空数组

注意 Array () ,A 要大写

利用数组字面量创建数组

1
2
3
4
//1. 使用数组字面量方式创建空的数组
var 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];
  • 数组的字面量是方括号 [ ]
  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后最多使用的方式

数组元素的类型

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

1
var arrStus = ["小白", 12, true, 28.9];

遍历数组

把数组中的每个元素从头到尾都访问一次(类似学生的点名),可以通过 for 循环索引遍历数组中的每一项

1
2
3
4
var arr = ["red", "green", "blue"];
for (var i = 0; i < arr.length; i++) {
console.log(arrStus[i]);
}

函数

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

声明函数

1
2
3
4
// 声明函数
function 函数名() {
//函数体代码
}
  • function 是声明函数的关键字,必须小写
  • 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum

调用函数

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

调用的时候千万不要忘记添加小括号

函数的参数

  • 形参:函数定义时设置接收调用时传入
  • 实参:函数调用时传入小括号内的真实数据
1
2
3
4
5
6
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
  1. 调用的时候实参值是传递给形参的
  2. 形参简单理解为:不用声明的变量
  3. 实参和形参的多个参数之间用逗号分隔

函数的返回值

return 语句

返回值:函数调用整体代表的数据;函数执行完成后可以通过 return 语句将指定数据返回 。

1
2
3
4
5
6
7
// 声明函数
function 函数名(){
...
return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
  • 在使用 return 语句时,函数会停止执行,并返回指定的值
  • 如果函数没有 return ,返回的值是 undefined

break, continue, return 的区别

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

arguments 的使用

当不确定有多少个参数传递的时候,可以用 arguments 来获取。JavaScript 中,arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。arguments 展示形式是一个伪数组,因此可以进行遍历。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 利用函数求任意个数的最大值
function getMax() { // arguments = [1,2,3]
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, 5));
console.log(getMax(11, 2, 34, 444, 5, 100));

伪数组具有以下特点:

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

在函数内部使用该对象,用此对象获取函数调用时传的实参。

函数的两种声明方式

自定义函数方式(命名函数)

1
2
3
4
// 声明定义方式
function fn() {...}
// 调用
fn();
  • 因为有名字,所以也被称为命名函数
  • 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面

函数表达式方式(匿名函数)

1
2
3
4
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function() {...};
// 调用的方式,函数调用必须写到函数体下面
fn();
  • 因为函数没有名字,所以也被称为匿名函数
  • 这个 fn 里面存储的是一个函数
  • 函数表达式方式原理跟声明变量方式是一致的
  • 函数调用的代码必须写到函数体后面

综合案例-简易 atm 机

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var num = prompt("请输入您要的操作:\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出");
var sum = 100;

if (num == 4) {
alert("您正在退出!");
} else {
do {
atm(num);
num = prompt("请输入您要的操作:\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出");
} while (num != 4);
}

function atm(num) {
switch (num) {
case "1":
var save = prompt("请输入您要存的钱数:");
sum = parseInt(sum) + parseInt(save);
alert("您的余额为:" + sum);
break;
case "2":
var take = prompt("请输入您要取的钱数:");
sum = parseInt(sum) - parseInt(take);
alert("您的余额为:" + sum);
break;
case "3":
alert("您的余额为:" + sum);
break;
case "4":
alert("您正在退出!");
break;
default:
alert("没有此操作!");
}
}