引入方式
JS 有三种书写位置,分别为行内式、内嵌式和外链式
行内式
1 | <input type="button" value="点我试试" onclick="alert('Hello World')" /> |
- 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中(以 on 开头的属性,如:onclick)
- 注意单双引号的使用:在 HTML 中我们推荐使用双引号,JS 中我们推荐使用单引号
- 可读性差,在 html 中编写 JS 大量代码时,不方便阅读
- 引号易错,引号多层嵌套匹配时,非常容易弄混
- 特殊情况下才使用
内嵌式
1 | <script> |
- 可以将多行 JS 代码写到 <script> 标签的事件属性中
- 内嵌式 JS 是学习时常用的方式
外链式
1 | <script src="my.js"></script> |
- 利用 HTML 页面代码结构化,把大段 JS 代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
- 引用外部 JS 文件的 script 标签中间不可以写代码
- 适合于 JS 代码量比较大的情况
注释
单行注释
为了提高代码的可读性,JS 与 CSS 一样,也提供了注释功能。JS 中的注释主要有两种,分别是 单行注释 和 多行注释。
单行注释的注释方式如下:
1 | // 我是一行文字,不想被 JS引擎 执行,所以 注释起来 |
// 用来注释单行文字( 快捷键 ctrl + / )
多行注释
多行注释的注释方式如下:
1 | /* |
/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )
输入输出语句
为了方便信息的输入输出,JS 中提供了一些输入输出语句,其常用的语句如下:
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。
基本数据类型
数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型和浮点型 | 0 |
Boolean | 布尔值类型,如:true、false | false |
String | 字符串类型,如:'张三' | "" |
Undefined | var a;声明了变量但没有赋值,此时 a = undefined | undefined |
Null | var a = null;声明了变量 a 为空值 | null |
数字型
进制
1 | // 1. 八进制 0 ~ 7 我们程序里面数字前面加 0 表示八进制 |
特殊值
1 | // 3. 数字型的最大值 |
isNaN()
1 | // isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true |
字符串型
字符串引号嵌套
JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)
1 | var strMsg = '我是"高帅富"程序猿'; // 可以用''包含"" |
字符串转义符
类似 HTML 里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是 \ 开头的,常用的转义符及其说明如下:
转义符 | 解释说明 |
---|---|
\n | 换行符,n 是 newline 的意思 |
\ \ | 斜杠 \ |
' | ' 单引号 |
" | " 双引号 |
\t | tab 缩进 |
\b | 空格 ,b 是 blank 的意思 |
字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
1 | var strMsg = "我是帅气多金的程序猿!"; |
字符串拼接
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
1 | //1.1 字符串 "相加" |
获取变量数据类型
- 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
1 | var num = 18; |
数据类型转换
转换为字符串
方式 | 说明 | 案例 |
---|---|---|
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 | console.log(Boolean("")); // false |
案例
1 | var 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 | var num = 10; |
后置递增运算符
num++ 后置递增,就是自加 1,类似于 num = num + 1 ,但是 num++ 写起来更简单。
使用口诀:先返回原值,后自加
1 | var num = 10; |
浮点数的精度问题
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
1 | var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004 |
所以:不要直接判断两个浮点数是否相等 !
逻辑运算符
== 和 != 比较若类型不同,先尝试转换类型(隐式转换),再作值比较,最后返回值比较结果 。
而 === 和 !== 只有在相同类型下,才会比较其值。
逻辑中断
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
逻辑与
语法: 表达式 1 && 表达式 2
如果第一个表达式的值为真,则返回表达式 2
如果第一个表达式的值为假,则返回表达式 1
1 | console.log(123 && 456); // 456 |
逻辑或
语法: 表达式 1 || 表达式 2
如果第一个表达式的值为真,则返回表达式 1
如果第一个表达式的值为假,则返回表达式 2
1 | console.log(123 || 456); // 123 |
运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算术运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
分支流程控制
if 语句
1 | // 条件成立执行代码,否则什么也不做 |
if else 语句(双分支语句)
1 | // 条件成立 执行 if 里面代码,否则执行else 里面的代码 |
if else if 语句(多分支语句)
1 | // 适合于检查多重条件。 |
三元表达式
1 | 表达式1 ? 表达式2 : 表达式3; |
执行思路
- 如果表达式 1 为 true ,则返回表达式 2 的值,如果表达式 1 为 false,则返回表达式 3 的值
- 简单理解:就类似于 if else (双分支) 的简写
switch 分支流程控制
switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。
1 | switch (表达式) { |
- 关键字 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 | for (初始化变量; 条件表达式; 操作表达式) { |
双重 for 循环语法
1 | for (外循环的初始; 外循环的条件; 外循环的操作表达式) { |
- 内层循环可以看做外层循环的循环体语句
- 内层循环执行的顺序也要遵循 for 循环的执行顺序
- 外层循环执行一次,内层循环要执行全部次数
while 循环
1 | while (条件表达式) { |
使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
do-while 循环
1 | do { |
先再执行循环体,再判断,do…while 循环语句至少会执行一次循环体代码
continue
continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。
例如,吃 5 个包子,第 3 个有虫子,就扔掉第 3 个,继续吃第 4 个第 5 个包子,其代码实现如下:
1 | for (var i = 1; i <= 5; i++) { |
运行结果如下:
break
break 关键字用于立即跳出整个循环(循环结束)。
例如,吃 5 个包子,吃到第 3 个发现里面有半个虫子,其余的不吃了,其代码实现如下:
1 | for (var i = 1; i <= 5; i++) { |
运行结果如下:
数组
JS 中创建数组有两种方式:
利用 new 创建数组
1 | var 数组名 = new Array() ; |
注意 Array () ,A 要大写
利用数组字面量创建数组
1 | //1. 使用数组字面量方式创建空的数组 |
- 数组的字面量是方括号 [ ]
- 声明数组并赋值称为数组的初始化
- 这种字面量方式也是我们以后最多使用的方式
数组元素的类型
数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。
1 | var arrStus = ["小白", 12, true, 28.9]; |
遍历数组
把数组中的每个元素从头到尾都访问一次(类似学生的点名),可以通过 for 循环索引遍历数组中的每一项
1 | var arr = ["red", "green", "blue"]; |
函数
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
声明函数
1 | // 声明函数 |
- function 是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum
调用函数
1 | // 调用函数 |
调用的时候千万不要忘记添加小括号
函数的参数
- 形参:函数定义时设置接收调用时传入
- 实参:函数调用时传入小括号内的真实数据
1 | // 带参数的函数声明 |
- 调用的时候实参值是传递给形参的
- 形参简单理解为:不用声明的变量
- 实参和形参的多个参数之间用逗号分隔
函数的返回值
return 语句
返回值:函数调用整体代表的数据;函数执行完成后可以通过 return 语句将指定数据返回 。
1 | // 声明函数 |
- 在使用 return 语句时,函数会停止执行,并返回指定的值
- 如果函数没有 return ,返回的值是 undefined
break, continue, return 的区别
- break :结束当前的循环体(如 for、while)
- continue :跳出本次循环,继续执行下次循环(如 for、while)
- return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
arguments 的使用
当不确定有多少个参数传递的时候,可以用 arguments 来获取。JavaScript 中,arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。arguments 展示形式是一个伪数组,因此可以进行遍历。
1 | // 利用函数求任意个数的最大值 |
伪数组具有以下特点:
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push , pop 等方法
在函数内部使用该对象,用此对象获取函数调用时传的实参。
函数的两种声明方式
自定义函数方式(命名函数)
1 | // 声明定义方式 |
- 因为有名字,所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
函数表达式方式(匿名函数)
1 | // 这是函数表达式写法,匿名函数后面跟分号结束 |
- 因为函数没有名字,所以也被称为匿名函数
- 这个 fn 里面存储的是一个函数
- 函数表达式方式原理跟声明变量方式是一致的
- 函数调用的代码必须写到函数体后面
综合案例-简易 atm 机
代码如下:
1 | var num = prompt("请输入您要的操作:\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出"); |