JavaScript基本介绍
1, 概念
轻量级 弱类型 解释性 脚本语言
2, 历史
ES6版本 是 JavaScript非常重要的一个历史版本
3, 作用
html --- 结构
css --- 样式
js --- 交互
和 用户操作 交互
和 后端数据 交互
avaScript基本语法形式
行内式
在标签内部直接定义js代码
实际项目中绝对禁止使用
内部式
在 script标签中 定义 js代码
外部式
在 外部js文件中 定义 js代码
通过 scirpt标签src属性 导入外部js文件
变量
1, 概念
存储在内存中的 带有名称的数据信息
其中存储的数据信息 在程序执行的过程中 是 可以改变的
2, 理解
容器
存储数据的容器
这个容器 带有名称
这个容器 是 在 内存中
这个容器 存储的数据 可以改变
3, 详细解释
在 计算机程序 中 数据是不能独立存储的
必须要有存储数据的容器
实际操作时 通过操作容器 解析其中存储的数据
再 操作这个容器中 存储的数据
在 JavaScript程序中 存储 数据的容器 称为 变量
在 html程序中 存储 容器的容器 标签name属性的属性值
4, 内存和内存特点
内存 是 计算机的硬件组成部分
特点是 临时存储数据
程序执行时数据存在
程序执行结束 数据自动 删除/释放
硬盘 u盘 移动硬盘等 是 永久存储数据
5, 变量定义声明的语法
var
JavaScript定义的关键词
作用是 告诉 JavaScript程序 我们在声明定义的是 一个 变量
var 声明的关键词 JavaScript程序会做特殊处理(预解析/预编译/预解释)
定义声明有一个变量一定要有关键词
abc
变量名称
JavaScript命名规范
规则 必须遵守
只能使用 英文 数字 下划线 $(不推荐使用)
不能 以数字开头 严格区分大小写 不能使用 保留词 关键词
规范 建议遵守
不要使用 中文特殊符号等内容 作为变量名称
当程序在服务器中运行时 一定会报错
推荐使用 小驼峰命名法
除了 首个单词之外 其他单词首字符大写
推荐定义变量名称 见名知意 --- 语义化
=
= 等号 在 计算机程序中 有 特殊意义
和 数学中 = 等号的作用不同
= 在 计算机程序中 成为 赋值符号
将 右侧 表达式的结果 赋值给 左侧变量存储
一定是 先计算 右侧表达式的结果
将 表达式的结果 赋值给左侧变量存储
100
右侧的表达式
所谓的表达式 就是 有结果的公式
可以是 计算公式 可以是 一个数据 只要有 具体的结果 具体的值 就可以
;
JavaScript代码都要以分号结束
6, 重复赋值
给 一个变量 多次赋值 后一次会覆盖前一次的赋值
JavaScript调试方式
调试方式1 弹窗
window.alert('内容') ;
alert('内容') ;
JavaScript语法规范规定
window 可以不写
调试方式2 页面
document.write('内容');
向页面输入
调试方式3 控制台
console.log('内容');
向控制台
所谓的调试方式 不是最终的执行结果
>JavaScript数据类型
数据在计算机内存中存储方式不同
按照不同的存储方式 将 数据进行 分类
不同存储方式的数据 分类不同
成为 数据的 数据类型(存储方式)
JavaScript中数据分类
基本数据类型
布尔类型
数值类型
整数类型
浮点数类型
NaN
字符串类型
null类型
undefined类型
引用数据类型 / 复杂数据类型
函数
数组
对象
布尔类型 boolean / bool
布尔类型只有两个数值
布尔类型 往往是 比较判断的执行结果
true
表示 真 / 正确
false
表示 假 / 错误
true / false 是 JavaScript中的关键词
true / false 不是 一个英文单词
对于 计算机程序来说 true / false 就是 类似于 100 50 这样的 数值数据
可以 直接赋值给变量存储
true / false 作为关键词 必须要小写
补充知识
在 html中 有一些属性 成为 布尔属性
字符串类型 string / str
一串 由 字符 数字 符号等等内容组成的数据
字符串类型的表示 必须有 定界符
定界符中定义的内容 就是 字符串的内容
定界符的分类
单引号 和 双引号
实际项目中推荐使用的定界符 执行效率更高
单引号 双引号 不能 包裹/嵌套 自身
单引号中不能有单引号
双引号中不能有双引号
单引号 双引号 中 内容不能换行
单引号 双引号 中 不支持解析变量
NaN
not a number
表达式运算结果 是 数值类型 但是 不是一个具体的数字
往往是 有 非数字 参与运算的结果
NaN 可以作为数据数值 直接赋值给变量
赋值时 一定是 严格遵守大小写
核心1
有 NaN 参与的运算结果 一定 还是 NaN
核心2
两个 NaN 比较 是不是 相等 结果是 false
数值类型 整数 integer / int
负整数 0 正整数
其他进制整数的存储语法
JavaScript中数值的存储输出 默认都是 按照 十进制数值进行的
其他进制的数值 必须要 定义 标识符
JavaScript程序才会按照 指定的进制 进行数据的存储
数值类型 浮点数 float 浮点数 就是 小数
核心问题1
有效数值
在 计算机程序中 不会允许小数的位数是 无穷多位
在 JavaScript程序中 浮点数的 有效数值 最多17位
从左起 第一个 非0的数字 开始计算有效数值的位数
也就是 所有的有效数值 最多 17个
核心问题2
溢出 / 精度丢失 / 误差
在 计算机程序中 浮点数的存储形式 是 以 近似值的形式存储数据
也就是 0.1 存储的数据是 0.100000000000001
也就是 0.2 存储的数据是 0.200000000000003
在 浮点数直接运算 或者 比较时 一定会 出现 浮点数 的 误差 / 溢出 / 精度丢失
这样的情况 在 特殊时会表现出来 打不情况 程序执行是 正确的
实际项目中 在 VUE等框架语法中 有 浮点数 专门的运算方法 防止出现 误差/溢出/精度丢失
核心问题3
科学计数法
是 数值的一种 表现实行 表示语法
数e数
2e3 2乘以10的3次方 结果是 2000
2e-3 2乘以10的-3次方 也就是 2除以10的3次方 结果是 0.002
科学技术法 是作为一个整体表达式 运行的
单独拿出其中的某一个部分 没有任何意义
科学计数法表达式的一切数值 都是 浮点数类型
2e3 表示的数值 是 2000
本质上是 浮点数类型
null 和 undefined
null 表示 空值
是 正确赋值 但是 赋值的数据 是一个 '空' 值
undefined 表示 应该赋值 没有正确赋值
在 定义变量时 应该给变量赋值存储的数据
如果 只是定义变量 没有赋值存储的数据
JavaScript程序 会给没有赋值数据的变量 存储 undefined 数据
null
是 正确赋值 赋值的是 '空'
undefined
是 应该赋值 没有赋值
null 和 undefined 都可以作为数值 直接赋值给变量
必须都是 小写字符
JavaScript单引号 双引号
*1, 不能 包裹 / 嵌套自身*
符号的配对原则 执行的是 就近原则
如果 一定要在 单引号 双引号 中 嵌套自身
必须要使用 JavaScript 转义符
避免 符号之间的冲突
JavaScript转义符
作用目的 和 html的 字符实体 是 一样的效果
都是为了 避免 符号冲突
常见的转义符
\' --- '
\" --- "
\\ --- \
\n --- 换行
*2, 不能换行*
*3, 单引号 双引号中 不能 解析变量*
单引号 双引号中 定义的变量
执行效果就是 变量名称本身
不是 变量中 存储的数据数值
单引号 双引号 中 如果一定要解析变量
必须要使用 字符串拼接 语法
将 字符串 和 变量 使用 + 加号 拼接
JavaScript程序 会 解析 变量中存储的数据
使用 变量中存储的数据 和 字符串 一起 拼接
生成 新的 字符串内容
*4, 字符串内容是 JavaScript程序*
如果字符串内容是 JavaScript程序
直接定义在字符串中 不会按照JavaScript程序执行
对于 单引号 双引号 来说 只是 字符内容 不是 js程序
使用 eval() 来 执行字符串
会 按照 字符串内容的 js程序功能 来运行执行
*5, 反引号 ``*
是 ES6 新增的语法形式
反引号语法 又称为 模板字符串
内容中 支持 换行 支持 解析变量
如果没有变量需要解析 推荐使用 单引号双引号 执行效率更高
反引号中 使用 ${} 包裹变量 可以解析变量
模板字符串 使用 ${} 还可以 运算 JavaScript表达式
数据类型的检测
typeof( 变量 )
typeof 变量
查看变量中存储数据的数据类型 输出 数据类型结果
! typeof语法 不能 完全准确的判断数据的数据类型
! 在JavaScript中 NaN 整数 浮点数 数据类型结果是相同的
isNaN()
判断 数据 是不是 NaN
如果是 NaN 返回值 是 true
如果不是 NaN 返回值 是 false
isNaN() 的 补充说明
isNaN() 的 执行原理
判断 输入数据的数据类型
如果是 数值类型 直接 判断 输入的数据 是不是 NaN
如果不是 数值类型 会 先自动转化为 数值类型 再判断 是不是 NaN
数据类型的转化
原理
JavaScript是 一门 弱类型计算机语言
所谓的 弱类型计算机语言 指的是 JavaScript这门语言 语法结构比较松散
不如 强类型的计算机语言 语法结构严谨
方式
自动转化 / 隐式转化
程序执行时 自动完成的数据类型转化
强制转化
程序员人为完成的数据类型转化
关键点
! 什么时候转化
! 转化原则
自动转化为布尔类型
1, 什么时候转化
if()语句 逻辑运算符 三元运算符
2, 转化原则
false
0 0.0000 '' null undefined NaN
true
其他所有情况都是转化为 true
强制转化为布尔类型
Boolean( 变量 / 表达式 );
将 变量 / 表达式 的数据 转化为 布尔类型
转化原则和自动转化完全相同
false
0 0.000 NaN '' null undefined
true
其他情况都转化为 true
! 不会改变变量中存储的原始数值
如果需要改变 变量中存储的数据
一定要 将 执行结果 赋值给变量
强制转化为字符串类型
String( 变量 / 表达式 );
转化原则和自动转化相同
不会改变变量中存储的原始数据
变量.toString();
转化原则和自动转化相同
不会改变变量中存储的原始数据
! 只能对变量使用 不能直接对表达式使用
! 如果变量储存的是整数 可以定义进制
! 如果变量储存的是 null 或者 undefined 不支持 toString() 语法
强制转化为数值类型
Number()
强制转化为数值类型
转化原则和自动转化完全相同
1
true
0
false null '' ' '
对应的数字
字符串内容符合数字语法规范
NaN
undefined 字符串内容不符合数字语法规范
parseInt()
获取 数据的整数部分
从左起 获取符合 整数 语法规范的内容
直到内容不符合 整数 语法规范
如果左起第一个内容就不服和 整数 的语法规范
获取结果是 NaN
parseFloat()
获取 数据的浮点数部分
从左起 获取符合 浮点数 语法规范的内容
直到内容不符合 浮点数 语法规范
如果左起第一个内容就不服和 浮点数 的语法规范
获取结果是 NaN
! parseInt() 不能识别 科学技术法
对于 字符串内容是 科学技术法
获取的结果是 e之前 数值的整数部分
! parseFloat() 可以识别 科学技术法
对于 字符串内容是 科学技术法
获取的结果是 按照 字符串内容的科学计数法表示的数值 获取浮点数部分
JavaScript 运算符
运算符 就是 JavaScript程序中 带有特殊功能的符号
分类
字符串拼接运算符
+
符号两侧有字符串参与运算 执行 字符串拼接操作
算数运算符
+ - * / %
赋值运算符
= += -= *= /= %=
比较运算符
> < >= <= == === != !==
自增自减运算符
++ --
逻辑运算符
&& || !
三元运算符
表达式 ? 程序1 : 程序2 ;
表达式 结果是 true 执行 程序1
表达式 结果是 false 执行 程序2
执行逻辑和 简单的 if语句 完全相同
使用方法非常灵活 实际项目中会经常使用
var 变量 = 表达式 ? 数值1 : 数值2 ;
当 表达式 结果是 true 给变量赋值 数值1
当 表达式 结果是 false 给变量赋值 数值2
if语句
语法形式1
if( 表达式 ){
程序
}
表达式结果是 true 执行程序
表达式结果是 false 没有执行内容
语法形式1的简写形式
if( 表达式 ) 程序
如果代码只有一行 可以不写 { }
语法形式2
if( 表达式 ){
程序1
}else{
程序2
}
表达式结果是 true 执行 程序1
表达式结果是 false 执行 程序2
语法形式3
if( 表达式1 ){
程序1
}else if( 表达式2 ){
程序2
}else if( 表达式3 ){
程序3
}else if( 表达式4 ){
程序4
}....
从 一个表达式开始判断
那个表达式结果是true 就执行 那个表达式对应的程序
并且 终止 之后表达式的判断
如果 所有表达式结果都是false
没有执行的程序
语法形式4
if( 表达式1 ){
程序1
}else if( 表达式2 ){
程序2
}else if( 表达式3 ){
程序3
}else if( 表达式4 ){
程序4
}else{
程序
}
switch语法
switch( 变量 ){
case 数值1:
程序1;
break;
case 数值2:
程序2;
break;
case 数值3:
程序3;
break;
case 数值4:
程序4;
break;
.....
default:
程序 ;
}
switch 和 if语句的 的区别
如果 是 执行 范围等 其他条件的判断
必须使用 if语句执行
如果 执行的是 === 全等判断
if语句 和 switch 都可以实现
switch语句的执行效率更高
**循环语句 **
按照设定的循环条件 循环往复执行程序
除非遇到终止条件
常见的循环语句
while
do...while
for
for...in
for...of
forEach
循环变量的初始化
定义一个变量 并且赋值 初始值
这个变量 往往会决定循环的次数 称为 循环变量
但是 不是 所有的循环 都是循环遍历决定的
! 循环变量的初始化 在这个 循环过程中 只会触发执行一次
判断进入循环的条件
表达式 结果 如果是 true 进入循环 执行 循环体 步长
表达式 结果 如果是 false 终止循环 执行 循环之后的程序
! 如果 表达式的结果 一直是 true 循环会 一直触发执行 称为 死循环
循环体
每次循环都会触发执行的程序
也就是 { } 中 所有的程序代码
步长
每次循环 循环变量改变的数值
步长 往往是 向着终止循环的方向改变
可以是 ++ -- += -= 等等 操作方式
! 循环没有执行结束 循环之后的程序 不会触发执行
函数
计算机程序中的函数 和 数学中的函数没有任何关系
所谓的函数定义是
实现 固定功能或者效果的 代码块
理解函数
1, 将所有需要执行的程序代码 封装定义在 一个函数程序中
封装一次 可以 反复调用使用
2, 封装一次 反复调用
减少冗余代码,优化代码程序,提高执行效率。
3, 可操作性和可维护性更高
函数的基本语法
1, 声明式函数
function 函数名称( 形参1 , 形参2 ... ){
函数程序代码
return 执行结果 / 返回值 ;
}
2, 赋值式函数 / 匿名函数
var 变量 = function ( 形参1 , 形参2 ... ){
函数程序代码
return 执行结果 / 返回值 ;
}
function 是 声明函数的关键词 告诉 JavaScript程序 我们正在声明定义 一个 函数
fuction1 是 函数名称 遵守 JavaScript 命名规范
! 函数名称的命名 一定要使用 小驼峰命名法
() 是 函数声明固定的语法规范
在 () 中 定义 函数的 形参
{} 是 函数声明固定的语法规范
在 {} 中 定义 函数的 执行程序 和 return 返回值
函数中的参数
1, 概念
程序员 和 函数程序 交流沟通的方式方法
2, 理解
在 函数 封装时 在 () 中 定义 形参
形参的本质 就是 定义在函数内部的 专属专有 的 变量
定义形参时 不定义 var 关键词
只需要定义 形参的名称
JavaScript程序执行函数时 自动按照设定的名称 声明定义变量
在 封装函数时 定义 形参
可以不给形参赋值数据
在 封装函数是 定义 形参
也可以 赋值存储的数据
调用函数时 如果没有赋值实参 形参存储的是 默认赋值的数据
调用函数是 如果赋值实参 执行效果是重复赋值效果
实现数据 会覆盖 定义形参时 赋值的数据
! 形参定义时要不是要赋值 要赋值什么数据 根据实际需求设定
在 函数 调用时 在 () 中 定义 实参
实参 是 按照顺序 一一对应的 给 形参 赋值 实际数据
调用函数程序时 按照 输入的实参 来 调用执行程序
3, 核心
输入什么数据 函数就按照什么数据去执行程序
参数需要尽可能多的兼容各种输入的情况
形参 是 封装函数时 定义的 函数专属的变量
怎么理解 所谓的专属 我们 后面会详细讲
实参 是 函数调用时 输入的 实际数据
按照顺序 一一对应的 给 形参赋值
函数的返回值 return
所谓的函数的 执行结果 返回值
函数是一个封装定义的代码块
函数中定义的变量数据 都是封装在 这个代码块中
外部程序 不能 直接调用 函数中封装的变量等数据
return
通过 return 定义 函数的执行结果 返回值
也就是 通过 return 定义 一个 数据
将 这个数据 抛出 函数之外
在 函数之外 可以 任意的操作使用
! return 的作用
1, 定义函数的执行结果返回值
2, 终止函数中 return 之后一切程序的执行
3, 不管任何函数没有设定 return 执行结果返回值 一律是 undefined
JavaScript中数据的存储原理
在计算机程序中 根据 不同数据存储方式 将 数据进行数据分类
基本数据类型
布尔 数字 字符串 null undefined
引用数据类型
函数 数组 对象
数据的存储原理
栈
存储 基本数据类型 的 存储空间
数据是 有序存储
先定义的变量 存储在 栈的下方
后定义的变量 存储在 栈的上方
栈 中 直接存储变量 变量中直接存储数据
堆
存储 引用数据类型 的 存储空间
数据是 无序存储
堆 中 开辟独立的存储空间 准备存储 引用数据类型
操作系统给 独立的存储空间 定义 内存地址(编号)
每一个 存储空间 内存地址 都是 唯一的 不重复的
引用数据类型的程序 或者 数据 存储到 独立的存储空间中
引用数据类型的 变量/函数民称 存储在 栈中
变量/函数名称 中存储的是 引用数据类型的 内存地址
调用执行 引用数据类型时
通过 内存地址 找到对应的存储空间
调用 其中 存储的数据 / 程序代码
基本数据类型比较判断的是 变量中 存储的 数据数值
| 标题 | |
|---|---|
引用数据类型比较判断的是 变量中 存储的 内存地址
两个引用数据类型 比较判断的结果一定是 false
声明式函数 将内层地址 赋值给 函数名称 存储
赋值式函数 没有函数名称 将 内存地址 赋值给 变量 理论
JavaScript变量的作用域
所谓的变量的作用域 就是 变量的有效范围
也就是 变量 在 什么范围 可以调用 可以执行
JavaScript中按照作用域 给 变量分类
全局变量
定义在 函数外的变量 称为 全局变量
在 函数内 也可以调用
局部变量 / 私有变量
定义在 函数内的变量 / 形参 称为 局部变量
只能在 函数内部 调用执行
不能在 函数外部 直接调用
