JavaScript学习笔记

JavaScript

三种使用方式

1. 在浏览器控制台上直接运行js语言片段
2. 在html文件的script标签中
3. 使用.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])
  }
}

获取页面元素的样式属性值

1. e利用element.style 获取元素的样式对象
2. 利用全局函数 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中目前存在三种作用域：

1. 全局作用域 es6之前
2. 函数作用域 es6之前
3. 块级作用域{} 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

1. 跳转页面，location.href=‘’
2. 跳转页面不计入历史，更新地址栏，不计入历史操作，location.replace(‘’)
3. 刷新页面，location.reload()
4. 地址栏参数?号后的数据，location.search

history

浏览器浏览记录

1. history.forward()，前进
2. history.back()，后退
3. 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类：

1. 全局执行上下文
2. 函数执行上下文
3. eval()执行上下文（忽略，只做了解）

this关键字

1. 在浏览器环境中的全局上下文中，this永远指向的是 顶层对象 window
2. 在浏览器环境中函数执行上下文中，this指向的也是 顶层对象 window ， 严格模式除外！ 函数执行上下文，设置了严格模式，那么this指向的 undefined
3. 如果函数是被某个对象进行调用时，那么该函数(方法)中的this指向的是，它的调用对象(调用者)！而非持有者！
4. 构造函数中this，指向的是新创建出来的一个该构造函数类型的 实例 {} 空对象！
5. 事件对象的事件处理函数中的this，指向的是 当前被绑定的元素对象，仅适用于 function函数
6. 箭头函数，它不存在自己的this，它的this是该箭头函数被创建时，当时的执行上下文环境中的this！并且永不改变包括this的三大劫持手段！（类似于‘印随效应’）

构造函数与普通函数的区别

1. 构造函数中默认返回值已经构造完成的对象
2. 普通函数默认返回值是 undefined
3. 构造函数需要搭配new关键字进行使用
4. 构造函数的目的不是为了实现某种功能，而是去快速构造某一类型的实例对象
5. 构造函数中的this指向的是new关键字所创建的该构造函数类型的对象实例！

new关键字是配合构造函数使用：
new关键字，做了几件事情：

1. new关键字会创建一个该构造函数的实例对象，一开始是空的{}
2. new关键字会将刚才创建的实例对象的__proto__属性指向为 构造函数所保存的 prototype指向的对象
3. new关键字会将构造函数中的this 指向为 该实例对象
4. 最终返回这个 实例对象

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程序在运行的过程中，随着运行时间的增加，那么会相应的产生一些垃圾数据，垃圾回收机制主要是定时 的去清理这些垃圾数据，避免内存溢出、泄露导致程序崩溃！

闭包

闭包：把一些数据进行封装！包裹！形成一个独立的空间，该空间只会被能访问到该空间的‘人’使用。

什么是闭包？
闭包就是一个函数在其他函数的内部嵌套声明，并且该函数内部使用了上级函数的数据！并且该函数被返回出去了！

闭包的优点：

1. 使用闭包可以形成对立的空间，避免变量名污染问题
2. 利用闭包，可以在函数外，也能访问到函数内部的数据！

闭包的缺点：

1. 闭包的产生有很多时候是隐式产生的，最终会造成内存泄漏

定时器

js提供了两种创建定时器的方式：

• setTimeout(一次性的)
  关闭定时器：clearTimeout()
• setInerval(永久性的)
  关闭定时器：clearInterval()

元素的自定义属性

如何创建自定义属性

1. 直接在元素的开始标签中，书写自定义的属性名以及赋值操作
2. 利用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()

操作时间对象

1. 获取对应的时间数据

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())

2. 设置对应的时间数据

//   将以上的所有方法的 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

//   以上描述寻找的过程就称为  原型链！