本文详细介绍了JavaScript的基础知识，包括变量、数据类型、运算符、流程控制语句、数组、函数、作用域、this关键字等内容。重点讲解了JavaScript的三大流程控制结构，包括选择结构、循环结构，并探讨了变量的声明、数据类型的转换以及this的劫持。此外，还涉及到了数组的常见操作、事件的绑定与执行机制，以及原型链和super关键字的使用。
目录
目录
一.初识JavaScript
二.变量
三.数据类型
四.运算符
五.流程控制结构
一.1.什么是JavaScript
JavaScript是世界上·最流行的语言之一，是一种运行在客户端的脚本名语言
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行进行解释并执行
2.js的组成
js由ECMAScript（JavaScript语法）、DOM（页面文档对象模型)、BOM（浏览器对象模型）组成
3.js三种书写位置
内嵌式、行内式、外联式
行内式js
<input type="button" value="点我试试" onclick="alert('hello world')"/>内嵌式js
<script>
alert('hello world')
</script>外联式js的特点
- 利于HTML页面代码结构化，把大段js代码独立在HTML页面外部，既美观又方便文件级别的复用
- 引用外部js文件的script标签中间不可以写代码
- 适合于js代码量比较大的情况
<script src="my.js"></script>4.js的注释
单行注释（快捷键：ctrl+/）和多行注释（快捷键：alt+shift+A）
5.js输入输出语句
alert：浏览器弹出警示框
alert('抱歉，您未满十八')console.log：浏览器控制台打印输出信息
console.log('hello world')prompt:浏览器弹出输入框，用户可以输入
prompt('请输入您的年龄：')二.1.什么是变量
变量就是用于存放数据的容器，我们通过变量名获取数据，甚至数据的修改
本质：变量是程序在内存中申请的一块用来存放数据的空间
2.变量使用
1.申明变量（var let const）
var 1.声明变量的同时赋值,变量的初始化 2.同时声明多个变量 多个变量之间用逗号分隔 3.可以重复声明相同的变量
let 1.变量的初始化 2. 同时声明多个变量 多个变量之间用逗号分隔3.不能在同一作用域重复声明相同的变量
const 1.是用于声明常量 2.const声明的常量变量,是不允许修改的 3.在同一作用域下不允许声明相同的变量 // 常量:就表示该变量中保存的数据不允许更改!
// js在ES6之前,变量的声明只能通过 var关键字进行声明
// js在ES6之后可以采用 let 或者 const 关键字进行变量的声明
2.赋值
3.变量（标识符）的命名规范
标识符命名规范:
1.标识符只能由字母 数字 下划线 以及$符号组成
2.标识符不能以数字进行开头
3.标识符严格区分大小写
4.不能采用关键字或者保留字进行标识符的定义
// -- 关键字:js语法规范中,提前规定好了一些单词!并且js也赋予其特殊的含有!这些单词称为关键字! 比如 if else break for var let const.....
// -- 保留字:js语法规范中,以前收录了一些单词!但目前这些单词未真正的投入使用,测试阶段!并没有任何的含义! 这些单词称为保留字
5.标识符如果由多个单词构成!应遵循 '小驼峰命名法' : blackcolor ==> blackColor
6.标识符的命名应该遵循 '见名知义' : name ,age ,sex 不要取这些名字: a1 b2 abc ......
三.1.数据类型分类
1.数据按照参数的传递方式，可以分为 `值传递类型` 和 `引用传递类型`
## 值类型
- Boolean 布尔型：表示事物的两种状态， 真（true） 和 假（false）
- Number 数字型：包括整型值和浮点型值，如3.14、100、-12等
- String 字符串：使用单引号'' 或者 "" 或者 `` 包裹起来的字符串 字符串类型，js中没有字符类型
- BigInt 长整数：长整型,用于表示超出基本number能表示的数值范围！ 通常用于描述巨大的值
## 引用类型
- Object 对象类型
- Symbol 符号类型 是为了解决花括号对象中，属性同名的问题！
// 因为symbol所表示的值是唯一的！不可能出现相同的情况！
- null 空引用 特殊的一种引用类型 是 js 的一个原始数据类型，用来指代引用类型数据的空值
null是一个特殊的Object对象类型 typeof检测的返回值是 Object
// null类型通常用于指向一个不存在的对象空间！ 表示为'空'
// 切断变量的引用链！释放空间，也可以使用null
## undefined 未定义
undefined 是一个单独的类型，用于给已经定义的变量未设置的初始值
2. 值类型和引用类型数据的区别
值类型：变量中直接存贮值本身
引用类型：变量中存储的是引用地址，而值是存在引用地址所指向的内存中的某个对应位置
3. 注意： ''和"" 符号所表示的字符串本质上没有任何的区别，只是书写形式不同，但是应该注意配对原则， `` 该符号所表示的内容其数据格式也是为 字符串类型，不同之处在于两点
// 1. 该方式允许跨行书写
// 2. 该方式支持变量嵌套 语法 ${标识符名} ，如${name}
var name = '小米'
var age = 20
// 需求： 你好，我是张三，今年18岁了！......
console.log('你好,我是' + name + '今年' + age + '岁了!')
// `` 变量嵌套的语法 ${标识符名}
console.log(`你好,我是${name},今年${age}岁了!`)2.检测数据类型
利用js所提供一个运算符 typeof 类型检测
// 语法： typeof 数据 // typeof 的返回值是字符串类型！
<script>
var res1 = typeof 100
var res2 = typeof 'hello world!'
var res3 = typeof {}
var res4 = typeof true
// res1 res2 res3 res4 所存储的数据是什么类型？字符串、
console.log(typeof res1,typeof res2,typeof res3 , typeof res4)
</script>3.json对象的序列化和反序列化
序列化：将一个合法的json对象，转换为一段标准的json格式的数据！格式 JSON.stringify(arg) arg==> json对象 json 对象主要用于存储数据，有着简洁的数据结构，json 对象常用于网络信息传输中，传递数据
let obj = {
name: '张三',
age: 18,
a: [1, 2, 3],
b: {
x: 100,
y: 100,
},
}
// console.log(obj,typeof obj)
// 对obj对象进行序列化操作
var res = JSON.stringify(obj)
console.log(res, typeof res)反序列化：将一段标准的json格式的数据，字符串转化为一个合法的json对象！ 格式： JSON.parse(arg) arg ==> json数据 json数据的作用是方便数据的传输！json数据是一种轻量的js数据格式！
let obj = {
name: '张三',
age: 18,
a: [1, 2, 3],
b: {
x: 100,
y: 100,
},
}
// 反序列化 利用js提供的JSON对
var res = JSON.stringify(obj)
var newobj = JSON.parse(res)
console.log(newobj, typeof newobj)
console.log(newobj.name, newobj.age)
newobj.age = 204.数据类型的转换
1.数据的类型转换：将某个数据的类型通过某种方式转换为另一种数据类型！
通过方式不同可以分为：强制转换、隐式转换
// 强制转换：人为的通过手段去改变一个数据的类型
// 隐式转换：没有人为的参与，是程序解析自动进行转换
2.Number()函数可以强制转换其他数据为Number类型外，还有两种手段
// 全局函数： parseInt() parseFloat（）
// parseInt() 将其他数据类型转换为number的整数值
// parseFloat() 将其他数据类型转换为number的浮点数
//String ==》 Number
console.log(Number('123a'), typeof Number('123a')) // NaN
//Null ==> Number
console.log(Number(null), typeof Number(null)) // 0
// Undefined ==》 Number
console.log(Number(undefined), typeof Number(undefined)) // NaN
// Symbol ==> Number
console.log(Number(Symbol('100')), typeof Number(Symbol('100'))) // 无法转换
// Object ==> Number
console.log(Number({}), typeof Number({})) // NaN3.总结：js中的假值，假值就是通过强制转换或者隐式转换该数据为布尔类型后，其结果为false的数据称为假值！ js中的假值： false 、 0 、 -0 、 +0 、 null 、 undefined 、 ''
四.运算符分类
1.运算符分类
- 算术运算符 ： + 、 - 、 * 、 / 、%（模运算，取余）、**(幂运算)
- 赋值运算符：'='是赋值运算！运算流程： 将赋值运算符的右侧表达式的结果，赋值给左边的变量 赋值运算符可以改变变量或者对象属性的具体值！
复合赋值运算符： 是赋值运算符 与 算数运算符的结合书写+= 、 -= 、 /= 、 %= 、 **= 、*=
- 比较运算符： > 、< 、 >= 、<=、 ==、 ===、 != 、!== 结果为布尔值!true 或 false
- 逻辑运算符 ： &&(与) ||(或) !(非，取反)
注意：js中的逻辑与和逻辑或都是属于短路与，短路或！
短路与的运算特点：在运算时，从左往右计算，如果碰到其中一个表达式的值为，false，那么后续的表达式将不再进行计算！并且返回当前表达式的原始值作为整个与运算的结果！
// 如果从左往右计算，都没有遇到false，那么将最后一个表达式的原始值作为整个与运算的结果！
短路或的运算特点：在运算时，从左往右计算，如果碰到其中一个表达式的值为，true，那么后续的表达式将不再进行计算！并且返回当前表达式的原始值作为整个或运算的结果！
// 如果从左往右计算，都没有遇到true，那么将最后一个表达式的原始值作为整个或运算的结果！
- 三元运算符
// 语法规则： 表达式?结果1:结果2
// 运算流程： 计算表达式结果，如果表达式为真，则将结果1的数据进行返回，否则返回结果2的数据
let res = 100 < 50 ? 100 : 200
let num = false ? 10 + 1 : 20 + 1
console.log(num)- 单目运算符 ：！ 、 typeof ...
2.运算符的优先等级
| 优先等级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++ -- ！ |
| 3 | 算数运算符 | 先*/%后+- |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !=== |
| 6 | 逻辑运算符 | 先&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
五.流程控制语句
1.流程控制语句的概述和作用
流程控制语句: js的代码如果没有人为的干预,那么js的执行顺序为从上往下,顺序执行!
作用:流程控制语句后,可以对js的代码执行顺序进行干预,完成更复杂的程序逻辑!
2. js中的三大流程控制结构:
顺序结构 选择结构 循环结构
1.顺序结构: 整体代码的解析执行是按照从上往下!的规律进行执行!也是最基础的控制结构
2.选择结构: 为代码的执行提供可能的路径!影响代码的走向!
3.循环结构: 重复的执行某一段代码
最低0.47元/天 解锁文章
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
