【一】JavaScript之函数
1）函数声明
-
函数须先声明，才能使用
-
函数声明时不会立即执行，只有调用时才会执行
function 函数名(参数1,参数2){ 代码体 }
2）函数调用
-
函数名()
-
函数的执行与定位位置无关，只与调用位置有关
-
可多次调用，每次调用都是独立不相关的
3）函数分类
1.无参函数
function func(){
console.log('无参函数')
}
func()
// 无参函数
2.有参函数
function func(a,b){
console.log(a,b)
}
func(1,2)
// 1,2
- 传多了只会拿对应的值
- 传少了也不会报错，没值的显示undefined
4）函数的参数
1.接口
-
就是函数的参数
-
函数预留了一个接口，专门用于用户自定义内容，让函数的执行结果发生改名
2.参数类型
- 形参：定义在函数参数内
- 实参：调用时传入的参数
5）函数的返回值
1.返回值机制
- 默认返回值为undefined
- 函数内部通过return语句将结果返回给调用者
2.终止函数执行
- return还可以用来提前结束函数的执行流程
- 当return被执行后，函数会立即停止执行剩余内容，直接返回指定的值
6）函数的表达式
- 函数定义赋值给一个变量，相当于将函数的整体变成一个表达式
- 调用函数表达式的方法是给变量名加（）执行，不能使用函数名（）执行
- 通常 函数的表达式都是匿名函数
let eg=function(x){
return x*2
};
console.log(eg(2));
// 4
7）函数的数据类型
- 函数可以与其他数据类型一样进行赋值、比较、传递等操作
- 函数可以作为其他函数的返回值，从而实现更高阶函数的功能
8）arguments对象
- arguments对象是一个特殊的对象，为当前函数的一个内置属性
- arguments对象会接收所有的实参
function eg(a,b,c) {
console.log(arguments)
console.log(a,b,c)
}
// eg(1,2,3)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 1 2 3
9）函数的递归
- 函数内部可以调用函数本身的做法
- 函数递归须考虑好结果递归条件，不然容易出现死递归使程序崩溃
10）作用域
- 变量其作用的范围
- 变量退出作用域会自动销毁，全局变量只有关闭浏览器才会销毁
11）参数和函数的作用域
- 函数的参数是局部变量，只能在函数内部使用
- 函数内部的变量也是局部变量
- 可以理解为函数体本身是一个独立的作用域
12）作用域链与遮蔽效应
-
遮蔽效应
- 程序在遇到一个变量时，使用时作用域查找顺序，不同层次的函数内都有可能定义相同名字的变量名，会优先从自己所在的层查找，如果没有查找到会依次往上找。
- 整个过程中会发生内层变量遮蔽外层变量的效果叫做遮蔽效应
-
把变量的声明提升到最前面，只会提升声明，不会提升赋值
-
把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用
-
先提升var，再提升function
-
在预解析后，根据新的代码顺序，从上往下按照既定的规律执行
13）匿名函数
- 是一种没有名称的JS函数定义形式
1.语法
// 基本形式
function(参数){代码体};
// 自动执行形式
function(参数){代码体}();
// 赋值形式
var eg=function(参数){代码体};
2.特点
- 无名/零时作用域
- 闭包
- 简便的函数创建
- 立即执行
14）箭头函数
- 是JavaScript ES6引入的一种新的函数定义语法，相比于传统函数表达式，它具有更简洁和易读的特点。
1.语法
var 函数名 = (参数) =>{返回值}
2.this绑定
- 在箭头函数中，this的值是在创建函数的时候确定的，通常指向定义函数的对象
var add=(a,b)=>{
this._a=a
this._b=b
return this._a + this._b
}
add(2,3)
// 5
【二】JavaScript之对象
1）对象
- JS的对象是无序的属性集合
- JS的对象就是字典
2）对象创建
// 对象字面量
var obj={};
// 构建函数new
var obj=new 函数名();
function user(name,age){
this.name=name
this.age=age
}
let eg= new user(name="st",age=18)
console.log(eg)
// user {name: 'st', age: 18}
3）对象调用
function user(name,age){
this.name=name
this.age=age
this.text=function(){return `${this.name} age is ${this.age} `}
}
const eg = new user(name="st",age=18)
1.属性访问
-
直接使用变量名加点（.）调用属性
-
在对象内部使用this加点（.）调用属性
console.log(eg.name) // st
2.方法调用
-
直接使用变量名加点(.)调用方法
eg.text() // 'st age is 18 '
3.索引式访问
-
使用变量名后跟方括号 ([]) 并传入对应的键名，可以通过字符串或数值作为键名
console.log(eg["name"]) // st
4.for in遍历数组
-
可以通过 for...in 循环遍历对象的所有可枚举属性，但不包括原型链上的属性
for (let key in eg){ console.log(key) } // name // age // text
4）日期对象
1.创建当前日期和时间的对象实例
var now_day = new Date();
// undefined
now_day
// Wed Jun 12 2024 17:18:39 GMT+0800 (中国标准时间)
2.创建指定日期和时间的对象实例
var appointed_day = new Date(2023, 6, 5, 10, 30, );
// undefined
appointed_day
// Wed Jul 05 2023 10:30:00 GMT+0800 (中国标准时间)
3.获取日期和时间信息
let d0 = new Date();
d0.getFullYear();
// 获取年份（四位数）
d0.getMonth();
// 获取月份（0-11）（0表示一月，11表示十二月）
d0.getDate();
// 获取日（月中的某一天）
d0.getDay();
// 获取星期
d0.getHours();
// 获取小时
d0.getMinutes();
// 获取分钟
d0.getSeconds();
// 获取秒数
d0.getMilliseconds();
// 获取毫秒数
d0.getTime();
// 获取时间戳
4.设置日期和时间
var date = new Date();
date.setFullYear(2024);
// 设置年份
date.setMonth(8);
// 设置月份（表示一月，11表示十二月）
date.setDate(15);
// 设置日期（月中的某一天）
date.setHours(18);
// 设置小时
date.setMinutes(45);
// 设置分钟
date.setSeconds(30);
// 设置秒数
5.格式化时间
var date = new Date();
var formattedDate = date.toLocaleDateString();
// 格式化为本地日期字符串('2024/6/12')
var formattedTime = date.toLocaleTimeString();
// 格式化为本地时间字符串('17:22:37')
var formattedDateTime = date.toLocaleString();
// 格式化为本地日期和时间字符串('2024/6/12 17:22:37')
5）json对象
var eg={name:"ST",age:18}
1.序列化（stringify）
-
将 JS 中的对象类型转换为 json’‘ 字符串
var new_eg=JSON.stringify(eg) console.log(new_eg,typeof new_eg) // {"name":"ST","age":18} string
2.反序列化 (parse)
-
将 json’‘ 字符串 转换为 JS 中的对象类型
var new_eg_2=JSON.parse(new_eg) console.log(new_eg_2,typeof new_eg_2) // {name: 'ST', age: 18} 'object'
6）正则对象
- 使用RegExp对象来创建和操作正则表达式
// 方式一
let reg = new RegExp(正则表达式);
// 方式二
let reg1 = /正则表达式/
| 语法 | 介绍 | |
|---|---|---|
| test() | 测试字符串是否匹配正则表达式，并返回布尔值 | |
| exec() | 在字符串中搜索匹配正则表达式的内容，并返回结果数组（没有返回null） | |
| match() | 在字符串中搜索匹配正则表达式的内容，并返回结果数组（没有返回null） | |
| search() | 在字符串中搜索匹配正则表达式的内容，并返回第一个匹配的索引位置（没有返回-1） | |
| replace() | 将匹配正则表达式的内容替换为指定的字符串，并返回新的字符串。 | |
| flags | 返回正则表达式的修饰符标志字符串。 |
1.test()
var str = "Hello, world!";
var pattern = /Hello/;
var result = pattern.test(str);
console.log(result); // 输出：true
2.exec()
var str = "Hello, world!";
var pattern = /l+/g;
var result = pattern.exec(str);
console.log(result); // 输出：["ll"]
3.match()
var str = "Hello, world!";
var pattern = /l+/g;
var result = str.match(pattern);
console.log(result); // 输出：["ll", "l"]
4.search()
var str = "Hello, world!";
var pattern = /lo/;
var result = str.search(pattern);
console.log(result); // 输出：3
5.replace()
var str = "Hello, world!";
var pattern = /o/g;
var replacement = "a";
var result = str.replace(pattern, replacement);
console.log(result); // 输出：Hella, warld!
6.flags
var pattern = /hello/gi;
console.log(pattern.flags); // 输出：gi
7）math对象
| 语法 | 功能 |
|---|---|
| abs(x) | 回数的绝对值 |
| exp(x) | 返回 e 的指数 |
| floor(x) | 对数进行下舍入 |
| log(x) | 返回数的自然对数（底为e） |
| max(x,y) | 返回 x 和 y 中的最高值 |
| min(x,y) | 返回 x 和 y 中的最低值 |
| pow(x,y) | 返回 x 的 y 次幂 |
| random() | 返回 0 ~ 1 之间的随机数 |
| round(x) | 把数四舍五入为最接近的整数 |
| sin(x) | 返回数的正弦 |
| sqrt(x) | 返回数的平方根 |
| tan(x) | 返回角的正切 |
【三】JavaScript之DOM
1）概念
- DOM：文档对象模型（Document Object Model）
- BOM：浏览器对象模型（Browser Object Model）
- 是JavaScript与网页内容及浏览器环境进行交互的两种核心概念
2）DOM（文档对象模型）
1.概念
- 是一个编程接口，它以树状结构来表示HTML或XML文档
2.实例
document.getElementById(id):
通过元素ID获取DOM元素对象。
element.querySelector/pseudo-class:
根据CSS选择器或伪类选择DOM元素对象。
element.appendChild(newElement):
向指定元素添加子元素。
element.setAttribute(name, value):
设置元素属性值。
element.innerText/innerHTML:
获取或设置元素内的文本内容或HTML内容。
3）BOM（浏览器对象模型）
1.概念
- 是浏览器提供的API集合，主要用于处理与浏览器环境相关的任务
2.示例
window.open(url[, name[, features]]):
打开新的浏览器窗口或tab访问指定URL。
window.location.href:
获取当前页面的URL地址，并可用于更改页面位置。
window.history.back():
返回历史记录中的上一页。
navigator.userAgent:
获取浏览器的信息，例如类型、版本等。
4）Window对象
- 是JavaScript中表示浏览器窗口的全局对象，其提供了一系列方法操作和管理窗口
1.open（）
-
打开新窗口或获取对一个已存在的窗口的引用
window.open(url,target,features) // url：指定的网址 // target：_back 打开新窗口(默认)、_self 原地打开 // features：指定窗口的大小 let newWindow = window.open("https://www.baidu.com/", "_blank",'height=400px,width=400px');
2.close（）
- 关闭窗口
3.setTimeout（）
-
在指定的时间延迟后执行一次指定的代码
setTimeout(function(){ console.log('延迟结束') }, 100); // 1秒后执行指定函数
4.setInterval（）
-
以固定的时间间隔重复执行指定的函数或者一段代码。
setInterval(function(){ console.log('延迟结束') }, 200); // 每2秒执行一次指定函数
5.alert（）
-
显示一个带有指定消息和一个确认按钮的警告框
window.alert("Hello, World!");
6.confirm（）
-
显示一个带有指定消息和两个按钮（确认和取消）的对话框
if (window.confirm("Are you sure?")) { // 用户点击了确认按钮 } else { // 用户点击了取消按钮 }
7.prompt（）
-
显示一个带有指定消息和一个文本输入框的对话框
let name = window.prompt("Please enter your name:");
8.innerHeight 属性
-
返回浏览器窗口的内部高度（即视口的高度）
-
以像素为单位，不包括浏览器的工具栏、滚动条等元素
let windowHeight = window.innerHeight; console.log(windowHeight); // 输出当前窗口的视口高度
9.innerWidth 属性
-
返回浏览器窗口的内部宽度（即视口的宽度）
-
以像素为单位，不包括浏览器的工具栏、滚动条等元素
let windowWidth = window.innerWidth; console.log(windowWidth); // 输出当前窗口的视口宽度
10.监听 resize 事件
-
需要注意的是，这两个属性返回的值会随着窗口的大小调整而改变
-
因此如果需要监控窗口大小的改变，可以通过监听 resize 事件来实现
window.addEventListener("resize", function() { let windowHeight = window.innerHeight; let windowWidth = window.innerWidth; console.log("Window Height:", windowHeight); console.log("Window Width:", windowWidth); });
11.window.opener
- 是指打开当前窗口的那个窗口对象。它是 Window 对象的一个属性，用于在当前窗口中引用到打开它的父窗口或者来源窗口。
场景一： window.open()
-
当前窗口是通过使用 JavaScript 的 window.open() 方法打开的弹出窗口时，可以使用 window.opener 来引用打开它的父窗口
let popup = window.open("popup.html"); // 打开一个弹出窗口 -
然后，在弹出窗口 popup.html 中的 JavaScript 代码中，可以通过 window.opener 引用到父窗口：
let parentWindow = window.opener; console.log(parentWindow); // 输出父窗口对象
场景二： postMessage() 方法
-
当前窗口是通过其他窗口向其发送消息（使用 postMessage() 方法）时，可以使用 event.source 属性来获取消息来源窗口，并通过 window.opener 来引用该来源窗口
let currentWindow = window.open("current.html"); // 打开当前窗口 // 向当前窗口发送消息 currentWindow.postMessage("Hello", "http://example.com"); -
然后，在当前窗口 current.html 中的 JavaScript 代码中，通过监听 message 事件接收来自来源窗口的消息，并使用 event.source 和 window.opener 引用到来源窗口：
window.addEventListener("message", function(event) { let message = event.data; let sourceWindow = event.source; let openerWindow = window.opener; console.log("Message:", message); console.log("Source Window:", sourceWindow); console.log("Opener Window:", openerWindow); });
5）Window子对象
- 如果是Window的子对象，Window可以不写
1.window.document
-
此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。
-
通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素
// 获取页面标题 let pageTitle = window.document.title; console.log(pageTitle);
2.window.location
-
此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。
-
通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面
// 在新标签页中打开一个 URL window.location.href = 'https://example.com';
| 语法 | 功能 |
|---|---|
| window.location.href | 获取当前页面的完整 URL（包括协议、域名、路径等） |
| window.location.protocol | 获取当前页面的协议部分（例如 'http:' 或 'https:'） |
| window.location.host | 获取当前页面的主机（域名和端口号）部分 |
| window.location.hostname | 获取当前页面的主机名部分 |
| window.location.port | 获取当前页面的端口号部分 |
| window.location.pathname | 获取当前页面的路径部分 |
| window.location.search | 获取当前页面的查询参数部分（即 URL 中问号后面的内容） |
| window.location.hash | 获取当前页面的片段标识部分（即 URL 中井号后面的内容） |
| window.location.assign() | 将当前页面重定向到指定的 URL |
| window.location.reload() | 重新加载当前页面 |
I. window.location.href
-
获取当前页面的完整 URL（包括协议、域名、路径等）
let currentURL = window.location.href; console.log(currentURL); window.href = url // 跳转到目标地址
II. window.location.protocol
-
获取当前页面的协议部分（例如 'http:' 或 'https:'）
let protocol = window.location.protocol; console.log(protocol);
III. window.location.host
-
获取当前页面的主机（域名和端口号）部分
let host = window.location.host; console.log(host);
IV. window.location.hostname
-
获取当前页面的主机名部分
let hostname = window.location.hostname; console.log(hostname);
V. window.location.port
-
获取当前页面的端口号部分
let port = window.location.port; console.log(port);
VI. window.location.pathname
-
获取当前页面的路径部分
let pathname = window.location.pathname; console.log(pathname);
VII. window.location.search
-
获取当前页面的查询参数部分（即 URL 中问号后面的内容）
let searchParams = window.location.search; console.log(searchParams);
VIII. window.location.hash
-
获取当前页面的片段标识部分（即 URL 中井号后面的内容）
let hash = window.location.hash; console.log(hash);
IX. window.location.assign()
-
将当前页面重定向到指定的 URL
window.location.assign("http://example.com");
X window.location.reload()
-
重新加载当前页面
window.location.reload();
3.window.history
-
此子对象用于操作浏览器的历史记录，包括向前和向后导航。
-
通过 window.history，可以使用一些方法来在历史记录中向前或向后导航，以及获取当前历史记录的状态数量
// 后退到上一个页面 window.history.back();
| 语法 | 功能 |
|---|---|
| window.history.length | 返回当前会话的历史记录条目数 |
| window.history.back() | 加载上一个历史记录。相当于用户点击浏览器的后退按钮 |
| window.history.forward() | 加载下一个历史记录。相当于用户点击浏览器的前进按钮 |
| window.history.go() | 根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页 |
| window.history.pushState() | 向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL |
| window.history.replaceState() | 替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL |
I. window.history.length
-
返回当前会话的历史记录条目数
let historyLength = window.history.length; console.log(historyLength);
II. window.history.back()
-
加载上一个历史记录。相当于用户点击浏览器的后退按钮
window.history.back();
III. window.history.forward()
-
加载下一个历史记录。相当于用户点击浏览器的前进按钮
window.history.forward();
IV. window.history.go()
-
根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页
// 后退两个历史记录 window.history.go(-2); // 前进一个历史记录 window.history.go(1); // 重新加载当前页 window.history.go();
V. window.history.pushState()
-
向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL
// 添加新的历史记录状态 window.history.pushState({ page: 1 }, "Page 1", "/page1.html");
VI. window.history.replaceState()
-
替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL
// 替换当前历史记录状态 window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");
4.window.navigator
-
此子对象提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等
// 要获取用户代理字符串 let userAgent = window.navigator.userAgent; console.log(userAgent);
| 语法 | 功能 |
|---|---|
| window.navigator.userAgent | 返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息 |
| window.navigator.platform | 返回操作系统平台，如 "Win32"、"MacIntel" 等 |
| window.navigator.vendor | 返回浏览器的厂商或供应商名称 |
| window.navigator.language | 返回浏览器的首选语言，通常是用户操作系统的默认语言 |
| window.navigator.cookieEnabled | 返回一个布尔值，表示浏览器是否启用了 cookie |
| window.navigator.plugins | 返回一个包含浏览器插件列表的 PluginArray 对象 |
I. window.navigator.userAgent*
-
返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息
-
该方法可以用来校验反爬程序
let userAgent = window.navigator.userAgent; console.log(userAgent);
II. window.navigator.platform*
-
返回操作系统平台，如 "Win32"、"MacIntel" 等
let platform = window.navigator.platform; console.log(platform);
III. window.navigator.vendor
-
返回浏览器的厂商或供应商名称
let vendor = window.navigator.vendor; console.log(vendor);
IV. window.navigator.language
-
返回浏览器的首选语言，通常是用户操作系统的默认语言
let language = window.navigator.language; console.log(language);
V. window.navigator.cookieEnabled
-
返回一个布尔值，表示浏览器是否启用了 cookie
let cookieEnabled = window.navigator.cookieEnabled; console.log(cookieEnabled);
VI. window.navigator.plugins
-
返回一个包含浏览器插件列表的 PluginArray 对象
let plugins = window.navigator.plugins; console.log(plugins);