【JavaScript】-【基础版】- 学习笔记（一轮）完结

本文链接：https://blog.youkuaiyun.com/weixin_40852935/article/details/122763878

这篇笔记涵盖了JavaScript的基础知识点，包括数值转换、作用域、对象、数组操作、字符串处理、数字方法、时间处理、BOM操作以及DOM操作。详细讲解了数组的方法如push、pop、splice、sort等，字符串的方法如toLowerCase、trim等，还介绍了定时器、事件处理、面向对象、原型和ES6的新特性，如let、箭头函数、解构赋值、类语法等。此外，还涉及到了AJAX、GET和POST的区别以及如何阻止表单默认提交行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习笔记
b站：https://www.bilibili.com/video/BV1W54y1J7Ed?spm_id_from=333.999.0.0
2022.2.8 按照前锋的视频粗略学了一遍 jQuery略

1.数值转换
2.作用域
3 对象object （键值对）
4.数组&常用方法（*记）
- 4.1数组长度length
- 4.2数组常用操作
5.字符串
6.数字常用方法
7.时间常用方法
8.BOM操作(Browser Object Model)
- 8.1获取浏览器窗口尺寸
- 8.2 浏览器的弹出层
- 8.3 开启和关闭标签页
- 8.4 浏览器常见事件
- 8.5 浏览器的历史记录操作
- 8.6 浏览器卷去的尺寸
- 8.7 浏览器滚动到
9.定时器
10.DOM
- 10.2 操作元素内容
- 10.3 操作元素属性
- 10.4 操作元素类名
- 10.5 操作元素行内样式
- 10.6 获取元素非行内样式
- 10.7 节点操作
11.事件
12.面向对象
13.原型（prototype）
14.ES6语法（2015年）
- 14.1 新增变量命名
- 14.2 箭头函数
- 14.3 解构赋值
- 14.4 模板字符串
- 14.5 展开运算符
- 14.6 类语法
- 14.7 异步
- - 14.7.1 promise
  - 14.7.1 async函数
16.请求接口
- 16.1 Ajax
- 16.2 GET和POST的区别
- 16.3 阻止form表单的默认提交行为

1.数值转换

在这里插入图片描述

括号内是需要转换的变量
1.
Number()  		// 转换为数字   只有纯数字字符串才能转，不然就是NaN
parseInt() 		// 转换为int   取整3.14->3 为字符串时100a->100 开头不是数字则NaN
				// 转换为十进制 parseInt(nmuber,进制)
parseFloat() 	// 转换为float  取浮点数

2.
toString()
返回的是相应值的字符串表现
数值、布尔值、对象和字符串值都有toString()方法，但是null和undefined值没有这个方法
例子：
    var age = 11;
    var str1 = age.toString();              //字符串 “11”
String()
在不知道变量是否为null或者undefined是可以使用String()函数来转换为字符串类型
可以将任何类型的数值转换为字符串
例子：
            var value1 = 10;
            var value2 = true;
            var value3 = null;
            var value4;    //只定义未初始化的变量，自动赋值为undefined
     
            String(value1);   // 10"
            String(value2);   //"true"
            String(value3);   // "null"
            String(value4);   // "undefined"

3.
Boolean() 		// 布尔型 非0即真

Math.ceil()     // 向上取整 3.1->4
JSON.parse(str) // 把字符串解析成对象格式
JSON.stringify(json)   // 把对象格式转成字符串

2.作用域

查找变量从最近父级查找，逐层向上

let 作用域为最近{}内
在这里插入图片描述

3 对象object （键值对）

在这里插入图片描述

4.数组&常用方法（*记）

在这里插入图片描述

4.1数组长度length

var arr=[100,200,303,200]
// 例子：数组length-1 =>作用：可以用来删除最后的元素
arr.length = 长度

在这里插入图片描述

4.2数组常用操作

1从后面加数据push()

// 返回数组长度
var res= arr.push（value）

2在前面加数据unshift()

// 返回长度
var res= arr.unshift（value）

3删除最后一个pop()

// 返回被删除的元素
var res=arr.pop（）

.4删除第一个shift()

// 返回被删除的元素
var res= arr.shift（）

5数组反转reverse()

// 返回反转后的数组
var res= arr.reverse（）

6删除若干数据splice()

// 删除若干数据，并选择是否插入。默认值(0，0，没有) 返回新数组（被删除的数据）
var res= arr.splice（开始索引，多少个，value）
eg:
var arr=[100,200,300,400]
var res= arr.splice（1，1，'新来的'）
//返回：
arr=[100,"新来的",300,400]
res=[200]//被删的

7数组排序sort()

// 什么都不传就两个两个换。返回排序好的数组
arr.sort()        //例如：1，2，3，4  => 2,1,4,3
// 从小到大排序
sort（function（a,b）{return a - b}）
// 从大到小排序
sort（function（a,b）{return b - a}）

8拼接成字符串join()

// join（连接符）。将数组用连接符连接成字符串，返回字符串
join('-')    // 例如：1，2，3  =>  1-2-3

9拼接数组concat()

// concat（其他数组）将其他数组与数组拼接。返回拼接好的数组
arr1.concat(arr2)

10截取数组slice()

// 默认（0，数组长度），返回截取的新数组，包前不包后
arr.slice（开始索引，结束索引）
eg:
var arr=[100,200,300,400]
var res= arr.slice(1,3)
//返回
arr=[100,200,300,400]
res==[200,300]

11查找value在数组的索引indexOf（）

// 有该数据则返回**第一次**出现的索引。没有则返回-1
indexOf（value）

12 遍历数组forEach()

// item 是数组每一个元素，index 是索引，arr是数组。参数可以不写,没有返回值
arr.forEach（function（item，index，arr）{}）

13映射数组map()

// 返回新的数组
map（function（item，index，arr）{return item*10}）  // 将数组每一个元素*10

14过滤数组filter()

// 返回过滤好的新数组
filter（function（item，index，arr）{return item>150}） // 将数组小于150的元素删除

15判断是否每一项都满足条件every()

// 返回布尔值
every（function（item，index，arr）{return item>150}）  // 判断是否大于150

16判断是否有某一项都满足条件some()

// 返回布尔值
some（function（item，index，arr）{return item>150}）   // 判断是否有满足大于150的元素

5.字符串

在这里插入图片描述

1.获取对应索引位置的字符charAt（索引）

// 返回字符
str.charAt（索引）

2.将字符串的所有字母转换成小写toLowerCase()

// 返回转好的字符串
str.toLowerCase（）

3.将字符串的所有字母转换成大写toUpperCase()

// 返回转好的字符串
str.toUpperCase（）

4.将字符串第一个满足的内容更换replace()

// 返回字符串。注意：第一个
str.replace（换下内容，换上内容）

5.去除首尾空格trim()

// 返回字符串
str.trim（）

6.按照分隔符切割组成一个数组split()

// 1.返回数组
split（分隔符）
// 2.多个分隔符（x，y是分隔符）
split（/x|y/）
// 3.若分隔符是. 要加[]
split（/[.]|y/）

7.截取字符串

有三个方法：
substr(开始索引，个数)
substring(开始索引，结束索引)
slice(开始索引，结束索引)

// 示例
var arr = "01234567"
var res1 = substr(1,6)  	// 结果为123456，1是开始索引，6是6个字符
var res2 = substring(1,6)  	// 结果12345，1是开始索引，6是结束索引。包前不包后
var res3 = slice(1,6)		// 结果12345，1是开始索引，6是结束索引。包前不包后

所有的字符串操作都不会改变原始参数，以返回值的形式得到结果

6.数字常用方法

在这里插入图片描述

1.获取0~1之间的随机小数。random

// 返回小数。包前不包后，即可以获取到0，不可以获取到1
Math.random（）

2.对数字进行四舍五入取整round

// 返回整数
Math.round（value）

3.对数字进行向上取整ceil

// 返回整数
Math.ceil（value）

4.对数字进行向下取整floor

// 返回整数。相对于去小数
Math.floor（value）

5.对数字进行取幂运算pow

// 返回结果 
Math.pow（底数，指数）
// 例如2的5次方
Math.pow(2,5)

6.对数字进行二次方根运算sqrt

// 返回结果
Math.sqrt（value）
// 例如根号4
Math.sqrt(4)

7.对数字进行绝对值运算abs

// 返回结果
Math.abs（）

8.获取若干数字中的最大值max

// 返回最大值。
Math.max（value1，value2，...）

9.获取若干数字中的最小值min

// 返回最小值。
Math.min（value1，value2，...）

10.得到一个近似Π(派：3.14159…)的值 PI

// 返回值
Math.PI

11.案例：

// 获取0~x之间的随机**整数**
var a = Math.random()*(x+1)
var result = Math.floor(a)
// 获取x~y之间的随机整数
var b = Math.random()*(y-x+1)
var result1 = Math.floor(b)+x

获取两个数之间的随机整数，函数

//准备一个函数，接受两个参数，获取
function randomNum(min,max){
   //1。求0~两整数差的随机整数
	var res=Math.floor(Math.random()*(max-min+1))
	//2.随机整数＋相对小的数字
	var res2=res+min
}

7.时间常用方法

1.获取

var time = new data（）
time.getFullYear()  // 获取年
time.getMonth()		// 获取月份
time.getDate()		// 获取日期
time.getHours() 	// 获取小时
time.getMinutes() 	// 获取分钟
time.getSeconds()	// 获取秒
time.getDay()		// 获取星期   0~6 周日到周六
time.getTime()		// 获取时间戳	1970/1/1 00:00:00 距离今天的**毫秒**

2.设置（没有设置星期，会自动生成星期几）
在这里插入图片描述

var time = new data（）
time.setMonth(0) //1月

总结

3.案例：
两个时间节点的时间差

// 获取时间差函数
function getDiff(time1,time2){
    // 获取时间戳
    var ms1 = time1.getTime()
    var ms1 = time1.getTime()
    // 两个时间戳相减的秒数,向上取整忽略毫秒
    var sub = Math.celi((ms2-ms1)/1000)
    //换算,向下取整
    var day = Math.floor(sub / (60 * 60 * 24))
    var hours = Math.floor(sub % (60 * 60 *24) / (60 * 60))
    var minutes = Math.floor(sub % (60*60) / 60)
    var seconds = sub % 60
    
    return {day:day,hours:hours,minutes:minutes,seconds:seconds}
}

8.BOM操作(Browser Object Model)

操作浏览器内容的属性和方法

8.1获取浏览器窗口尺寸

// 获取浏览器可视窗口的宽度   包括滚动条
window.innerWidth
// 获取浏览器可视窗口的高度
window.innerHeight

8.2 浏览器的弹出层

// 提示框
window.alert('value')
// 询问框 有返回值，确定true，取消false
window.confirm('value') 
// 输入框 有返回值，确定输入的东西，取消null
window.prompt('value')
eg：
var res= window.prompt('请输入您的银行卡密码')
res就是输入的内容

在这里插入图片描述

8.3 开启和关闭标签页

// 开启
window.open('地址/url')
// 关闭当前标签页
window.close()

8.4 浏览器常见事件

// 资源加载完毕，执行...
window.onload = function(){}
//可视尺寸改变，执行...
window.onresize = function(){}
// 滚动条位置改变，执行...
window.onscroll = function(){}

8.5 浏览器的历史记录操作

// 回退页面,相当于左箭头
window.history.back()
// 前进页面
window.history.forward()

8.6 浏览器卷去的尺寸

有滚动条时，页面隐藏的部分尺寸

// 卷去的高度
document.documentElement.scrollTop  //页面有<!DOCTYPE html>
document.body.scrollTop		//页面没有<!DOCTYPE html>

//卷去的宽度
document.documentElement.scrollLeft
document.body.scrollLeft
// 卷去的高度/宽度 兼容写法
var height = document.documentElement.scrollTop || document.body.scrollTop

8.7 浏览器滚动到

// left 浏览器卷去的宽度， top 浏览器卷去的高度 ，瞬间移动
window.scrollTo(left,top)
//平滑滚动
window.scrollTo({
    left:xx,
    top:yy,
    behavior:'smooth'  //平滑滚动
})

总结

9.定时器

有返回值，返回第几个定时器，不区分定时器类型

1.间隔定时器（按照指定周期毫秒，去执行指定代码）

setInterval(function(){
   // 要执行的代码，每1000毫秒执行一次
   
},1000)

2.延时定时器（在固定的时间毫秒后执行一次代码）

setTimeout(function(){
  // 要执行的代码
},1000)

3.关闭定时器，不区分定时器类型

// 语法一
clearInterval(要关闭的定时器返回值)
// 语法二
clearTimeout(要关闭的定时器返回值)

10.DOM

操作文档流相关内容的属性和方法

10.1 获取元素

// 根据id获取元素。有-对应元素，没有-null
document.getElementById('id名称')
// 根据类名获取元素。获取文档流中所有类名对应的元素，返回伪数组
document.getElementsByClassName('类名')
// 根据元素标签名获取。获取文档流中所有标签名对应的元素，返回伪数组
document.getElementsByTagName('标签名')

// 根据选择器获取一个，获取文档流中满足条件的**第一个**元素
document.querySelector('选择器')   //选择器  .nav
// 根据选择器选择一组，获取文档流中**所有**满足条件的元素，返回伪数组
document.querySelectorAll('选择器')

10.2 操作元素内容

1.文本内容

// 文本内容
	// 获取
	ele.innerText
	//设置   覆盖/替换
	ele.innerText = '新内容'

超文本内容

// 超文本内容
	//获取
	ele.innerHTML
	//设置   覆盖/替换
	ele.innerHTML = '新内容'

10.3 操作元素属性

// 原生属性（标签自带的属性）
	//获取
	元素.属性
	//设置
	元素.属性 = '新内容'
// 自定义属性（自己设定的一些属性）
	//获取
	元素.getAttribute('属性名')
	//设置
	元素.setAttribute('属性名'，'属性值')
	//删除
	元素.removeAttribute('属性名')

// 注意：以上方法一般不用做操作元素 类名 和 样式

10.4 操作元素类名

//获取
元素.className
//设置
元素.className = '新类名'

10.5 操作元素行内样式

// 获取
元素.style.样式名
// 设置
元素.style.样式名 = '样式值'  //有中划线-的样式，写成驼峰，如backgroundColor

10.6 获取元素非行内样式

// 获取 可以获取非行内样式，也可以获取行内样式，只能获取不能设置
window.getComputedStyle(元素).样式名

10.7 节点操作

基本节点操作

// 创建节点，创建一个指定的标签元素，返回节点
document.createElement('标签名称')
// 插入节点向后插入，把子节点放在父节点的内部，并且放在最后的位置
父节点.appendChild(子节点)
// 插入节点向前插入，把子节点放在父节点的内部,放在指定位置
父节点.insertBefore(要插入的子节点，哪个子节点前面)
// 删除节点，删除指定的节点
父节点.removeChild(子节点)
// 删除节点
节点.remove()
// 替换节点
父节点.replaceChild(换上节点，换下节点)
// 克隆节点 true/false
节点.cloneNode(是否克隆后代节点)

获取元素尺寸

// 1.获取元素尺寸,元素 内容 + padding + border 区域的尺寸
元素.offsetHeight
元素.offsetWidth
// 2.获取元素尺寸，元素 内容 + padding 区域的尺寸
元素.clientHeight
元素.clientWidth

总结

11.事件

1.事件绑定
在这里插入图片描述
2.事件类型

3.事件对象

事件对象的信息

offsetX 和 offsetY 相对于促发事件元素，鼠标的坐标信息 clientX 和 clientY 相对于可视窗口，鼠标的坐标信息
pageX 和 pageY 相对于整个页面文档流，鼠标的坐标信息

4.浏览器相应事件的机制
在这里插入图片描述

先从外层传递到里层（事件捕获阶段），最后传出来（事件冒泡阶段）

5.阻止事件传播

事件对象.stopPropagation()

4.事件委托

使用事件对象的target可以知道点击的是哪个元素

var ul = document.querySelector('ul')
ul.onclick = function(e){
    if(e.target.tagName === 'LI'){
        console.log('你点击的是LI')
    }
}

12.面向对象

创建工厂

构造函数首字母大写与new连用 (内置构造函数Object)

不要随便return。return基本数据类型无效；return复杂数据类型比如数组，构造函数无效。

function Person(name,age){
    this.name = name
    this.age = age
    this.sayHi = function(){
		console.log('hello world')
	}
}
var obj = new Person('jack',18)     // 小括号不写也行，不推荐不写

如果构造函数里面有函数，每个对象都会新建一个函数，构造函数首字母一般大写

解决方案：使用原型prototype属性，是一个对象。

属性写在构造函数体内，方法写在构造函数的原型上，如果属性不变，也写在原型上

// 所有实例化对象都会加上这个方法
function Person(){}
Person.prototype.sayHi = function(){}   //sayHi 方法名
Person.prototype.a = 110

13.原型（prototype）

每个对象都有一个它的原型对象，它可以使用自己原型对象上的所有属性和方法

原型链

这里是引用

用 __proto__串联起来的对象链状结构

对象访问机制：先去自己身上找，没有就去proto上找，逐级查找最高级Object的proto，没有就返回undefined

在这里插入图片描述

14.ES6语法（2015年）

14.1 新增变量命名

ES6以前使用var定义
ES6新增两个关键字
let定义变量，const定义常量

var和let/const的区别 在这里插入图片描述

p1.let和const都不能定义前使用
p3.let和const只能在{…}中使用

let和const的区别
在这里插入图片描述

14.2 箭头函数

ES6对函数表达式的简写（声明式函数不能使用）就是把function变成=>

//原来
var fn1 = function(){ }
//箭头函数
var fn1 = ()=>{}

// 1.省略小括号。只有一个形参时,可以不写()
var fn1 = function(a){}
var fn1 = a=>{}
// 2.省略大括号。只有一句话时，可以不写{} 会把这句话的结果当做返回值
var fn1 = function(a,b){return a+b}
var fn1 = (a,b)=> a+b
// 3.箭头函数没有arguments

// 4.箭头函数内部没有this，用的是外部作用域的this

ES6的箭头函数
在这里插入图片描述

14.3 解构赋值

// 1解构数组，使用[]
let arr[a,b] = ['1','2']
console.log(a)   // 1
console.log(b)	 // 2

// 2解构对象，使用{}
let obj = {name:lhd, id:10}
let{name,id} = obj
console.log(name) //lhd
console.log(id) //10
// 解构对象起别名
let{name:a} = obj  //a=lhd
console.log(a)

解构赋值调换

let [a,b] = [1,2];
[a,b]=[b,a];
console.log(a);
console.log(b);

14.4 模板字符串

可以换行，直接在字符串内解析变量 反引号

var str = `ab`
var str = `a
b`
// 解析变量
var age = 18
var str = `我今年${age}岁`  // 输出我今年18岁

14.5 展开运算符

展开数组 = 去除[]

var arr = [1,2,3]
console.log(arr)      //输出数组 [1,2,3]
console.log(...arr)   //输出1,2,3
// 作用1：合并数组
var arr = [1,2,3]
var arr1 = [4,5,6]
var arr2 = [...arr,...arr1] // 输出数组[1,2,3,4,5,6]
// 作用2：给函数传递参数
var arr1 = [10,20,5,6]
var max = Math.max(...arr1)  //输出最大值，max()不能直接放数组

展开对象 = 去除{}

// 作用1：用来复制对象。注意：有相同成员，...obj要放在前面，不然会被obj的覆盖
var obj = {name:lhd}
var obj1 = {
    id：10，
    ...obj
}

14.6 类语法

ES6的语法写构造函数，解决之前写构造函数需要分开写的缺点

// 之前的写法
function Person(name,age){
    this.name = name
    this.age = age
}
//原型添加一个方法
Person.prototype.sayHi = function(){ console.log('hello world')}
// 静态属性与方法
Person.a = 100
Person.go = function(){ console.log('go') }
// 实例化对象
var p1 = new Person('lhd','19')
console.log(p1)					  	// 输出对象
p1.sayHi()							// 输出hello world
console.log(p1.a)					// 输出100
Person.go()							// 输出go
var p2 = Person('lhd','19')         // 注意：不报错，但不能实例化对象

// ES6 写法 类语法
class Person{
    constructor(name,age){
     // 这里按照 ES5 的构造函数体书写
        this.name = name
    	this.age = age
    }
    // 直接写原型的函数
    sayHi(){ console.log('hello world')}
    // 静态属性 + static
    static a = 100
	// 静态方法 
	static go() = function(){ console.log('go') }
}
// 实例化对象
var p1 = new Person('lhd','19')
console.log(p1)
p1.sayHi()
var p2 = Person('lhd','19')        // 注意：报错，一定要用new
console.log(Person.a)
Person.go()

14.7 异步

14.7.1 promise

一个任务不是连续完成的。
异步问题=>用回调函数(ES6之前）=>回调函数多了不好维护=>回调地狱(callback hell)=>用promise解决

var pro = new Promise((resolve, reject) => {
    console.log(1);
    resolve(4);
    console.log(2);
}).then(val => {
    console.log(val)
});
//通过then拿到异步数据
pro.then(() => {
    console.log(5)
});
console.log(3);
setTimeout(function(){
    console.log(6)
});

14.7.1 async函数

await后面加promise对象，可以直接获取resolve传递的异步数据

function getTea(){
  return new Promise(function(resolove){
  setTimeout(()=>{
    resolove("奶茶")
  },1000)
  })
}
function getHotpot(){
  return new Promise(function(resolove){
  setTimeout(()=>{
    resolove("火锅")
  },2000)
  })
}
async function getData() {
  let hotPot=await getHotpot();
  console.log(hotPot)
  let tea=await getTea();
  console.log(tea)
}
getData()

16.请求接口

后端给予接口文档，按照接口文档写

16.1 Ajax

在这里插入图片描述

//1.创建ajax对象
var xhr = new XMLHttpRequest()
//2.配置本次的请求信息
xhr.open('GET','http://localhost:8888/test/',true)    //请求方式、请求地址、是否异步（默认是true）
//3.配置一个请求完成后触发的事件
xhr.onload = function(){
    //返回的是字符串
    console.log(xhr.responseText)
    //想拿json，要解析
    var res = JSON.parse(xhr.responseText)
}
//4.把本次请求发送出去
xhr.send()

16.2 GET和POST的区别

在这里插入图片描述

GET直接在open函数地址内拼接

xhr.open('GET','xxx?name=lhd&id=10',true)    //请求方式、请求地址、是否异步

POST在send函数内写参数，并且要特殊说明

xhr.open('POST','http://localhost:8888/test/',true) 
// 语法：xhr.setRequestHeader('content-type',你传递的参数格式) 后端给参数格式
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('name='+lhd+'&id='+age)

16.3 阻止form表单的默认提交行为

loginForm.onsubmit = function(e){
    e.preventDefault()               
}

【JavaScript】-【基础版】- 学习笔记（一轮）完结

目录

1.数值转换

2.作用域

3 对象object （键值对）

4.数组&常用方法（*记）

4.1数组长度length

4.2数组常用操作

5.字符串

6.数字常用方法

7.时间常用方法

8.BOM操作(Browser Object Model)

8.1获取浏览器窗口尺寸

8.2 浏览器的弹出层

8.3 开启和关闭标签页

8.4 浏览器常见事件

8.5 浏览器的历史记录操作

8.6 浏览器卷去的尺寸

8.7 浏览器滚动到

9.定时器

10.DOM

10.2 操作元素内容

10.3 操作元素属性

10.4 操作元素类名

10.5 操作元素行内样式

10.6 获取元素非行内样式

10.7 节点操作

11.事件

12.面向对象

13.原型（prototype）

14.ES6语法 （2015年）

14.1 新增变量命名

14.2 箭头函数

14.3 解构赋值

14.4 模板字符串

14.5 展开运算符

14.6 类语法

14.7 异步

14.7.1 promise

14.7.1 async函数

16.请求接口

16.1 Ajax

16.2 GET和POST的区别

16.3 阻止form表单的默认提交行为

14.ES6语法（2015年）