ECMAScript 是一种脚本语言的标准规范,它是 JavaScript 语言的基础。
一、JS的引用
1. 内嵌引用:将 JavaScript 代码直接写在 HTML 文件的 <script>
标签内部。
2. 外部引用:将 JavaScript 代码写在单独的 .js
文件中,然后在 HTML 文件中使用 <script>
标签引入。
二、ECMAScript基础
(一)排查代码异常
1. 利用 console 对象
console.log():在控制台输出日志信息,用于查看变量值和调试程序运行情况。
2. 利用 debugger 打断点
在代码中添加 debugger 语句,在代码执行到此处时会触发浏览器的调试器。
3. 利用 document 页面输出
使用 document.write() 可以在 HTML 页面上输出内容,用于显示变量值或其他调试信息。
4. 利用弹窗提示变量
使用 alert() 函数可以弹出警告框,显示变量值或错误信息。
(二)数据及数据类型
1. 数据
数据是指浏览器和设备可以识别的内容。
2. 数据类型
在JS中,数据类型包括基本数据类型和引用数据类型。
2.1 基本数据类型
Number:包括整数和浮点数。如:0~9的组成数字和浮点数。
String:字符串。如:'abc'、'a12'、'a_bc'等,带有引号的是字符串。
Boolean:布尔值。如:true、false。
Null:空值。表示不需要有值。
Undefined:未定义。表示缺少值。
Symbol:ES6 引入的唯一且不可变的数据类型
2.2 引用数据类型
Object:包括普通对象、数组、函数等。使用 {} 字面量语法创建的对象。包含任意数量的键值对属性。
Array:数组对象。使用 [] 字面量语法创建的对象。按索引存储有序的数据集合。
Function:函数对象。使用 function 关键字创建的对象。包含可执行的代码块,可以接受参数并返回值。
Date:日期对象。使用 new Date() 创建的对象。用于表示日期和时间。
RegExp:正则表达式对象。使用 /pattern/ 字面量或 new RegExp() 创建的对象。用于模式匹配和文本处理。
2.3 数据类型的特点
(1) 基本数据类型是按值访问的,引用数据类型是按引用访问的。
(2) 基本数据类型的比较是值的比较,引用数据类型的比较是引用的比较。
(3) 基本数据类型是不可变的,引用数据类型是可变的。
(4)基本数据类型存储的是值本身,而引用数据类型存储的是指向对象的引用。
3. typeof 语句
typeof
会返回一个字符串,表示该表达式的数据类型。
4. 变量
变量可以存储各种类型的数据,如数字、字符串、布尔值、对象等。变量需要先声明后使用。用 var 进行声明,用 “=” 进行赋值。
4.1 变量的命名规范
(1)不能使用关键字、保留字,如:in、for、if 等,具体参考:JavaScript 保留关键字 | 菜鸟教程
(2)可以使用英文词汇、或者拼音命名,如:user、age、xiaoming
(3)可以使用驼峰命名,如:loginButton
(4)可以使用下划线,如:login_button
(5)不能使用特殊符号,除了 $ 和 _
(6)可以使用中文,但是不建议使用
5. 数据类型转化
5.1 显式转化
5.1.1 转为字符串
使用String(value)函数。
使用value.toString()方法,其还可以进行进制转换
5.1.2 转为数字
Number(value)函数
parseInt(value) 函数,用于将字符串转换为整数
parseFloat(value) 函数,用于将字符串转换为浮点数
5.1.3 转为布尔值
使用Boolean(value)函数,0、" "、undefined等于false
5.2 隐式转化
5.2.1 算术运算符
当运算符两侧的操作数类型不同时,JavaScript 会自动将其中一个或两个操作数转换。
“+” 这个加号运算符,有加法运算和字符串拼接的作用
“-” 这个减号运算符,有减法运算和转数字的作用
5.2.2 关系运算符
当比较运算符的两个操作数类型不同时,JavaScript 会自动将其转换为数字类型进行比较。
5.2.3 逻辑运算符
在逻辑运算中,JavaScript 会将操作数转换为布尔值后再进行运算。
5.2.4 相等运算符
在使用 == 进行比较时,JavaScript 会自动进行类型转换,以确保两个操作数的类型一致。
5.2.5 条件语句
在条件语句中,JavaScript 会将操作数转换为布尔值后再进行判断。
(三) 运算符
用于对变量或值进行各种操作。
1. 算术运算符
+ :加法、- :减法、* :乘法、/ :除法、% :取余、++ :自增、-- : 自减
2. 比较运算符
==:等于(比较值)、!=:不等于(比较值)、===: 全等于(比较值和类型)、!==:不全等于(比较值和类型)、>:大于、<:小于、>=:大于等于、<=: 小于等于
3. 逻辑运算符
&&: 逻辑与:表示条件两个或者以上,只要有一个条件不成立(是假),结果就不成立(是假)。
||:逻辑或:表示条件两个或者以上,只要有一个条件成立(真的),结果就成立(是真)。
!: 逻辑非:取相反的值
(四)常用语句
1. 三元运算表达式
三元运算符是一种条件表达式,它提供了一种简洁的方式来根据条件选择值。
条件是否成立 ? 执行代码1 : 执行代码2,条件成立执行代码1,不成立执行代码2。
2. 判断语句
if
语句、if-else
语句、if-else if-else if-else
语句
3. 控制流语句
switch(变量) { case 分支1: 执行代码1; break; case 分支2: 执行代码2; break;...}
4. 循环语句
4.1 for () {} 语句
for(代码1;代码2;代码3){循环体}:先执行代码1,代码2,进入循环体,走出循环,最后执行代码3
4.2 while () {} 语句
while(判断条件){}
4.3 do {} while () 语句
4.4 for in 语句
4.5 for of 语句
(五)日期对象和数学对象
1. 日期对象
日期对象 (Date) 是用来处理日期和时间的一个重要数据类型。它提供了一系列的方法和属性,可以对日期和时间进行各种操作。通过 “new Date()” 创建当前时间的日期实列对象,通过 “实列对象.方法” 获取有关时间的信息。可以获取年份,月份,日期,小时,分钟,毫秒,时间戳。
1.1 创建日期实列
1.2 获取年份
1.3 获取月份
1.4 获取日期
1.5 获取小时
1.6 获取分钟
1.7 获取秒钟
1.8 获取毫秒
1.9 获取时间戳
时间戳指从1970-01-01 00:00:00开始到现在的总毫秒值
1.10 获取星期
1.11 设置日期和时间
setFullYear(年, 月, 日):设置年、月、日
setMonth(月):设置月份 (0-11)
setDate(日):设置日期 (1-31)
setHours(时, 分, 秒, 毫秒):设置时、分、秒、毫秒
2. 数学对象
2.1 常量
Math.PI:圆周率 (约等于 3.14159)
Math.E:自然对数的底数 (约等于 2.71828)
Math.LN2:2 的自然对数 (约等于 0.69315)
Math.LN10:10 的自然对数 (约等于 2.30259)
Math.LOG2E:以 2 为底 e 的对数 (约等于 1.44269)
Math.LOG10E:以 10 为底 e 的对数 (约等于 0.43429)
![](https://i-blog.csdnimg.cn/direct/f154b6a878014e9782abe0c606de5169.png)
2.2 基本数学运算
Math.abs(x):返回数字 x 的绝对值
Math.max(x1, x2, ...):返回一组数字中的最大值
Math.min(x1, x2, ...):返回一组数字中的最小值
Math.pow(x, y):返回 x 的 y 次幂
Math.sqrt(x):返回数字 x 的平方根
![](https://i-blog.csdnimg.cn/direct/75d56992fb664f3aaa7c149a776bb8ff.png)
2.3 三角函数
Math.sin(x)、Math.cos(x)、Math.tan(x):返回指定弧度的正弦、余弦、正切值,弧度 = 角度* Math.PI / 180
Math.asin(x)、Math.acos(x)、Math.atan(x):返回指定值的反正弦、反余弦、反正切值
Math.atan2(y, x):返回从原点到点 (x,y) 的角度 (弧度)
![](https://i-blog.csdnimg.cn/direct/41b7238fcda540b39cf24715708e8857.png)
2.4 随机数
Math.random():返回 [0, 1) 之间的随机数
Math.random() * (最大值-最小值) +最小值) [最小值,最大值]之间随机小数
2.5 舍入函数
Math.ceil(x):向上舍入为最接近的整数
Math.floor(x):向下舍入为最接近的整数
Math.round(x):四舍五入为最接近的整数