目录
JavaScript
三种使用方式
- 在浏览器控制台上直接运行js语言片段
- 在html文件的script标签中
- 使用.js文件书写js代码,然后在html中通过script标签引入代码
方式2常见的位置如下:
- head标签中
- body标签的末尾
- html标签中,与body标签同级(推荐使用)
三种声明变量
关键字 | 说明 |
---|---|
var | 可以重复声明相同的变量 |
let | 不能在同一作用域重复声明相同变量 |
const | 不能在同一作用域重复声明相同变量 |
js中的标识符命名规范
- 标识符只能由字母、数字、下画线、以及$符号组成
- 标识符不能以数字进行开头
- 标识符严格区分大小写
- 不能采用关键字或者保留字进行标识符的定义
- 标识符如果由多个单词构成,应遵循‘小驼峰命名法’
- 标识符的命名应遵循‘见名知意’
数据类型
- 原始数据类型7种
- undefined
- Boolean
- Number
- String
- BigInt
- Symbol
- null
- 对象类型
- Object
口诀:四基(Number、String、Boolean、BigInt)两空(undefined、null)双一(一个符号Symbol、一个对象Object)
查看数据类型使用typeof
JSON对象
json对象(花括号对象)
序列化
var res = JSON.stringify(obj)
console.log(res, typeof res)
反序列化
var newobj = JSON.parse(res)
console.log(newobj, typeof newobj)
数据类型的转换
数据类型的转换可分为强制转换和隐式转换两种。
强制转换:人为的通过手段去改变一个数据的类型
隐式转换:没有人为的参与,是程序解析自动进行转换
函数 | 说明 |
---|---|
Number() | 将其他数据类型强制转换为Number数据类型 |
parseInt() | 将其他数据类型强制转换为Number数据类型 |
parseFloat() | 将其他数据类型强制转换为Number整数值 |
parseFloat() | 将其他数据类型转换为Number的浮点数 |
String() | 将其他数据类型强制转换为字符串类型 |
Boolean() | 将其他数据类型强制转换为布尔类型 |
运算符
js中运算符分类:
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 三元运算符
- 单目运算符
弹窗
alert():弹窗提示
confirm():确认模态,具备返回值
prompt():输入模态
获取文档元素
- doucument.querySelector():返回值是符合css选择器下的第一个页面元素对象
- document.querySelectorAll():返回值是符合css选择器所有页面元素对象,不管元素有多少个始终以NodeList伪数组的形式返回
- document.getElementById():通过元素的id属性值进行获取
- document.getElementsByClassName():通过元素的class属性值进行获取!以HTMLCollection伪数组形式返回
- document.getElementsByTagName():通过元素的标签名进行获取
元素对象的标签体属性
- innerHTML:用于更改元素的标签体的内容,合法的字符会被浏览器自动解析为标签!
- innerText:用于更改元素的文本信息,该文本信息是不会被浏览器当作标签来正常解析的
数组
数组:是存储一组数据的一个容器,属于Object类型。
1.两种创建方式
方式一
let arr = ['a', true, 1]
方式二
let arr = new Array('a', true, 1)
2.获取数组中元素的值,利用元素的下标
arr[下标]
判断是否是数组
通过Array的静态方法isArray()进行判断,返回true或false
let arr = []
console.log(Array.isArray(arr))
数组的常见操作
let arr = [100, 200, 300, 'hello', true]
方法 | 说明 |
---|---|
length | 返回当前数组长度 |
push() | 添加元素到数组的末尾 |
pop() | 删除数组末尾元素,返回值是移除的末尾元素 |
unshift() | 添加元素到数组的头部 |
shift() | 删除数组头部的元素,返回值是被删除的元素 |
splice() | 在数组的任意位置实现元素的添加、删除、修改 |
concat() | 连接多个数组,并返回连接后的新数组,没有操作元素组 |
join() | 将数组中的个元素分散通过指定的字符进行连接,返回一个字符串数据 |
includes() | 判断一个元素是否存在于当前数据中,返回true或false |
indexOf() | 从左往右判断元素是否存在,返回下标或-1 |
lastindexOf() | 从右向左判断元素是否存在,返回下标或-1 |
slice() | 数组切片,获取数组的子数组,slice(开始下标,结束下标) ,左闭右开的区间 |
splice(x,y,args…)
- x : 确定在数组的那个位置进行操作
- y : 是确实从对应位置开始删除的元素个数
- args: 用于更新的新元素列表
splice举例
// 需求,我想在1索引的位置,删除2个元素,并用 新的元素进行替换
arr.splice(1, 2, 'x', 'y', 'z')
// 需求,我想在2索引的位置,删除1个元素,没有新元素替换
arr.splice(2, 1)
// 需求,我想替换索引3位置元素的值,更新
arr.splice(3, 1, 'world!')
// 需求,我想在索引0的位置,添加两个新元素
let res = arr.splice(0, 0, 'x', 'y', 'z')
利用concat方法实现数组浅拷贝
let arr3 = arr1.concat([])
对数组进行去重操作
方式一
//利用空数组
let arr2 = []
for (let i = 0; i < arr.length; i++) {
if (!arr2.includes(arr[i])) {
arr2.push(arr[i])
}
}
方式二
//利用 lastindexOf() splice()
let index
for (let i = 0; i < arr.length; i++) {
index = arr.lastIndexOf(arr[i]) //index = 3
while (index != i) {
arr.splice(index, 1)
index = arr.lastIndexOf(arr[i])
}
}
获取页面元素的样式属性值
- e利用element.style 获取元素的样式对象
- 利用全局函数 getComputedStyle(element)
两者的区别:
- style属性的方式只能去获取元素自身的style属性所设置的样式值
- getComputedStyle(element) 获取元素正在应用的样式属性值
- style属性是可读可写,而getComputedStyle(element是只读的不能重新赋值
操作节点
创建节点
let mydiv = document.createElement('div')
添加节点
// 在挂载前 初始化 元素节点
mydiv.id = 'div01'
mydiv.className = 'box'
mydiv.innerHTML = '我是div元素'
挂载节点
方式一:appendChild(element)
document.body.appendChild(mydiv)
方式二:insertBefore(新节点元素,旧节点元素)
// 如果insertBefore的第二个参数为 null 则将新元素节点添加到该父节点的末尾 等价于 appendChild
document.body.insertBefore(mydiv, null)
替换节点
//获取父节点,由父节点来完成替换操作
let ul = document.querySelector('ul')
//替换操作
ul.replaceChild(newli, oldli)
// 利用指定的新元素,去替换当前父元素下所有的子元素
ul.replaceChildren(newli1)
删除操作
方式一:元素自删除
let firstli = document.querySelector('.first-li')
firstli.remove() // 元素自我删除
方式二:利用父节点删除指定子元素节点
let ul = document.querySelector('ul')
ul.removeChild(firstli)
查询操作
方式一:通过元素节点的属性查询自己的父元素节点
//parentNode返回指定的节点在 DOM 树中的父节点
let res = firstli.parentNode // 节点
console.log(res)
//parentElement返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个 DOM 元素,则返回 null
console.log(firstli.parentElement === res)
方式二:通过父元素查询它的所有子元素节点
let ul = document.querySelector('ul')
// 元素的属性 children 属性返回的是一个伪数组
console.log(ul.children)
收集form表单数据
普通方式
let btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
let inputs = document.querySelectorAll('input[name]')
for (let i = 0; i < inputs.length; i++) {
console.log(inputs[i].value)
}
})
快速方式
//new FormData(表单对象)
let btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
let formdata = new FormData(document.querySelector('form'))
console.log(formdata.get('id'))
console.log(formdata.get('name'))
console.log(formdata.get('sex'))
console.log(formdata.get('age'))
})
数组遍历方式
1. 传统的for循环来遍历
2. forEach()
// el : 代表当前正在访问的数组元素
// index:代表当前正在访问的元素下标
// myarr:操作数组本身 一般情况下会省略myarr参数
arr.forEach((el, index, myarr) => {}
3. every()
与forEach基本一样,every有返回值,返回布尔值,有个元素不满足返回false。
作用:判断某个数组中是否所有的元素都满足相应要求。
// 需求:判断一个数组中是否每一个元素都是偶数
let myarr = [2, 2, 4, 8, 16, 10]
let res = myarr.every((el) => {
return el % 2 == 0
})
if (res) {
console.log('该数组全部是偶数')
} else {
console.log('该数组中只是有一个元素不是偶数')
}
4.some()
与every方法相反,有个元素满足返回false。
5.map()
会返回一个新的数组
let arr = [100, 200, 300, 400]
// 需求:我想将arr数组中的每一个元素在原有的基础上增加一倍!
let res = arr.map((el) => {
return el * 2
})
//该方法可以用来实现浅拷贝
let res = arr.map((el) => {
return el
})
6.filter()
过滤器,也会返回一个新的数组
// 需求:筛选出arr数组中的所有偶数 组成一个新的数组
let res = arr.filter((el) => {
return el % 2 == 0
})
7.find()
从数组中查找符合条件的第一个元素并返回该元素,如果遍历完整数组都没有找到符合添加的元素则返回undefined。
8.findIndex()
从数组中查找符合条件的第一个元素并返回该元素的下标值,如果遍历完整数组都没有找到符合添加的元素则返回-1。
作用域
作用域:指变量或函数的作用范围
js中目前存在三种作用域:
- 全局作用域 es6之前
- 函数作用域 es6之前
- 块级作用域{} es6之后才有块级作用域
预解析
预解析:js代码在真正的执行前,会先执行一个操作,该操作成为预解析。
预解析主要涉及两个内容:当前作用域下的var变量和function函数进行提升。
let和const所修饰的变量不具备提升操作
字符串操作
将字符串看作是数组的形式,进行访问字符串中单个字符,利用下标访问。
let str1 = 'hello world!'
console.log(str1[0])
console.log(str1[1])
console.log(str1[2])
// length属性 查看字符串的长度!
console.log(str1.length)
从常规来说,基本数据类型不是对象,是无法拥有属性和方法的,也不能像操作对象那样操作普通数据。但是在js中一个工具,js引擎在执行非对象类型的数据时,如果该数据类型并不是Object,那么js会进行包装,把它包装成一个Object类型。
1.charAt()
通过指定的下标进行访问对应的字符,类似于str[0]
let str = 'hello world!'
let res = str.charAt(0) // 等价于 str[0]
console.log(res)
2.split()
通过指定的字符串分割成一个字符数组
let str = 'hello world!'
let res = str.split('')
3.concat()
将多个字符串进行拼接,等价于+
let str1 = 'hello'
let str2 = 'world!'
let str3 = str1.concat(str2)
console.log(str3)
4.includes()
chaxvn是否存在一个指定的字符,存在则返回true,不存在返回false。
let str = 'abcdefg'
let res = str.includes('a')
console.log(res)
5.indexOf()
查询是否存在一个指定字符,存在返回对应下标值,不存在返回-1。从左往右查找第一个匹配的字符下标。
let str = 'abcdefg'
let res = str.indexOf('a')
console.log(res)
6.lastIndexOf()
查询是否存在一个指定字符,存在返回对应下标值,不存在返回-1。从右往左查找第一个匹配的字符下标。
7.trim()
去除字符串前后的空格。
let str = ' hello world! '
let res = str.trim()
console.log(res)
8.trimStart()
去除字符串前面的空格。
9.trimEnd()
去除字符串后面的空格。
10.toUpperCase()
将字符串中所有的小写字母转换为大写字母。
let str = 'abcdefgABCDN'
let res = str.toUpperCase()
console.log(res)
11.toLowerCase()
将字符串中所有的大写字母转换为小写字母。
12.substring()
substring(开始下标,结束下标) 方法是对字符串进行截取。
- 如果 indexStart 等于 indexEnd,substring 返回一个空字符串
- 如果省略 indexEnd,substring 提取字符一直到字符串末尾,
- 如果任一参数小于 0 或为 NaN,则被当作0。
13.startsWith()
判断该字符串是否以指定的字符串进行开头。
let str = 'hello world!'
let res = str.startsWith('hello')
console.log(res)
14.endsWith()
判断该字符串是否以指定的字符串进行结尾。
15.replace()
将指定的字符替换为其他字符。
let str = 'hello world!'
let res = str.replace('hello', 'xxxx')
console.log(res)
DOM对象
window
除了指向的是浏览器的窗口,还代表着js在浏览器环境下全局对象,也称为顶层对象。
location
- 跳转页面,location.href=‘’
- 跳转页面不计入历史,更新地址栏,不计入历史操作,location.replace(‘’)
- 刷新页面,location.reload()
- 地址栏参数?号后的数据,location.search
history
浏览器浏览记录
- history.forward(),前进
- history.back(),后退
- history.go(1) 等价于 history.forward();history.go(-1) 等价于 history.back()
navigator
用于查看设备信息,查询当前浏览器的信息、版本、名称等。
浏览器的两个数据存储
localStorage
数据持久化到浏览器中,关闭窗口或浏览器,都不会消失。
// 设置数据, key 和 value 数据类型必须是字符串类型
localStorage.setItem('name', '张三')
// 设置数据 []
localStorage['age'] = 18
// 读取数据
console.log(localStorage.getItem('name'))
console.log(localStorage['age'])
sessionStorage
数据临时存到浏览器中,以键值对的形式,窗口关闭数据就消失。
// 设置数据, key 和 value 数据类型必须是字符串类型
sessionStorage.setItem('name', '张三')
// 设置数据 []
sessionStorage['age'] = 18
// 读取数据
console.log(sessionStorage.getItem('name'))
console.log(sessionStorage['age'])
执行上下文
js代码在执行过程中,会存在一个环境,js引擎会将js代码,分别设置一个执行环境。
执行上下文环境分3类:
- 全局执行上下文
- 函数执行上下文
- eval()执行上下文(忽略,只做了解)
this关键字
- 在浏览器环境中的全局上下文中,this永远指向的是 顶层对象 window
- 在浏览器环境中函数执行上下文中,this指向的也是 顶层对象 window , 严格模式除外! 函数执行上下文,设置了严格模式,那么this指向的 undefined
- 如果函数是被某个对象进行调用时,那么该函数(方法)中的this指向的是,它的调用对象(调用者)!而非持有者!
- 构造函数中this,指向的是新创建出来的一个该构造函数类型的 实例 {} 空对象!
- 事件对象的事件处理函数中的this,指向的是 当前被绑定的元素对象,仅适用于 function函数
- 箭头函数,它不存在自己的this,它的this是该箭头函数被创建时,当时的执行上下文环境中的this!并且永不改变包括this的三大劫持手段!(类似于‘印随效应’)
构造函数与普通函数的区别
- 构造函数中默认返回值已经构造完成的对象
- 普通函数默认返回值是 undefined
- 构造函数需要搭配new关键字进行使用
- 构造函数的目的不是为了实现某种功能,而是去快速构造某一类型的实例对象
- 构造函数中的this指向的是new关键字所创建的该构造函数类型的对象实例!
new关键字是配合构造函数使用:
new关键字,做了几件事情:
- new关键字会创建一个该构造函数的实例对象,一开始是空的{}
- new关键字会将刚才创建的实例对象的__proto__属性指向为 构造函数所保存的 prototype指向的对象
- new关键字会将构造函数中的this 指向为 该实例对象
- 最终返回这个 实例对象
this的劫持
this的劫持方法: call() 、 apply() 、 bind(),以上的三个方法都属于,Function实例对象身上的方法!箭头函数this不能被劫持!
// call劫持
var obj1 = {
name:'obj1',
fun:function(a,b){
console.log(this,a,b)
}
}
var obj2 = {
name:'obj2'
}
// 正常情况调用
obj1.fun(100,200)
// call方法调用
obj1.fun.call(obj2,100,200)
垃圾回收机制
垃圾回收:JavaScript程序在运行的过程中,随着运行时间的增加,那么会相应的产生一些垃圾数据,垃圾回收机制主要是定时 的去清理这些垃圾数据,避免内存溢出、泄露导致程序崩溃!
闭包
闭包:把一些数据进行封装!包裹!形成一个独立的空间,该空间只会被能访问到该空间的‘人’使用。
什么是闭包?
闭包就是一个函数在其他函数的内部嵌套声明,并且该函数内部使用了上级函数的数据!并且该函数被返回出去了!
闭包的优点:
- 使用闭包可以形成对立的空间,避免变量名污染问题
- 利用闭包,可以在函数外,也能访问到函数内部的数据!
闭包的缺点:
- 闭包的产生有很多时候是隐式产生的,最终会造成内存泄漏
定时器
js提供了两种创建定时器的方式:
- setTimeout(一次性的)
关闭定时器:clearTimeout() - setInerval(永久性的)
关闭定时器:clearInterval()
元素的自定义属性
如何创建自定义属性
- 直接在元素的开始标签中,书写自定义的属性名以及赋值操作
- 利用data-* 形式创建自定义属性
读取自定义的元素属性值
element.getAttribute(‘属性名’),该方式可读取自定义的与官方预定义的。
修改、设置一个元素的自定义属性,利用setAttribute会将数据隐式的转换为string类型。
element.setAttribute(‘add’, true)
特别的data-属性的读取方式
element.dataset.*(*是自定义的data-后面的内容)
classList数组
比className好用
className添加类的样式时需要下面这样加,注意类名前面有个空格。
box.className += ' 类名'
classList方式如下
//添加
box.classList.add('box2')
//移除
box.classList.remove('box2')
时间对象
创建时间对象4种
方式一
let date = new Date() // 返回一个当前系统时间的,时间对象
方式二
let date = new Date(59000)
方式三
let date = new Date(‘1997-10-19’)
方式四
依次传入 年 月 日 时 分 秒 毫秒 进行构造时间对象
let date = new Date(2023, 1, 31, 11, 34, 48, 1500)
特殊的使用方式
Date()函数 返回的是当前时间对象的字符串形式!
let date1 = Date()
操作时间对象
- 获取对应的时间数据
let date = new Date() // 14:23:1:578
console.log(date)
// 1- 获取时间对象的年份
console.log(date.getFullYear())
//2- 获取时间对象的月份, 注意月份是从 0开始计算的 0代表1月
console.log(date.getMonth() + 1)
//3- 获取时间对象的日 一个月的第几天
console.log(date.getDate())
//4- 获取时间对象的 星期数 注意:范围是0-6 0代表星期天
console.log(date.getDay())
//5- 获取时间对象的 小时数
console.log(date.getHours())
//6- 获取时间对象的 分钟数
console.log(date.getMinutes())
//7- 获取时间对象的 秒数
console.log(date.getSeconds())
//8- 获取时间对象的 毫秒数
console.log(date.getMilliseconds())
- 设置对应的时间数据
// 将以上的所有方法的 get 替换为 set,如
date.setFullYear(2000)
console.log(date)
获取时间对象的时间戳
//获取当前系统时间的时间戳
console.log(Date.now())
// 获取当前时间对象的时间戳
console.log(date.getTime())
数学函数
注意:Math函数不能作为构造函数使用! 是无法实例化一个数学对象!
方法 | 说明 |
---|---|
floor() | 地板数,对一个数向下取整 |
ceil() | 天花板数,对一个数向上取整 |
max() | 返回当前参数列表中最大值 |
min() | 返回当前列表中最小值 |
pow() | 求一个数的幂 |
sqrt() | 开平方根 |
round() | 对一个数四舍五入 |
random() | 随机数,随机返回一个0-1之间的小数,不包括1 |
显示原型与隐式原型
- JS中任何的一个实例对象都具备一个 隐式原型属性 __ proto __
- JS中所有的function函数身上都具备一个 显示原型属性 prototype
function身上同时具备 __ proto __ 和 prototype
原型链
// 实例对象身上__proto__ 存储的是什么数据类型? Object
// 原型链
// 每一个实例对象上都具备 __proto__ 原型对象
// 当一个对象在自身上找不到对应的属性或者方法时,会沿着__proto__原型对象身上去寻找! obj {}
// 如果往上一级的__proto__身上还是找不到想要的属性或者方法 obj.__proto__
// 那么它会继续沿着当前这一级__proto__继续寻找! obj.__proto__.__proto__
// .... obj.__proto__.__proto__.__proto__
// 沿着原型链最终找到 null 就结束! 如果已经访问到null 都还没有找到想要的属性或者方法 则放回 undefined
// 以上描述寻找的过程就称为 原型链!