javascript清晰的快速入门
javascript介绍
JavaScript是一种高级的、解释型的脚本语言，常用于为网页添加交互性和动态性。它是一种基于对象和事件驱动的语言，最初由网景公司（Netscape）在1995年开发并命名为JavaScript。
JavaScript通常用于前端开发，用于操作HTML元素、处理用户输入、响应事件等。它可以通过在HTML文件中嵌入`<script>`标签来引入和执行。也可以将JavaScript代码放在外部文件中，并通过`<script src="filename.js"></script>`标签引用。
JavaScript具有以下特点：
1. **简单易学：** JavaScript语法类似于C语言，易于学习和理解。它使用动态类型，无需声明变量类型，具有灵活性。
2. **与HTML和CSS集成：** JavaScript可以直接操作HTML元素和CSS样式，动态地改变网页的内容和外观。
3. **跨平台：** JavaScript可以在几乎所有的现代浏览器上运行，包括桌面和移动设备。
4. **面向对象：** JavaScript是一种基于对象的语言，支持面向对象编程的特性，如封装、继承和多态。
5. **事件驱动：** JavaScript可以通过事件监听和处理来响应用户的操作，例如点击按钮、输入文本等。
6. **强大的库和框架支持：** JavaScript有许多流行的库和框架，如jQuery、React、Vue.js等，可以加快开发速度和提供更丰富的功能。
除了在网页中使用，JavaScript也可以在服务器端运行，称为Node.js。Node.js使用V8引擎解释和执行JavaScript代码，使得JavaScript可以用于开发服务器端应用程序。
总之，JavaScript是一种广泛应用于网页开发和服务器端开发的脚本语言，具有丰富的特性和强大的生态系统，是现代Web开发中必不可少的一部分。
1.js组成部分
JavaScript可以分为以下几个主要的组成部分：
1. **核心语言（Core Language）：** 核心语言是JavaScript的基础，包括变量、数据类型、运算符、控制结构（如条件语句和循环）、函数等。这些语言特性构成了JavaScript的基本语法和逻辑。
2. **DOM（Document Object Model）：** DOM是JavaScript的文档对象模型，它提供了对HTML文档的结构化访问和操作。使用DOM，JavaScript可以通过获取和修改文档中的元素、属性和样式，实现对网页的动态更新和交互。
3. **BOM（Browser Object Model）：** BOM是JavaScript的浏览器对象模型，它提供了对浏览器窗口和浏览器功能的访问和控制。BOM包括Window对象、Navigator对象、Location对象等，通过BOM，JavaScript可以控制浏览器的行为，例如打开新窗口、获取浏览器信息等。
4. **API（Application Programming Interface）：** API是一组提供给开发者使用的接口，用于访问和操作特定功能或服务。JavaScript可以使用各种API，例如浏览器提供的Web API（如Geolocation API、Fetch API）、第三方库和框架的API（如jQuery、React）等。API可以扩展JavaScript的功能，使其能够处理更多的任务和场景。
以上是JavaScript的主要组成部分，它们相互配合，使得JavaScript能够实现丰富的功能和交互效果。核心语言提供了基础的语法和逻辑，DOM和BOM提供了访问和操作网页和浏览器的能力，而API则提供了各种功能和服务的接口。这些组成部分共同构成了JavaScript的生态系统，使其成为一种强大的脚本语言。
2.js之hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- js标签 在里面写js相关的内容 -->
<script>
// 这是js弹窗 hello word 是一个需要被弹出的文本内容
alert("hello word")
document.write("将内容打印到网页上")
</script>
</body>
</html>3.js书写的位置
js和css一样有很多书写方式写在页面上让其展现效果
1.行内式js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 写在a标签的href属性上 -->
<a href="javascript:alert('我是弹窗')"></a>
<!-- 写在div标签上，是一个点击事件 -->
<div onclick="alert('我是弹窗')">点击</div>
<!--
注:onclick是一个点击事件，点击元素时会执行jS代码
-->
</body>
</html>2.内嵌式js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 在html页面写一个script标签，在标签内部写js代码 -->
<script type="text/javascript">
document.write("打印出内容")
alert("这是内容")
</script>
</body>
</html>3.外链式js代码
第一步，创建扩展名是js的文件，例如:zjq.js? ，zhao.js，?qdf.js
?第二步引用外部的js文件
注:引用js的script标签可以在body标签里面 ，也可以在head标签里面，看当时的需求而定！！！！
?4.js注释和规范
注释用来在源码中增加提示、笔记、建议、警告等信息，可以帮助阅读和理解源码。在调试时，可以用来将一段代码屏蔽掉，防止其运行。
JavaScript的注释分为单行注释 // 和多行注释 /* */ 两种。
1.在单行注释中，在 // 后的文本都会视为注释，用法如下。
function comment() {
? // 这是单行注释
? console.log("Hello world!"); // 这是单行注释
}
comment();
2.在多行注释中，使用 /* 和 */ 包裹的文本就会视为注释，用法如下：
function comment() { ? /* 单行注释 */ ? /* 多行注释， ? ? ?直到终止符号才结束 */ ? console.log("Hello" + /* 引入x的值 */ + " world!"); } comment();
二、JavaScript注释使用建议
注释的规范使用是可以方便他人阅读你的代码，同时，当你以后再次看的时候，也能很快回忆起。**写注释的时候，请记得写正确的注释，错误或有歧义的注释不如不写注释。**以下是本人对注释使用的一些心得，各位读者有别的想法可以提出，大家共同讨论。
?
?5.变量
console.log(23423425235)
1,变量指的是在程序中保存数据的一个容器
2,变量是计算机内存中存储数据的一个标识，根据变量名可以获取到内存中的存储数据
3,意思就是说在内存中存储一个数据，然后给和这个数据起一个名字，为了方面后期对数据进行相关的操作
4,语法: var 变量名 = 值
// 定义一个变量
var num;
//给一个变量赋值,因为已经定义过了，只需要赋值
num=12
//定义一个变量同时给其赋值
var num2=234234;6.变量规范和规则
规则：必须遵守，不遵守就是错的
? ? 1.一个变量名称可以由字母，数字，下划线组成，以及美元符号$
? ? 2.严格区分大小写
? ? 3.不能由数组开头
? ? 4.不能是保留字或者关键字
规范: ?建议遵守的是(开发者默认的)，不遵守不会报错
? ? 1.变量名尽量是语义化，知名见意
? ? 2.遵守驼峰命名法，由多个单词组成，首字母大写
? ? 3.不要使用中文
7.数据类型
1、Undefined
Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。
2、Null
Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。
3、Boolean
即布尔类型，该类型有两个值：true、false。需要注意的是，Boolean类型的字面值true和false是区分大小写的。也就是说，True和False(以及其它的混合大小形式)都不是Boolean值，只是标识符。
4、Number
该类型的表示方法有两种形式，名列前茅种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。
//整数
const num=234234;
//浮点数
const number=234234.2345、String
String类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。
const str="字符串"
const str='字符串'
//一样的效果6、Symbol类型
符号 (Symbols) 是 ECMAScript 第 6 版新定义的。符号类型是少数的并且是不可修改的。Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述
7、Object
Object数据类型，称为对象，是一组数据和功能（函数）的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名（包含空字符串在内的任意字符串）的属性。
const obj={'name':赵建强,age:234}
//这样的就是obj对象类型的数据8、Array
JavaScript 数组用方括号书写，数组的项目由逗号分隔。
创建数组的方法：
1.空数组
var arr=new Array()
2. 利用数组
var arr=[]
3.添加内容的数组
var arr=[1,"你",true]9、Function
ECMAScript中的函数是对象，与其他引用类型一样具有属性和方法。因此，函数名实际是一个指向函数对象的指针。
function 方法名字(形参){ //形参看需求
//代码体
}8.检测数据类型
1.?typeof
可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）；
可以使用typeof判断变量是否存在（如if(typeof a!="undefined"){...}）；
Typeof 运算符的问题是无论引用的对象是什么类型 它都返回object
typeof {} // object
typeof [1,2] // object
typeof /\s/ //object
?.2.instanceof
原理 因为A instanceof B 可以判断A是不是B的实例，返回一个布尔值，由构造类型判断出数据类型
console.log(arr instanceof Array ); // true
console.log(date instanceof Date ); // true
console.log(fn instanceof Function ); // true
//注意： instanceof 后面一定要是对象类型，大小写不能写错，该方法试用一些条件选择或分支9.数据类型转换
一：转数值
1.Numble();
语法：Numble(要转换的内容)
结果：转换好数值类型的结果
如果转换的不是数值则输出NaN
2.parseInt();
语法：parseInt(要转换的内容)
结果：转换好数值类型的结果
一个一个解析，检测到不是数字之后就不输出后面的内容
3.parseFloat();
语法：parseFloat(要转换的内容)
结果：转换好数值类型的结果
可以解析小数点
二：转字符串
1.String()
语法：String(要转换的内容)
结果：转换好字符串类型的结果
2.toString()
语法：要转换的内容.toString()
结果：转换好字符串的结果
3.隐形转换
+号一边是字符串，另一边就会隐形转换成字符串
例:
var num = 20;
var res = num + '11'
console.log(res)
输出结果为:2011
三：转布尔
Boolean();
语法：Boolean(要转换的内容)
结果：转换好的数值类型
温馨提示：
这五个值转换成布尔为false的内容：数字：0；NaN；空字符串：' '；undefined；null
10.js运算符
JavaScript中包含多种运算符，用于执行各种数学和逻辑操作。以下是JavaScript中常用的运算符：
1. **算术运算符（Arithmetic Operators）：** 用于执行基本的算术计算，例如加法、减法、乘法和除法。 ? ?- 加法：+ ? ?- 减法：- ? ?- 乘法：* ? ?- 除法：/ ? ?- 取模（取余数）：%? ? ?- 自增：++ ? ?- 自减：--2. **赋值运算符（Assignment Operators）：** 用于将值赋给变量。 ? ?- 简单赋值：= ? ?- 加法赋值：+= ? ?- 减法赋值：-= ? ?- 乘法赋值：*= ? ?- 除法赋值：/= ? ?- 取模赋值：%= ? ?- 左移赋值：<<= ? ?- 右移赋值：>>= ? ?- 无符号右移赋值：>>>= ? ?- 按位与赋值：&= ? ?- 按位或赋值：|= ? ?- 按位异或赋值：^=3. **比较运算符（Comparison Operators）：** 用于比较两个值并返回布尔值（true或false）。 ? ?- 相等：== ? ?- 不相等：!= ? ?- 全等（值和类型都相等）：=== ? ?- 不全等（值或类型有一个不相等）：!== ? ?- 大于：> ? ?- 小于：< ? ?- 大于等于：>= ? ?- 小于等于：<=4. **逻辑运算符（Logical Operators）：** 用于组合和操作布尔值。 ? ?- 逻辑与：&& ? ?- 逻辑或：|| ? ?- 逻辑非：!5. **位运算符（Bitwise Operators）：** 用于对二进制数进行位操作。 ? ?- 按位与：& ? ?- 按位或：| ? ?- 按位异或：^ ? ?- 按位非：~ ? ?- 左移：<< ? ?- 右移：>> ? ?- 无符号右移：>>>6. **条件运算符（Conditional Operator）：** 也被称为三元运算符，用于根据条件选择不同的值。 ? ?- 条件 ? 结果1 : 结果27. **typeof运算符：** 用于确定给定变量或表达式的数据类型。 ? ?- typeof 变量8. **delete运算符：** 用于删除对象的属性或数组中的元素。 ? ?- delete 对象.属性 ? ?- delete 数组[索引]
以上是JavaScript中常用的运算符。通过运算符，可以进行数学计算、赋值、比较、逻辑操作等，帮助开发者实现各种复杂的功能和逻辑。
11.三目运算符
语法: 表达式1？表达式2：表达式3
表达式1是一个条件 ? 值为boolean类型
表达式1是 true 就执行表达式2
表达式1是 false就执行表达3
const a=10>3?a=23:a=456; //如果a大于3成立就给a重新赋值为23,反之就是456
12.流程控制语句
谓的流程控制就是控制代码的执行顺序。
流程语句分类：
- 顺序结构: 按照定义的顺序，从上到下依次执行。
- 分支结构: 根据不同的情况，执行分支代码
- 循环结构: 重复做某一件事情
分支结构
1.if语句
if(条件表达式){ ? ?//执行语句 } if()里面的条件表达式满足的话执行{}里面的语句 案例 ?一 ? 弹出一个输入框 ?要求输入用户的年龄 ? 如果年龄大于等于18岁的年龄，输入可以进入网吧
2.if-else
if(条件表达式){
//执行语句
}else{
// 执行语句
}
表达式满足真 执行if语句 ，反之执行 else语句
案例二 判断闰年还是平年
接受弹出的输入框的数据，进行判断 。要么弹出闰年 要么弹出平年3,if-else if-else
var a=90
if(a>90){
//执行语句
}else if(a>60){
//执行语句
}else{
//执行最后的语句
}
案例三 浏览器页面弹出输入框请输入成绩，根据输入的成绩进行判断成绩的等级(自我解决)4.switch 语句
语法:
switch (key) {
case value:
break;
case value:
break;
default:
break;
}
switch注意:
1. key: 通常是变量
2. value值的类型与key一样才行
3.如果case里面没有break就执行下一个
案例:
var key=15
switch (key) {
case 10:
alert(2)
break;
case 15:
alert(1)
break;
default:
alert(100)
break;
}
满足一个条件就会执行相对应的数据5.if else if 与switch区别
区别 ：
确定值的时候用switch
确定范围用if
效率上switch高 ，只要满足条件就会直接跳到它所需要执行的代码上
循环结构
循环目的：重复执行某些代码
循环语句有:
for循环
while循环
do..while 循环1 ，for循环
for 重置执行某些的代码，通常跟计数有关系
语法结构:
for(初始化变量;条件表达式;操作表达式){
//循环体
}
1.初始化变量是用var 声明一个普通的变量，通常用于计算器使用
2.条件表达式就是用于判断条件是否需要再次被执行，也就是判断 终止的条件
3.操作表达式 每次循环最后执行的代码，经常是变量的更行
for(var i=0;i<20;i++){
console.log(i)
}
输出结果1到20
案例一 用弹出输入框 输入班级的人数 ，然后输出班级每个人成绩最后相加，弹出总成绩
<script>
var name=prompt("请输入班级人数:")
var sum=0
for(var i=1;i<=name;i++){
var age=prompt("请输入成绩:")
sum+=Number(age)
}
alert("总成绩是:"+sum)
</script>
倒三角案例：
for(var i=0;i<5;i++){
for(var j=i;j<5;j++){
document.write("*")
}
document.write("<br/>")
}
9*9乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+'='+i*j,'\t')
}
document.write("<br/>")
}2.while循环
while(true){
//只要括号里面表达式是true就一直执行下去
consoe.log("执行下去")
}
const cc=0
while(cc>12){
//只要括号里面表达式大于12就会停止运行
consoe.log("执行下去")
cc++
}
13.js函数代码
JavaScript中函数是一种可重复使用的代码块，用于执行特定的任务或计算。以下是JavaScript函数的一些重要知识点：
1. **函数定义和调用：** 函数可以通过`function`关键字来定义，然后可以通过函数名加括号来调用函数。例如：? ?function myFunction() { ? ? ?// 函数体 ? ?} ? ?myFunction(); // 调用函数 ? ?
2. **函数参数：** 函数可以接受参数，用于传递数据给函数。参数可以在函数定义时指定，调用函数时传入具体的值。例如：? ?function greet(name) { ? ? ?console.log("Hello, " + name + "!"); ? ?} ? ?greet("Alice"); // 输出: Hello, Alice! ? ?
3. **函数返回值：** 函数可以使用`return`语句返回一个值。返回值可以在函数调用时被接收并使用。例如：? ?function add(a, b) { ? ? ?return a + b; ? ?} ? ?var result = add(2, 3); // result的值为5 ? ?
4. **函数作用域：** JavaScript中的函数具有自己的作用域，在函数内部声明的变量只在函数内部可见。这意味着函数外部无法访问函数内部的变量。例如：? ?function myFunction() { ? ? ?var x = 10; // 函数内部的变量 ? ? ?console.log(x); ? ?} ? ?console.log(x); // 报错：x未定义 ? ?
5. **匿名函数和立即执行函数：** JavaScript中可以使用匿名函数（没有函数名）来定义函数。匿名函数可以直接执行，这种称为立即执行函数（Immediately Invoked Function Expression，IIFE）。例如：? ?(function() { ? ? ?console.log("立即执行的匿名函数"); ? ?})(); ?
6. **函数表达式：** 函数表达式是将函数赋值给变量或对象属性的方式。函数表达式可以作为变量传递、作为回调函数使用，或者作为对象方法。例如：? ?var greet = function(name) { ? ? ?console.log("Hello, " + name + "!"); ? ?}; ? ?greet("Bob"); // 输出: Hello, Bob! ? ?
7. **递归函数：** 递归函数是指在函数体内调用自身的函数。递归函数常用于解决需要重复执行相同操作的问题。例如：? ?function factorial(n) { ? ? ?if (n === 0) { ? ? ? ?return 1; ? ? ?} else { ? ? ? ?return n * factorial(n - 1); ? ? ?} ? ?} ? ?console.log(factorial(5)); // 输出: 120 ? ?
8. **高阶函数：** 高阶函数是指可以接受函数作为参数或返回函数的函数。高阶函数可以用于函数的组合和封装。例如：? ?function multiplyBy(factor) { ? ? ?return function(number) { ? ? ? ?return number * factor; ? ? ?}; ? ?} ? ?var double = multiplyBy(2); ? ?console.log(double(5)); // 输出: 10 ? ?
以上是JavaScript函数的一些重要知识点。函数是JavaScript中的核心概念之一，掌握这些知识点可以帮助你更好地理解和使用JavaScript中的函数。
14.Obj对象的所有方法
JavaScript中的对象是一种复合数据类型，它可以存储键值对。对象的方法是定义在对象上的函数，用于执行特定的操作。以下是JavaScript对象数据类型的一些常用方法及其操作：
1. **Object.keys()：** 返回一个包含对象所有可枚举属性的数组。? ?const obj = { a: 1, b: 2, c: 3 }; ? ?const keys = Object.keys(obj); ? ?console.log(keys); // 输出: ["a", "b", "c"] ? ?
2. **Object.values()：** 返回一个包含对象所有可枚举属性的值的数组。? ?const obj = { a: 1, b: 2, c: 3 }; ? ?const values = Object.values(obj); ? ?console.log(values); // 输出: [1, 2, 3] ? ?
3. **Object.entries()：** 返回一个包含对象所有可枚举属性的键值对的数组。? ? ? ?const obj = { a: 1, b: 2, c: 3 }; ? ?const entries = Object.entries(obj); ? ?console.log(entries); // 输出: [["a", 1], ["b", 2], ["c", 3]] ? ?
4. **Object.assign()：** 将一个或多个源对象的属性复制到目标对象，并返回目标对象。? ?const target = { a: 1 }; ? ?const source = { b: 2, c: 3 }; ? ?const result = Object.assign(target, source); ? ?console.log(result); // 输出: { a: 1, b: 2, c: 3 } ? ?
5. **Object.hasOwnProperty()：** 判断对象是否具有指定的属性。? ?const obj = { a: 1, b: 2 }; ? ?console.log(obj.hasOwnProperty("a")); // 输出: true ? ?console.log(obj.hasOwnProperty("c")); // 输出: false ? ?
6. **Object.freeze()：** 冻结对象，使其不可修改。? ?const obj = { a: 1, b: 2 }; ? ?Object.freeze(obj); ? ?obj.a = 3; // 无效操作，对象不可修改 ? ?console.log(obj); // 输出: { a: 1, b: 2 } ? ?
7. **Object.seal()：** 封闭对象，使其属性不可添加或删除，但属性值可修改。? ?const obj = { a: 1, b: 2 }; ? ?Object.seal(obj); ? ?obj.c = 3; // 无效操作，无法添加新属性 ? ?delete obj.a; // 无效操作，无法删除属性 ? ?obj.b = 4; // 有效操作，修改属性值 ? ?console.log(obj); // 输出: { a: 1, b: 4 } ? ?
8. **Object.create()：** 创建一个新对象，使用现有对象作为原型。? ? ?const obj = { a: 1 }; ? ?const newObj = Object.create(obj); ? ?console.log(newObj); // 输出: {} ? ?console.log(newObj.a); // 输出: 1，继承自原型对象 ? ?
9. **Object.getPrototypeOf()：** 返回指定对象的原型对象。
?? ?const obj = {}; ? ?const proto = Object.getPrototypeOf(obj); ? ?console.log(proto); // 输出: {} ? ?
10. **Object.defineProperty()：** 定义对象的新属性或修改现有属性的特性。? ? const obj = {}; ? ? Object.defineProperty(obj, "name", { ? ? ? value: "Alice", ? ? ? writable: false, // 不可写 ? ? ? enumerable: true, // 可枚举 ? ? ? configurable: true, // 可配置 ? ? }); ? ? console.log(obj.name); // 输出: Alice ? ? obj.name = "Bob"; // 无效操作，属性不可写 ? ? console.log(obj.name); // 输出: Alice ? ?
以上是JavaScript对象数据类型的一些常用方法及其操作。这些方法可以用于操作和处理JavaScript中的对象，帮助开发者更方便地管理和操作对象的属性和特性。
15.数组相关方法
JavaScript中的数组是一种特殊的对象，用于存储多个值。数组有许多内置的方法，用于执行各种操作。以下是JavaScript数组的常用方法：
1. **push()：** 将一个或多个元素添加到数组的末尾，并返回新数组的长度。? ? ?const arr = [1, 2, 3]; ? ?const length = arr.push(4, 5); ? ?console.log(arr); // 输出: [1, 2, 3, 4, 5] ? ?console.log(length); // 输出: 5 ? ?
2. **pop()：** 移除数组的最后一个元素，并返回该元素的值。? ? ?const arr = [1, 2, 3]; ? ?const lastElement = arr.pop(); ? ?console.log(arr); // 输出: [1, 2] ? ?console.log(lastElement); // 输出: 3 ? ?
3. **shift()：** 移除数组的第一个元素，并返回该元素的值。? ? ? ?const arr = [1, 2, 3]; ? ?const firstElement = arr.shift(); ? ?console.log(arr); // 输出: [2, 3] ? ?console.log(firstElement); // 输出: 1 ? ?
4. **unshift()：** 将一个或多个元素添加到数组的开头，并返回新数组的长度。? ?const arr = [1, 2, 3]; ? ?const length = arr.unshift(0, -1); ? ?console.log(arr); // 输出: [-1, 0, 1, 2, 3] ? ?console.log(length); // 输出: 5 ? ?
5. **concat()：** 将一个或多个数组合并为一个新数组。? ?const arr1 = [1, 2]; ? ?const arr2 = [3, 4]; ? ?const newArr = arr1.concat(arr2); ? ?console.log(newArr); // 输出: [1, 2, 3, 4] ? ?
6. **slice()：** 返回一个从原数组中选定元素的浅拷贝数组。? ? ? ?const arr = [1, 2, 3, 4, 5]; ? ?const newArr = arr.slice(2, 4); ? ?console.log(newArr); // 输出: [3, 4] ? ?
7. **splice()：** 从数组中添加/删除元素，或替换元素。? ?const arr = [1, 2, 3, 4, 5]; ? ?arr.splice(2, 2, "a", "b"); ? ?console.log(arr); // 输出: [1, 2, "a", "b", 5]
8. **join()：** 将数组的所有元素连接成一个字符串。? ?const arr = ["Hello", "World"]; ? ?const str = arr.join(" "); ? ?console.log(str); // 输出: "Hello World" ? ?
9. **indexOf()：** 返回数组中第一个找到的指定元素的索引，如果没有找到则返回-1。? ?const arr = [1, 2, 3, 4, 5]; ? ?const index = arr.indexOf(3); ? ?console.log(index); // 输出: 2 ? ?
10. **includes()：** 判断数组是否包含指定元素，返回一个布尔值。? ? ? const arr = [1, 2, 3, 4, 5]; ? ? const isIncluded = arr.includes(3); ? ? console.log(isIncluded); // 输出: true ? ?
11. **forEach()：** 遍历数组的每个元素，并对每个元素执行提供的函数。? ? const arr = [1, 2, 3]; ? ? arr.forEach(function(element) { ? ? ? console.log(element); ? ? }); ? ? // 输出: ? ? // 1 ? ? // 2 ? ? // 3 ? ?
12. **map()：** 创建一个新数组，其中的每个元素是调用提供的函数后的返回值。? ? const arr = [1, 2, 3]; ? ? const newArr = arr.map(function(element) { ? ? ? return element * 2; ? ? }); ? ? console?
除了上述提到的常用方法之外，JavaScript数组还有一些其他常用的方法，如下所示：
13. **filter()：** 创建一个新数组，其中包含通过指定函数测试的所有元素。 ? ? const arr = [1, 2, 3, 4, 5]; ? ? const newArr = arr.filter(function(element) { ? ? ? return element % 2 === 0; ? ? }); ? ? console.log(newArr); // 输出: [2, 4]14. **reduce()：** 对数组的每个元素执行一个提供的函数，并返回一个累积的结果。 ? ? ? const arr = [1, 2, 3, 4, 5]; ? ? const sum = arr.reduce(function(accumulator, currentValue) { ? ? ? return accumulator + currentValue; ? ? }); ? ? console.log(sum); // 输出: 15 ? ?15. **reduceRight()：** 从数组的最后一个元素开始，对数组的每个元素执行一个提供的函数，并返回一个累积的结果。 ? ? const arr = [1, 2, 3, 4, 5]; ? ? const sum = arr.reduceRight(function(accumulator, currentValue) { ? ? ? return accumulator + currentValue; ? ? }); ? ? console.log(sum); // 输出: 15 ? ?16. **find()：** 返回数组中通过指定函数测试的第一个元素的值。 ? ? const arr = [1, 2, 3, 4, 5]; ? ? const result = arr.find(function(element) { ? ? ? return element > 3; ? ? }); ? ? console.log(result); // 输出: 4 ? ?17. **findIndex()：** 返回数组中通过指定函数测试的第一个元素的索引。 ? ? const arr = [1, 2, 3, 4, 5]; ? ? const index = arr.findIndex(function(element) { ? ? ? return element > 3; ? ? }); ? ? console.log(index); // 输出: 3 ? ?18. **every()：** 检测数组中的所有元素是否都通过指定函数的测试。 ? ? ? const arr = [1, 2, 3, 4, 5]; ? ? const result = arr.every(function(element) { ? ? ? return element > 0; ? ? }); ? ? console.log(result); // 输出: true ? ?19. **some()：** 检测数组中是否至少有一个元素通过指定函数的测试。 ? ? ? const arr = [1, 2, 3, 4, 5]; ? ? const result = arr.some(function(element) { ? ? ? return element > 3; ? ? }); ? ? console.log(result); // 输出: true ? ?20. **sort()：** 对数组的元素进行排序。 ? ? const arr = [3, 1, 2, 5, 4]; ? ? arr.sort(); ? ? console.log(arr); // 输出: [1, 2, 3, 4, 5] ? ? //a-b 是从小到大 b-a从大到小 arr.sort((a,b)=>a-b)21. **reverse()：** 颠倒数组中元素的顺序。 ? ? ? const arr = [1, 2, 3, 4, 5]; ? ? arr.reverse(); ? ? console.log(arr); // 输出: [5, 4, 3, 2, 1] ? ?22. **toString()：** 将数组转换为字符串，并返回结果。 ? ? ? ? const arr = [1, 2, 3, 4, 5]; ? ? const str = arr.toString(); ? ? console.log(str); // 输出: "1,2,3,4,5" ? ?23. **toLocaleString()：** 将数组转换为本地化字符串，并返回结果。 ? ? const arr = [1, 2, 3, 4, 5]; ? ? const str = arr.toLocaleString(); ? ? console.log(str); // 输出: "1,2,3,4,5" ? ?
这些是JavaScript数组的一些常见方法，用于对数组进行各种操作和处理。它们可以帮助开发者更方便地操作和处理数组中的元素。?
16.字符串相关的方法
JavaScript中的字符串（String）是一种表示文本数据的数据类型。字符串是不可变的，即一旦创建，就不能被修改。JavaScript提供了许多字符串相关的方法，用于操作和处理字符串。下面是一些常用的字符串方法：
1. **length：** 返回字符串的长度。? ?const str = "Hello"; ? ?console.log(str.length); // 输出: 5 ? ?
2. **charAt()：** 返回指定索引位置处的字符。? ? ?const str = "Hello"; ? ?console.log(str.charAt(1)); // 输出: "e" ? ?
3. **concat()：** 连接两个或多个字符串，并返回新的字符串。? ?const str1 = "Hello"; ? ?const str2 = " World"; ? ?const result = str1.concat(str2); ? ?console.log(result); // 输出: "Hello World" ? ?
4. **indexOf()：** 返回指定字符或子字符串第一次出现的索引，如果没有找到则返回-1。? ? ?const str = "Hello World"; ? ?console.log(str.indexOf("o")); // 输出: 4 ? ?
5. **lastIndexOf()：** 返回指定字符或子字符串最后一次出现的索引，如果没有找到则返回-1。? ?const str = "Hello World"; ? ?console.log(str.lastIndexOf("o")); // 输出: 7 ? ?
6. **slice()：** 提取字符串的一部分，并返回一个新字符串。? ?const str = "Hello World"; ? ?console.log(str.slice(6, 11)); // 输出: "World" ? ?
7. **substring()：** 提取字符串的一部分，并返回一个新字符串。与slice()类似，但substring()不接受负索引。? ?const str = "Hello World"; ? ?console.log(str.substring(6, 11)); // 输出: "World" ? ?
8. **substr()：** 提取字符串的一部分，并返回一个新字符串。第一个参数指定开始提取的位置，第二个参数指定提取的长度。? ?const str = "Hello World"; ? ?console.log(str.substr(6, 5)); // 输出: "World" ? ?
9. **toUpperCase()：** 将字符串转换为大写。? ?const str = "Hello"; ? ?console.log(str.toUpperCase()); // 输出: "HELLO" ? ?
10. **toLowerCase()：** 将字符串转换为小写。? ? ? const str = "Hello"; ? ? console.log(str.toLowerCase()); // 输出: "hello" ? ?
11. **trim()：** 去除字符串两端的空格，并返回一个新字符串。? ? const str = " ?Hello World ?"; ? ? console.log(str.trim()); // 输出: "Hello World" ? ?
12. **replace()：** 替换字符串中的字符或子字符串，并返回一个新字符串。? ? const str = "Hello World"; ? ? const newStr = str.replace("World", "JavaScript"); ? ? console.log(newStr); // 输出: "Hello JavaScript" ? ?
13. **split()：** 将字符串分割为字符串数组，并返回该数组。? ? const str = "Hello,World"; ? ? const arr = str.split(","); ? ? console.log(arr); // 输出: ["Hello", "World"] ? ?
这些方法可以用于操作和处理JavaScript字符串。它们能够帮助开发者在处理字符串时进行各种操作，如获取字符串长度、提取子字符串、替换字符等。
16.json格式字符串
前端中经常需要处理JSON格式的字符串。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写。以下是一些在前端中处理JSON格式字符串的常见操作：
1. **JSON.parse()：** 将JSON字符串解析为JavaScript对象。 ? ? ?const jsonString = '{"name": "John", "age": 30, "city": "New York"}'; ? ?const jsonObj = JSON.parse(jsonString); ? ?console.log(jsonObj); // 输出: { name: 'John', age: 30, city: 'New York' } ? 2. **JSON.stringify()：** 将JavaScript对象转换为JSON字符串。 ? ? ?const obj = { name: 'John', age: 30, city: 'New York' }; ? ?const jsonString = JSON.stringify(obj); ? ?console.log(jsonString); // 输出: '{"name":"John","age":30,"city":"New York"}' ? 3. **处理嵌套的JSON：** ? ?如果JSON字符串中包含嵌套的对象或数组，你可以通过嵌套调用`JSON.parse()`和`JSON.stringify()`来处理。 ? ? ?const nestedJsonString = '{"name": "John", "info": {"age": 30, "city": "New York"}}'; ? ?const nestedJsonObj = JSON.parse(nestedJsonString); ? ?console.log(nestedJsonObj); // 输出: { name: 'John', info: { age: 30, city: 'New York' } } ? ?// 修改嵌套对象的值 ? ?nestedJsonObj.info.age = 31; ? ?// 转换回JSON字符串 ? ?const updatedJsonString = JSON.stringify(nestedJsonObj); ? ?console.log(updatedJsonString); 4. **处理JSON中的日期：** ? ?JSON规范并不直接支持日期对象。在处理包含日期的JSON时，你可以使用自定义的转换函数。 ? ?const jsonStringWithDate = '{"name": "John", "birthDate": "2023-01-01T12:00:00Z"}'; ? ?const jsonObjWithDate = JSON.parse(jsonStringWithDate, (key, value) => { ? ? ?if (key === 'birthDate') { ? ? ? ?return new Date(value); ? ? ?} ? ? ?return value; ? ?}); ? ?console.log(jsonObjWithDate.birthDate); // 输出: 2023-01-01T12:00:00.000Z ?
这些方法可以帮助你在前端中有效地处理JSON格式的字符串，实现数据的解析和序列化。
17.模板字符串
在JavaScript中，模板字符串是一种特殊的字符串，用于更方便地创建包含变量或表达式的字符串。模板字符串使用反引号 \`（在键盘上与 tilde ~ 共享同一个键位） 包裹字符串内容，并使用 `${}` 语法嵌入变量或表达式。以下是一些使用模板字符串的示例：
1. **基本用法：**? ?const name = 'John'; ? ?const greeting = `Hello, ${name}!`; ? ?console.log(greeting); // 输出: Hello, John! ? ?
2. **多行字符串：**
? ?使用模板字符串可以轻松创建多行字符串，而无需使用换行符。? ?const multiLineString = ` ? ? ?This is a ? ? ?multi-line ? ? ?string. ? ?`; ? ?console.log(multiLineString); ? ?/* ? ?输出: ? ? ?This is a ? ? ?multi-line ? ? ?string. ? ?*/ ? ?
3. **表达式嵌入：**
? ?模板字符串中可以嵌入任意的表达式。? ? ?const a = 5; ? ?const b = 10; ? ?const result = `The sum of ${a} and ${b} is ${a + b}.`; ? ?console.log(result); // 输出: The sum of 5 and 10 is 15. ? ?
4. **函数调用：**
? ?你可以在模板字符串中调用函数并使用函数的返回值。? ? ?function capitalize(str) { ? ? ?return str.charAt(0).toUpperCase() + str.slice(1); ? ?} ? ?const city = 'new york'; ? ?const formattedCity = `I live in ${capitalize(city)}.`; ? ?console.log(formattedCity); // 输出: I live in New york. ? ?
5. **嵌套模板字符串：**
? ?模板字符串可以嵌套在彼此内部。? ? ?const firstName = 'John'; ? ?const lastName = 'Doe'; ? ?const fullName = `My name is ${firstName} ${lastName}.`; ? ?const greetingWithFullName = `Greetings! ${fullName}`; ? ?console.log(greetingWithFullName); // 输出: Greetings! My name is John Doe. ? ?
模板字符串使得处理字符串变得更加直观和便捷，特别是在需要包含变量或表达式的场景下。
18.数字常用方法
在前端开发中，经常需要对数字进行处理和操作。以下是一些常用的数字方法和函数：
1. **toFixed()：** 将数字转换为指定小数位数的字符串表示。? ? ? ?const num = 10.3456; ? ?const fixedNum = num.toFixed(2); ? ?console.log(fixedNum); // 输出: "10.35" ? ?
2. **parseFloat() 和 parseInt()：** 分别用于将字符串转换为浮点数或整数。? ? ? ?const floatNum = parseFloat("10.25"); // 将字符串转换为浮点数 ? ?const intNum = parseInt("15"); // 将字符串转换为整数 ? ?console.log(floatNum); // 输出: 10.25 ? ?console.log(intNum); // 输出: 15 ? ?
3. **Number()：** 将字符串、布尔值或其他数据类型转换为数字。? ?const strNum = "25"; ? ?const boolNum = true; ? ?const numFromString = Number(strNum); ? ?const numFromBool = Number(boolNum); ? ?console.log(numFromString); // 输出: 25 ? ?console.log(numFromBool); // 输出: 1 (true为1，false为0) ? ?
4. **isNaN() 和 isFinite()：** `isNaN()` 用于检查一个值是否为NaN，`isFinite()` 用于检查一个值是否为有限数值。? ?console.log(isNaN(10)); // 输出: false ? ?console.log(isNaN("Hello")); // 输出: true ? ?console.log(isFinite(123)); // 输出: true ? ?console.log(isFinite(Infinity)); // 输出: false ? ?
5. **Math 对象：** 提供了许多用于数字操作的方法，比如：? ?- `Math.round()`: 将数字四舍五入到最接近的整数。 ? ?- `Math.floor()`: 返回小于或等于给定数字的最大整数。 ? ?- `Math.ceil()`: 返回大于或等于给定数字的最小整数。 ? ?- `Math.max()` 和 `Math.min()`: 返回一组数字中的最大值和最小值。 ? ?- `Math.random()`: 返回一个介于 0（包括）到 1（不包括）之间的随机小数。 ? ? ?console.log(Math.round(5.4)); // 输出: 5 ? ?console.log(Math.floor(5.9)); // 输出: 5 ? ?console.log(Math.ceil(5.1)); // 输出: 6 ? ?console.log(Math.max(10, 20, 5)); // 输出: 20 ? ?console.log(Math.min(10, 20, 5)); // 输出: 5 ? ?console.log(Math.random()); // 输出: 介于 0 到 1 之间的随机小数 ? ?
这些方法和函数可以帮助开发者在前端中对数字进行各种操作和转换。
`Math` 对象在 JavaScript 中提供了许多数学相关的方法。除了上述提到的一些常用方法外，还有一些其他有用的方法，以下是其中一些：
1. **Math.sqrt()：** 返回一个数的平方根。? ?const squareRoot = Math.sqrt(25); ? ?console.log(squareRoot); // 输出: 5 ? ?
2. **Math.pow()：** 返回一个数的指定次幂。? ? ?const power = Math.pow(2, 3); // 2的3次幂 ? ?console.log(power); // 输出: 8 ? ?
3. **Math.abs()：** 返回一个数的绝对值。? ?const absoluteValue = Math.abs(-10); ? ?console.log(absoluteValue); // 输出: 10 ? ?
4. **Math.sin()、Math.cos() 和 Math.tan()：** 分别返回一个角的正弦、余弦和正切值（以弧度为单位）。? ?const angleInRadians = Math.PI / 4; // 45度转换为弧度 ? ?console.log(Math.sin(angleInRadians)); // 输出: 0.7071 ? ?console.log(Math.cos(angleInRadians)); // 输出: 0.7071 ? ?console.log(Math.tan(angleInRadians)); // 输出: 1 ? ?
5. **Math.log() 和 Math.exp()：** 分别返回一个数的自然对数和指数。? ?const naturalLog = Math.log(Math.E); // 自然对数的底数是e，所以结果为1 ? ?console.log(naturalLog); // 输出: 1 ? ?const exponentialValue = Math.exp(2); // e的2次方 ? ?console.log(exponentialValue); // 输出: 7.389 ? ?
6. **Math.PI 和 Math.E：** 分别表示圆周率和自然对数的底数e。? ?console.log(Math.PI); // 输出: 3.141592653589793 ? ?console.log(Math.E); // 输出: 2.718281828459045 ? ?
这些方法使得在 JavaScript 中进行数学计算更加便捷，开发者可以根据项目需求选择合适的方法。
19.时间对象常用方法
在前端开发中，处理时间是一个常见的任务。JavaScript 提供了 `Date` 对象来处理日期和时间。以下是 `Date` 对象常用的方法：
1. **获取当前时间：**? ?const currentDate = new Date(); ? ?console.log(currentDate); // 输出当前日期和时间 ? ?
2. **获取特定日期和时间：**? ? ?const specificDate = new Date("2023-01-01T12:00:00"); ? ?console.log(specificDate); // 输出指定日期和时间 ? ?
3. **获取年、月、日、时、分、秒：**? ?const currentYear = currentDate.getFullYear(); ? ?const currentMonth = currentDate.getMonth(); // 月份从 0 开始，所以需要加1 ? ?const currentDay = currentDate.getDate(); ? ?const currentHour = currentDate.getHours(); ? ?const currentMinute = currentDate.getMinutes(); ? ?const currentSecond = currentDate.getSeconds(); ? ?console.log(currentYear, currentMonth + 1, currentDay, currentHour, currentMinute, currentSecond); ? ?
4. **格式化日期：**? ?const options = { year: 'numeric', month: 'long', day: 'numeric' }; ? ?const formattedDate = currentDate.toLocaleDateString('en-US', options); ? ?console.log(formattedDate); // 输出形如 "January 1, 2023" 的格式化日期 ? ?
5. **设置日期和时间：**? ? ?currentDate.setFullYear(2024); ? ?currentDate.setMonth(6); // 月份从 0 开始，所以 6 表示七月 ? ?currentDate.setDate(15); ? ?currentDate.setHours(18); ? ?currentDate.setMinutes(30); ? ?currentDate.setSeconds(0); ? ?console.log(currentDate); // 输出更新后的日期和时间 ? ?
6. **计算时间差：**? ?const startDate = new Date("2023-01-01"); ? ?const endDate = new Date("2023-12-31"); ? ?const timeDifference = endDate - startDate; // 返回毫秒数 ? ?const daysDifference = Math.floor(timeDifference / (24 * 60 * 60 * 1000)); // 转换为天数 ? ?console.log(daysDifference); // 输出日期差 ? ?
7. **获取当前时间戳：**? ? ?const timestamp = currentDate.getTime(); // 返回当前时间的毫秒表示 ? ?console.log(timestamp); ? ?
8. **其他方法：**? ?- `getDay()`: 获取星期几，返回值是 0（星期日）到 6（星期六）。 ? ?- `getUTCHours()`, `getUTCMinutes()`, 等：获取协调世界时（UTC）的小时、分钟等。 ? ?- `toUTCString()`: 将日期转换为符合 UTC 格式的字符串。
这些方法可以帮助你在前端中处理和操作日期时间信息。
20.定时器
21.BOM
BOM（浏览器对象模型）提供了一组与浏览器窗口交互的对象和方法。以下是前端BOM的一些常见操作：
1. **窗口尺寸和位置：**? ?- `window.innerWidth` 和 `window.innerHeight`: 获取浏览器窗口的内部宽度和高度。 ? ?- `window.outerWidth` 和 `window.outerHeight`: 获取浏览器窗口的外部宽度和高度。 ? ?- `window.screen.width` 和 `window.screen.height`: 获取屏幕的宽度和高度。 ? ?- `window.screen.availWidth` 和 `window.screen.availHeight`: 获取屏幕可用的宽度和高度（去除任务栏等）。 ? ?- `window.pageXOffset` 和 `window.pageYOffset`: 获取文档在水平和垂直方向上滚动的像素值。
2. **导航操作：**? ?- `window.location`: 提供了当前文档的URL信息，可以通过 `window.location.href` 获取完整的URL。 ? ?- `window.location.reload()`: 重新加载页面。 ? ?- `window.location.href = "新的URL"`: 跳转到新的URL。 ? ?- `window.history.back()` 和 `window.history.forward()`: 后退和前进浏览历史。 ? ?- `window.history.go(n)`: 在浏览历史中移动 n 步。
3. **弹窗和对话框：**? ?- `window.alert("消息")`: 弹出警告框。 ? ?- `window.confirm("消息")`: 弹出确认框，返回用户点击的是确定还是取消。 ? ?- `window.prompt("消息", "默认值")`: 弹出输入框，用户可以输入信息，返回输入的值。
4. **定时器：**? ?- `window.setTimeout(function, delay)`: 在指定的毫秒数后执行一次函数。 ? ?- `window.setInterval(function, interval)`: 每隔指定的毫秒数重复执行函数。 ? ?- `window.clearTimeout(timerId)` 和 `window.clearInterval(intervalId)`: 清除定时器。
5. **屏幕操作：**? ?- `window.open("URL", "窗口名称", "特性字符串")`: 打开新窗口。 ? ?- `window.close()`: 关闭当前窗口。
6. **信息和日志：**? ?- `console.log(message)`: 在控制台输出日志。 ? ?- `console.warn(message)`: 输出警告信息。 ? ?- `console.error(message)`: 输出错误信息。 ? ?- `console.info(message)`: 输出一般信息。
7. **其他属性和方法：**? ?- `window.navigator`: 提供浏览器相关信息，如用户代理（user agent）等。 ? ?- `window.document`: 提供对文档对象的访问。 ? ?- `window.localStorage` 和 `window.sessionStorage`: 提供本地存储和会话存储功能。 ? ?- `window.onresize` 和 `window.onscroll`: 监听窗口大小变化和滚动事件。
这些操作使得开发者可以与浏览器窗口进行交互，实现更丰富的用户体验。
22.DOM
前端的 DOM（文档对象模型）操作允许开发者通过 JavaScript 访问、修改和控制网页的内容和结构。以下是一些常见的 DOM 操作：
1. **获取元素：**? ?- `document.getElementById('id')`: 通过元素 ID 获取单个元素。 ? ?- `document.getElementsByClassName('className')`: 通过类名获取一组元素。 ? ?- `document.getElementsByTagName('tagName')`: 通过标签名获取一组元素。 ? ?- `document.querySelector('selector')`: 使用 CSS 选择器获取单个元素。 ? ?- `document.querySelectorAll('selector')`: 使用 CSS 选择器获取一组元素。
2. **操作元素内容和属性：**? ?- `element.innerHTML`: 获取或设置元素的 HTML 内容。 ? ?- `element.textContent`: 获取或设置元素的文本内容。 ? ?- `element.setAttribute('attribute', 'value')`: 设置元素的属性值。 ? ?- `element.getAttribute('attribute')`: 获取元素的属性值。 ? ?- `element.style.property = 'value'`: 修改元素的 CSS 样式。 ? ?- `element.classList.add/remove/toggle('className')`: 操作元素的类名。
3. **创建和添加元素：**? ?- `document.createElement('tagName')`: 创建新元素。 ? ?- `parentElement.appendChild(newElement)`: 将新元素添加到父元素中。 ? ?- `parentElement.insertBefore(newElement, targetElement)`: 在指定元素之前插入新元素。
4. **事件处理：**? ?- `element.addEventListener('event', function)`: 添加事件监听器。 ? ?- `element.removeEventListener('event', function)`: 移除事件监听器。 ? ?- 常见事件：`click`, `mouseover`, `submit`, `keydown` 等等。
5. **节点操作：**? ?- `parentElement.removeChild(childElement)`: 删除子节点。 ? ?- `node.parentNode`: 获取节点的父节点。 ? ?- `node.childNodes`: 获取节点的所有子节点。 ? ?- `node.firstChild` 和 `node.lastChild`: 获取第一个子节点和最后一个子节点。
6. **尺寸和位置：**? ?- `element.offsetWidth` 和 `element.offsetHeight`: 获取元素的宽度和高度。 ? ?- `element.getBoundingClientRect()`: 获取元素相对于视口的位置信息。
7. **其他常用操作：**
??- `document.getElementById('id').focus()`: 让特定元素获得焦点。 ? ?- `window.onload = function() { ... }`: 页面加载完成后执行特定操作。 ? ?- `window.scroll(x-coord, y-coord)`: 滚动到页面的指定位置。
DOM 操作可以让开发者动态地修改页面内容和行为，实现与用户交互和更丰富的用户体验。
23.DOM节点
前端对 DOM 节点的操作主要涉及节点的创建、修改、删除等方面。以下是一些常见的 DOM 节点操作：
1. **创建节点：**? ?- `document.createElement('tagName')`: 创建一个新的元素节点。 ? ?- `document.createTextNode('text')`: 创建一个包含指定文本的文本节点。
2. **添加节点：**? ?- `parentNode.appendChild(newNode)`: 将新节点添加为父节点的最后一个子节点。 ? ?- `parentNode.insertBefore(newNode, referenceNode)`: 在父节点的指定子节点之前插入新节点。
3. **修改节点内容和属性：**? ?- `node.textContent`：获取或设置节点的文本内容。 ? ?- `node.innerHTML`：获取或设置节点的 HTML 内容。 ? ?- `element.setAttribute('attribute', 'value')`: 设置节点的属性值。 ? ?- `element.getAttribute('attribute')`: 获取节点的属性值。 ? ?- `element.removeAttribute('attribute')`: 移除节点的指定属性。
4. **删除节点：**? ?- `parentNode.removeChild(childNode)`: 从父节点中删除指定子节点。 ? ?- `node.remove()`: 从其父节点中删除当前节点。
5. **复制节点：**
??- `node.cloneNode(true)`: 复制节点。如果参数为 true，会连同子节点一起复制。
6. **替换节点：**
??- `parentNode.replaceChild(newNode, oldNode)`: 用新节点替换父节点中的指定旧节点。
7. **遍历节点：**? ?- `node.childNodes`: 获取节点的所有子节点（NodeList）。 ? ?- `node.firstChild` 和 `node.lastChild`: 获取第一个子节点和最后一个子节点。 ? ?- `node.nextSibling` 和 `node.previousSibling`: 获取同级的下一个和上一个节点。
8. **检查节点类型：**? ?- `node.nodeType`: 获取节点类型。1 表示元素节点，3 表示文本节点，等等。 ? ?- `node.nodeName` 和 `node.tagName`: 获取节点名称。
9. **判断节点关系：**? ?- `node.parentNode`: 获取节点的父节点。 ? ?- `node.hasChildNodes()`: 检查节点是否有子节点。 ? ?- `node.contains(otherNode)`: 检查一个节点是否是另一个节点的后代。
10. **焦点和滚动：**? ? - `element.focus()`: 让特定的元素获得焦点。 ? ? - `element.scrollIntoView()`: 将元素滚动到可见区域。
这些节点操作方法使开发者能够动态地构建、修改和管理文档结构，实现灵活的前端交互。
24.js事件
1.初始事件
初始的 JavaScript 事件指的是页面加载时可能触发的事件。这些事件通常用于初始化页面或执行特定的操作。其中最常见的是 `DOMContentLoaded` 事件。
当浏览器完成解析文档时，会触发 `DOMContentLoaded` 事件。这表示 HTML 文档已完全加载和解析，但不包括样式表、图像等资源的加载。
在 JavaScript 中，可以通过以下方式添加 `DOMContentLoaded` 事件监听器：
使用 `addEventListener` 方法：document.addEventListener('DOMContentLoaded', function(event) { ? // 在页面加载完成后执行的操作 });
或者直接将函数赋给 `DOMContentLoaded` 事件处理程序：document.addEventListener('DOMContentLoaded', function(event) { ? // 在页面加载完成后执行的操作 });
这个事件非常有用，因为它允许你在页面加载后执行初始化代码，而无需等待所有资源（如图片）加载完成。这样可以提高用户体验，让页面更快地呈现内容或执行交互操作。
2.事件解绑
在 JavaScript 中，解绑（或移除）事件处理器有几种方法，具体取决于事件绑定的方式。以下是一些常见的解绑事件处理器的方法：
### 1. 使用 `removeEventListener` 方法：
如果事件是通过 `addEventListener` 方法添加的，可以使用 `removeEventListener` 方法来解绑事件处理器。确保解绑时传入相同的事件类型和处理函数。// 添加事件处理器 element.addEventListener('click', myFunction); // 移除事件处理器 element.removeEventListener('click', myFunction);
### 2. 直接将事件处理函数设为 `null`：
如果事件是通过直接将函数赋值给事件属性添加的，可以将相应事件属性设置为 `null` 来移除事件处理器。但请注意，这种方法仅适用于通过直接赋值添加的事件处理器。// 添加事件处理器 element.onclick = myFunction; // 移除事件处理器 element.onclick = null;
### 注意事项：
- 在使用 `removeEventListener` 移除事件处理器时，要确保传入的处理函数与添加时相同。否则，移除操作将无效。
- 如果事件处理器是通过匿名函数添加的，无法使用 `removeEventListener` 直接移除。在这种情况下，需要将匿名函数保存为变量，以便在移除时引用相同的函数。// 添加匿名函数的事件处理器 var myHandler = function(event) { ? // 处理事件的代码 }; element.addEventListener('click', myHandler); // 移除事件处理器 element.removeEventListener('click', myHandler);
通过这些方法，你可以有效地解绑事件处理器，确保不再监听特定的事件。
3.事件类型
JavaScript 支持多种事件类型，涵盖了用户与页面交互的各个方面。以下是一些常见的 JavaScript 事件类型：
1. **鼠标事件：**
? ?- `click`：单击鼠标按钮时触发。
? ?- `mousedown`：鼠标按钮被按下时触发。
? ?- `mouseup`：鼠标按钮被释放时触发。
? ?- `mousemove`：鼠标在元素内移动时触发。
? ?- `mouseover`：鼠标移入元素时触发。
? ?- `mouseout`：鼠标移出元素时触发。
2. **键盘事件：**
? ?- `keydown`：键盘按下时触发。
? ?- `keyup`：键盘释放时触发。
? ?- `keypress`：字符键被按下时触发。
3. **表单事件：**? ?- `submit`：表单提交时触发。 ? ?- `reset`：表单重置时触发。 ? ?- `change`：输入字段的值发生改变并失去焦点时触发。 ? ?- `input`：输入字段的值发生改变时触发（支持实时监听）。
4. **窗口事件：**? ?- `load`：页面或图像加载完成时触发。 ? ?- `unload`：页面即将被卸载时触发。 ? ?- `resize`：窗口大小变化时触发。 ? ?- `scroll`：滚动条滚动时触发。
5. **焦点事件：**? ?- `focus`：元素获得焦点时触发。 ? ?- `blur`：元素失去焦点时触发。
6. **事件传播相关：**? ?- `mouseenter`：鼠标进入元素时触发，不冒泡。 ? ?- `mouseleave`：鼠标离开元素时触发，不冒泡。 ? ?- `stopPropagation()`：阻止事件冒泡。 ? ?- `preventDefault()`：阻止事件的默认行为。
7. **移动端触摸事件：**? ?- `touchstart`：触摸事件开始。 ? ?- `touchmove`：触摸点在屏幕上移动。 ? ?- `touchend`：触摸事件结束。 ? ?- `touchcancel`：触摸事件被取消。
8. **其他事件：**? ?- `animationstart`、`animationend`、`animationiteration`：CSS 动画相关事件。 ? ?- `transitionstart`、`transitionend`：CSS 过渡相关事件。
这只是一部分常见的事件类型，JavaScript 还提供了更多的事件，以满足不同交互场景的需求。
4.事件对象
在 JavaScript 中，事件对象（Event Object）是在事件发生时传递给事件处理函数的对象，它包含了与事件相关的信息。事件对象提供了访问事件的属性和方法，以便在事件处理函数中获取有关事件的详细信息。
以下是事件对象常见的属性和方法：1. **`event.type`：** 表示事件的类型，例如 `'click'`、`'keydown'` 等。 2. **`event.target`：** 表示触发事件的元素，即事件最初发生的元素。 3. **`event.currentTarget`：** 表示当前正在处理事件的元素，即事件处理函数被绑定的元素。 4. **`event.preventDefault()`：** 阻止事件的默认行为，例如阻止表单提交或超链接跳转。 5. **`event.stopPropagation()`：** 阻止事件的传播，停止事件在 DOM 树中的传递过程，即阻止事件冒泡。 6. **`event.keyCode` 和 `event.key`：** 用于键盘事件，分别表示按下键的键码和键值。 7. **`event.clientX` 和 `event.clientY`：** 用于鼠标事件，表示鼠标指针在视口中的水平和垂直坐标。 8. **`event.pageX` 和 `event.pageY`：** 用于鼠标事件，表示鼠标指针在文档中的水平和垂直坐标。 9. **`event.touches`：** 用于触摸事件，包含了触摸点的信息。 10. **`event.preventDefault()`：** 阻止事件的默认行为，例如阻止表单提交或超链接跳转。 在事件处理函数中，可以通过参数传递的方式获得事件对象，例如： element.addEventListener('click', function(event) { ? console.log(event.type); ? ? ? ? // 输出事件类型 ? console.log(event.target); ? ? ? // 输出触发事件的元素 ? console.log(event.clientX); ? ? ? // 输出鼠标在视口中的水平坐标 ? event.preventDefault(); ? ? ? ? ?// 阻止默认行为 ? event.stopPropagation(); ? ? ? ? // 阻止事件传播 });
通过事件对象，可以更灵活地处理和控制页面上发生的各种交互事件。
5.事件对象--鼠标事件
在处理鼠标事件时，事件对象提供了与鼠标交互相关的信息。以下是鼠标事件对象常见的属性：
1. **`event.clientX` 和 `event.clientY`：** 表示鼠标指针在视口中的水平和垂直坐标。 2. **`event.pageX` 和 `event.pageY`：** 表示鼠标指针在文档中的水平和垂直坐标。 3. **`event.screenX` 和 `event.screenY`：** 表示鼠标指针在屏幕中的水平和垂直坐标。 4. **`event.button`：** 表示按下或释放的鼠标按钮，其中左键是 0，中键是 1，右键是 2。 5. **`event.which`：** 与 `button` 类似，表示按下或释放的鼠标按钮。 6. **`event.type`：** 表示事件的类型，例如 `'click'`、`'mousedown'`、`'mouseup'`、`'mousemove'` 等。
通过这些属性，你可以获取鼠标事件的位置、按钮信息以及其他相关的属性。以下是一个示例，演示如何在鼠标点击时输出相关信息：document.addEventListener('mousedown', function(event) { ? console.log('Mouse Down Event'); ? console.log('ClientX: ' + event.clientX + ', ClientY: ' + event.clientY); ? console.log('PageX: ' + event.pageX + ', PageY: ' + event.pageY); ? console.log('ScreenX: ' + event.screenX + ', ScreenY: ' + event.screenY); ? console.log('Button: ' + event.button); ? console.log('Type: ' + event.type); });
这样你可以根据需要使用这些信息来执行特定的操作，例如根据鼠标位置改变页面元素的样式或执行其他交互效果。
25.js正则知识点
26.this介绍
27.ES6
28.面向对象
29.AJAX
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，通过后台与服务器进行数据交换的技术。它允许在不刷新整个页面的情况下异步地更新页面的部分内容。尽管名称中包含 "XML"，实际上 AJAX 可以与多种数据格式一起使用，包括 JSON、HTML、纯文本等。
主要特点和优势包括：
1. **异步通信：** AJAX 使用异步通信机制，允许在不阻塞用户界面的情况下向服务器发送请求和接收响应。
2. **部分页面更新：** 可以在不刷新整个页面的情况下更新页面的一部分，提高用户体验并减少服务器负载。
3. **数据格式的灵活性：** 虽然最初的名字中包含 "XML"，但实际上 AJAX 可以与多种数据格式一起使用，如 JSON、HTML、纯文本等。
4. **减少带宽使用：** 由于只更新页面的一部分，相对于传统同步请求，AJAX 可以减少对带宽的需求。
5. **交互性增强：** 通过 AJAX，可以实现更多的交互性，例如实时搜索、动态加载内容等。
使用 AJAX 的基本步骤包括：
1. **创建 XMLHttpRequest 对象：** XMLHttpRequest 对象用于与服务器进行异步通信。
2. **创建回调函数：** 在收到服务器响应时，执行回调函数来处理响应数据。
3. **打开和发送请求：** 使用 XMLHttpRequest 对象打开到服务器的连接，并发送请求。
4. **处理服务器响应：** 在回调函数中处理从服务器返回的数据，并更新页面的相应部分。
在现代的 Web 开发中，除了原生的 XMLHttpRequest，还可以使用现代的 Fetch API 或各种 JavaScript 框架（如 jQuery、axios）来简化 AJAX 请求的处理。例如，使用 Fetch API，一个简单的 AJAX 请求可能如下所示：fetch('https://api.example.com/data') ? .then(response => response.json()) ? .then(data => { ? ? // 处理从服务器获取的数据 ? ? console.log(data); ? }) ? .catch(error => { ? ? // 处理请求错误 ? ? console.error('Error:', error); ? });
总的来说，AJAX 是一种强大的技术，使得 Web 应用能够更加动态和交互，提高用户体验。
客户端给服务端发送消息的工具，以及接受响应的工具
是默认的异步执行机制
优势
不需要插件的支持 ，原生(js)使用
用户体验好(不需要刷新页面)
减轻服务端和宽带的负担
缺点：搜索引擎的支持度不够，因为数据不在页面上，搜索引擎搜索不到
http状态码
1xx系列：信息性状态码
1xx系列的状态码表示服务器已经接收到请求并正在处理，但需要进一步的操作才能完成请求。
100 Continue：表示服务器已经接收到请求的头部，并且客户端应该继续发送请求的主体部分。
101 Switching Protocols：表示服务器已经理解了客户端的请求，并且将切换到不同的协议来完成请求。
2xx系列：成功状态码
2xx系列的状态码表示请求已经成功被服务器接收、理解和处理。
200 OK：表示请求已成功，服务器正常处理并返回请求的资源。
201 Created：表示请求已成功，并且服务器创建了新的资源。
202 Accepted：表示服务器已接受请求，但尚未处理完成。
204 No Content：表示请求已成功，但服务器没有返回任何内容。
3xx系列：重定向状态码
3xx系列的状态码表示客户端需要进行进一步的操作才能完成请求。
301 Moved Permanently：表示请求的资源已永久移动到新的URL。
302 Found：表示请求的资源已临时移动到新的URL。
304 Not Modified：表示请求的资源未被修改，可以直接使用缓存的版本。
4xx系列：客户端错误状态码
4xx系列的状态码表示客户端发起的请求有错误或无法完成。
400 Bad Request：表示客户端发送的请求有语法错误。
401 Unauthorized：表示请求需要用户进行身份验证。
403 Forbidden：表示服务器拒绝请求，没有权限访问。
404 Not Found：表示请求的资源不存在。
5xx系列：服务器错误状态码
5xx系列的状态码表示服务器在处理请求时发生了错误。
500 Internal Server Error：表示服务器内部发生了错误。
502 Bad Gateway：表示服务器作为网关或代理，从上游服务器接收到无效的响应。
503 Service Unavailable：表示服务器当前无法处理请求，一般是由于过载或维护导致。
2.创建原生xhr请求
// 第一步 创建 XHR new XMLHttpRequest()
// ajax===async javascript and xml (闭合标签)
// JSON.parse() //字符串类型转为字典
let xhr=new XMLHttpRequest() //创建实例化对象
// 第二步 配置 open(请求方式，请求地址，是否异步)
xhr.open('GET',url,true) 是否异步 默认是false
// 第三步 发送请求
xhr.send()
// 第四步 接受数据，注册一个事件
xhr.onreadystatechange=function(){
if(xhr.status===200 && xhr.readyState===4){
//状态码200 与运行状态到4都满足
console.log(xhr.responseText) //获取数据打印
}else if(xhr.readyState===4 && xhr.status===404) {
console.error(xhr.status)
}
}
ajax状态码-xhr.readyState
用来表示一个ajax请求的全部过程的一个状态
readyState===0 表示未初始化完成，open没有执行完毕
readyState===1 表示配置信息已经完成，也就是open执行完毕了
readyState===2 表示 send 已经执行完毕
readyState===3 表示表示正在解析响应内容
readyState===4 表示内容解析完毕，可以使用
状态码为200~299
一个ajax对象中有一个成员是xhr.status
记录的是本次请求的http状态码
在第四步接收数据需要注册事件分别是onreadystatechange与onload
1.onreadystatechange只打印其状态为2，状态为3，状态为4。
2.进入onload之后，只出现了状态码4。也就是说，只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了
在第四步接收数据需要注册事件分别是onreadystatechange与onload
1.onreadystatechange只打印其状态为2，状态为3，状态为4。
2.进入onload之后，只出现了状态码4。也就是说，只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了
请求方式
get 偏向获取数据
post 偏向提交数据
put偏向更新数据
delete偏向删除信息
patch 部分数据修改
header 服务器头信息
options服务器设备信息
connnect获取请求方式
案例:
get请求
var xhr=XMLRequestHttp()
xhr.open('get','地址',true)
xhr.onload=function(){
if(xhr.status===200){
console.log(JSON.parse(xhr.responseText))
}
}
xhr.send()发送请求post请求
var xhr=XMLRequestHttp() 创建对象
xhr.open('post','地址',tue)
xhr.onload=function(){
if(xhr.status===200){
console.log(JSON.parse(xhr.responseText))
}
Content-Type','application/json
请求头的设置
xhr.setReuqestHeader('Content-Type':'application/x-www-form-urlencoded')
}
//这是发送给后端的内容
xhr.send('name=zjq&age=18')30.promise
31.async和await用法
32.fetch
33.cookie
34.jsonp
35.闭包
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！