引入方式

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
14
// 利用函数求任意个数的最大值
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 机

简易atm机

https://case.gahotx.cn/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("没有此操作！");
  }
}