2.3 JavaScript
2.3.1 什么是JavaScript
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的"脚本".
JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多
为什么学习 JavaScript
- 操控浏览器的能力
- 广泛的使用领域
- 易学性
JavaScript版本
es6后面单独拉出来讲解
2.3.2 基本语法
1，语句和标识符
JavaScript程序的单位是行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句
var num = 10;语句以分号结尾，一个分号就表示一个语句结束
标识符
标识符指的是用来识别各种值的合法名称。最常见的标识符就是变量名
标识符是由：字母，美元符号($)，下划线(_)和数字组成，其中数字不能开头
温馨提示
中文是合法的标识符，可以用作变量名（不推荐）
JavaScript保留关键字
以下关键字不需要强行记忆
2，变量
var num = 10;
变量的重新赋值
var num = 10;
num = 20;变量提升
JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这叫做变量提升
console.log(num);
var num = 10;运行结果
3，输出
JavaScript有很多种输出方式，都可以让我们更直观的看到程序运行的结果
var num = 20;
console.log(num);
alert("我是弹出框")
document.write("要输入的内容")4，数据类型
原始类型（基础类型）
数值，字符串，布尔值
// 数值|数字 类型
var age = 20;
// 字符串类型
var name = '张三';
// 布尔类型: 0:false 1:true
var isOk = true;
var isOk2 = true;合成类型（复合类型）
对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器
var user = {
name: '老八',
age: 20,
sex: '男'
}温馨提示
至于undefined和null，一般将它们看成两个特殊值。
null和undefined的区别
关键区别
null表示有意旨意的对象值缺失，而undefined表示未意旨意的对象值缺失。null通常用来表示变量或属性没有值，而undefined用来表示变量或属性没有被声明或初始化。
5，运算符
typeof
判断数据类型（判断基本数据类型使用）
算术运算符
加减乘除运算符
加减乘除运算符就是基本的数学运算符效果
10 + 10; // 20
100 - 10; // 90
10 * 2; // 20
10 / 5; // 2余数运算符
余数运算符是比较常用的，因为在逻辑思维上寻找规律，余数运算符是很好用的。
13 % 5 // 3自增和自减运算符
自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1
var x = 1;
var y = 1;
++x // 2
--y // 0赋值运算符
JavaScript 中有多种赋值运算符，可以用来将值赋值给变量或属性。以下是其中一些最常用的赋值运算符：
最常见的赋值运算符，就是等号（=）
// 将 1 赋值给变量x
var x = 1;
// 将变量 y 的值赋值给变量 x
var x = y;有点懒得写了，如果大家需要我补全的话，我会把这部分补全
比较运算符
比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。
2 > 1 // trueJavaScript 一共提供了8个比较运算符。
“==”和“===”的区别
== (松散等价)
== 运算符检查两个值是否相等，但不检查数据类型。这意味着它会执行类型转换，这可能会导致意外结果。
console.log(5 == '5'); // true
console.log(null == undefined); // true=== (严格等价)
== 运算符检查两个值是否相等，但不检查数据类型。这意味着它会执行类型转换，这可能会导致意外结果。
console.log(5 === '5'); // false
console.log(null === undefined); // false最佳实践
为了避免意外结果和确保代码更加健壮，建议使用 === 运算符进行大多数比较。这将帮助您捕捉类型相关的错误，并确保代码行为如预期。
然而，在某些情况下，您可能需要使用 == 运算符，例如在处理 legacy 代码或需要执行松散比较的特殊用例时。
布尔运算符
布尔运算符（Boolean Operators）是 JavaScript 中的一种运算符，它们用于将布尔值（true 或 false）结合起来以获取新的布尔值。
JavaScript 中有以下四种布尔运算符：
1，&&（逻辑与）：返回两个布尔值的逻辑与结果。如果两个布尔值都是 true，返回 true；否则返回 false。
true && true // true
true && false // false
false && true // false
false && false // false2，||（逻辑或）：返回两个布尔值的逻辑或结果。如果两个布尔值至少有一个为 true，返回 true；否则返回 false。
true || true // true
true || false // true
false || true // true
false || false // false3，!（逻辑非）：返回一个布尔值的逻辑非结果。如果布尔值为 true，返回 false；否则返回 true。
true ! // false
false ! // true4，??（空值合并）：返回两个值中的第一个非 null 或 undefined 值。如果第一个值为 null 或 undefined，返回第二个值；否则返回第一个值。
null ?? 'default' // 'default'
undefined ?? 'default' // 'default'
'hello' ?? 'default' // 'hello'6，条件语句
条件语句（Conditional Statements）是 JavaScript 中的一种语句，它用于根据一定的条件来执行不同的代码块。
if语句
if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript的两个特殊值，true表示真，false表示伪。
if语句语法规范
if (布尔值){
语句;
}需要注意的是，“布尔值”往往由一条件表达式产生的，必须放在圆括号中
var m = 3;
if (m === 3){
m++;
}
console.log(m); // 4温馨提示
if后面的表达式之中，不要混淆赋值表达式（=），严格相等运算符（===）和相等运算符（==）。尤其是赋值运算符不具有比较作用
if...else
if...else基本结构
if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。
var flag = false;
if (flag) {
alert("我是老八");
}else{
alert("我是鸡你太美")
}此外，JavaScript还支持if...else if...else链，用于检查多个条件。例如：
if (条件1) {
// 当条件1为真时执行的代码块
} else if (条件2) {
// 当条件1为假且条件2为真时执行的代码块
} else {
// 当以上所有条件都为假时执行的代码块
}在这个结构中，程序会从上到下依次检查每个条件，一旦某个条件满足（即计算结果为
true），就执行对应的代码块，并跳过之后的所有条件检查。如果没有条件满足，则执行最后一个else后的代码块（如果有的话）。
switch
多个if...else连在一起使用的时候，可以转为使用更方便的switch结构
switch (表达式) {
case 值1:
// 当表达式的值等于值1时执行的代码
break;
case 值2:
// 当表达式的值等于值2时执行的代码
break;
...
default:
// 当没有任何case的值与表达式的值匹配时执行的代码（可选）
}需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。
var x = 1;
switch(x){
case 1:
console.log("x 等于 1");
case 2:
console.log("x 等于 2");
default:
console.log("x 等于 3");
break;
}
// x 等于 1
// x 等于 2
// x 等于 37，三元运算符
三元运算符（即该运算符需要三个运算子）?:,也可以用于逻辑判断
(条件) ? 表达式1 : 表达式2
这个三元运算符可以被视为if...else...的简写形式，因此可以用于多种场合。
判断一个整数是奇数还是偶数
var number = 5;
// 传统 if...else方法
if (number % 2 === 0) {
console.log(number + " 是偶数");
} else {
console.log(number + " 是奇数");
}
// 三元运算符方法
console.log(number % 2 === 0 ? "偶数" : "奇数");
8，循环语句
循环语句用于重复执行某个操作
for循环
for (初始化表达式;条件;迭代因子){
语句
}for语句后面的括号里面，有三个表达式。
- 初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。
- 布尔表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才能继续循环下去。
- 迭代因子：每轮循环的最后一个操作，通常用来递增循环变量、
var x = 3;
for (var i = 0; i < x; i++){
console.log(i);
}for语句的三个表达式，可以省略任何一个，也可以全部省略。（按照我的经验，应该是不会有人省略）
for(;;){
console.log('Hello world');
}温馨提示
如果三个都省略，结果就导致了一个无限循环（死循环）
循环输出1~100之间数字的和 （练习）
var num = 0
// 循环输出1~100之间的数字的和
for (let index = 1; index <= 100; index++) {
num += index
}
console.log(num);循环输出1000以内的奇数（练习）
// 循环输出1000以内的奇数
for (let i = 1; i < 1000; i++) {
if (i % 2 == 1) {
console.log(i);
}
}while循环
while语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。
while (条件){
语句;
} 
// 循环打印出来1~100的值
var i = 1;
while(i<=100){
console.log(i);
i++;
}下面的例子是一个无限循环，因为循环的条件总是真
while(true){
console.log("hello world")
}continue语句
break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行
break语句
当在循环体内遇到 break 语句时，循环会立即终止，不再执行循环中剩余的部分以及循环体后的任何迭代。控制权将传递给紧跟在循环之后的第一条语句。
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // 当 i 等于5时，跳出循环
}
console.log(i);
}continue语句
与 break 不同，continue 语句不是终止整个循环，而是跳过当前迭代中剩余的部分，直接开始下一次迭代（如果有的话）。
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) { // 如果 i 是偶数
continue; // 跳过偶数，不执行下面的打印语句
}
console.log(i);
}温馨提示
使用
break和continue应谨慎，过度使用可能会使代码逻辑变得难以理解和维护。
break也可以用在switch语句中，用来跳出某个case。标签（label）可以与
break和continue一起使用，以标识特定的循环或代码块，允许从嵌套循环中跳出或继续特定层次的循环，但这在实际编码中较为少见。
9，字符串
字符串是一系列字符的集合，用于表示文本。字符串可以用单引号 (') 或双引号 (") 来界定。
'hello world'
"hello world"单引号字符的内部，可以使用双引号。双引号的内部也可以使用单引号
'key = "value"'
"It`s a long shaqima"温馨提示
字符串默认只能在一行内，分成多行将会报错
如果字符串必须分为多行，可以在每一行的尾部使用反斜杠
var longStrong = ' Long \
long \
string';
console.log(longStrong);length属性
length属性返回字符串的长度，该属性也是无法改变的
var s = 'sqm666'
console.log(s.length)
// 6charAt()
charAt 返回指定值首次出现的位置，未找到返回 -1。
var s = 'sqmsqm'
console.log(s.charAt(3)) // s
console.log(s.charAt(s.length - 1)) // "m"如果参数为负数，或大于等于字符串的长度，charAt 返回空字符串
console.log('sqmsqm'.charAt(-1)) // ""
console.log('sqmsqm'.charAt(9)) // ""concat() 连接字符串
concat 方法用于连接两个字符串，返回一个新的字符串，不改变原来的字符串。
var s1 = 'sqm'
var s2 = 'kukulin'
console.log(s1.concat(s2)) // "sqmkukulin"该方法可以接受多个参数
var s1 = 'sqm'
var s2 = 'kukulin'
var s3 = "老八"
console.log(s1.concat(s2, s3)) // "sqmkukulin老八"字符串相加，是不需要使用concat的，可以使用+连接字符串
var s1 = 'sqm'
var s2 = 'kukulin'
var s3 = "老八"
console.log(s1 + s2 + s3) // "sqmkukulin老八"concat和加号还是有区别的
- concat不管什么类型直接合并成字符串
- 加号是遇到数字类型直接做运算，遇到字符串和字符串做字符串的连接
slice(start, end) 提取子字符串
slice() 方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含改位置）
- 参数：接受两个参数，
start和end，分别定义提取子串的起始位置和结束位置。start是包含在内的，而end是不包含在内的。如果省略end，则提取从start开始到字符串末尾的所有字符。 - 负值处理：如果提供负值，
slice()会将其解释为从字符串末尾开始计算的索引。例如，-1表示最后一个字符，-2表示倒数第二个字符。 - 返回值：返回一个新的字符串，包含从
start到end（不包括end）之间的字符。
'sqmsqm'.slice(0,2) // "sq"indexOf() 搜索子字符串的位置
indexOf() 是字符串和数组对象都具有的一个方法，用于查找指定值在字符串或数组中的第一次出现的位置。如果找到该值，则返回其在字符串或数组中的索引；如果没有找到，则返回 -1。
var hello = 'helloworld';
console.log(hello.indexOf('e')); // 1
console.log(hello.indexOf('j')); // -1indexOf 方法还可以接受第二个参数，表示从该位置开始向后匹配
'helloworld'.indexOf('o', 6) // 7trim 去除两端的空格
trim() 方法不会改变原字符串，而是返回一个新的字符串，这个新字符串是原字符串的副本，但其首尾的空白字符已被移除。
let str = " Hello, world! ";
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出: "Hello, world!"该方法去除的不仅是空格，还包括制表符（\t，\v），换行符（\n） 和回车符（\r）
'\r\nsqmsqm \t'.trim() // 'sqmsqm'ES6扩展方法，trimStart() 和 trimEnd() 方法
let str = " Hello, world! ";
let startTrimmed = str.trimStart(); // 删除开头空白
let endTrimmed = str.trimEnd(); // 删除结尾空白split
split() 是JavaScript中的一个字符串方法，用于将一个字符串分割成一个字符串数组。
console.log('sqm|520|hello|world'.split('|')); // ['sqm', '520', 'hello', 'world']如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
'a|b|c'.split('') // ['a', '|', 'b', '|', 'c']如果省略参数，则返回数组的唯一成员就是原字符串
'it|sxt|bz'.split() // [it|sxt|bz]10，数组
数组是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
var arr = ['sxt', 'sqm', 'it'];两端的方括号是数组的标志。sxt是0号位置，sqm是1号位置，it是2号位置
除了在定义时赋值，数组也可以先定义后赋值。
var arr = [];
arr[0] = 'kkl';
arr[1] = 'sqm';
arr[2] = 'it'';任何类型的数据，都可以放入数组
var arr = [100, [1,2,3],false];如果数组的元素还是数组，就形成了多维数组
var a = [[1,2],[3,4],[5,6]];
a[0][1] // 2遍历
数组的遍历可以考虑使用for循环或while循环
var a = ['kkl', 'sqm', 'it'];
for(var i=0;i<a.length;i++){
console.log(a[i]);
}while循环
var a = ['kkl', 'sqm', 'it'];
var i = 0;
while(i<a.length){
console.log(a[i]);
i++;
}for...in 循环
var a = ['kkl', 'sqm', 'it'];
for(var i in a){
console.log(a[i]);;
}Array.isArray()
Array.isArray() ，用于检测一个给定的值是否为数组类型。它可以弥补 typeof 运行符的不足
var arr = ['库库林', 100, true];
console.log(typeof arr); // object
console.log(Array.isArray(a));// true
console.log(Array.isArray(10)); // falsepush()/pop()
push 用于在数组的末端添加一个或多个元素，并返回新的数组长度。这个操作会改变原数组。
var a = [];
a.push('库库林');
a.push('沙琪马');
a.push(true);
a.push(100);
console.log(a); // ['库库林', '沙琪马', true, 100] pop 用于移除数组的最后一个元素，并返回这个被移除的元素。此操作会改变原数组。
var arr = ['库库林', '沙琪马', true, 100]
arr.pop() // '100'
arr // ['库库林', '沙琪马', true]join()
join() 用于将数组中的所有元素连接成一个字符串。元素会按照数组中的顺序连接，并且可以指定一个可选的分隔符来插入到元素之间。如果不提供参数默认是用逗号分隔。
var a = [1,2,3,4];
console.log(a.join(' ')); // 1 2 3 4
console.log(a.join('|')); // 1|2|3|4
console.log(a.join()); // 1,2,3,4如果数组成员是undefined或null或空格，就会转成空字符串
数组的 join 配合字符串的 split 可以实现数组和字符串的互相转换
let arr = ['apple', 'banana', 'cherry'];
let str = arr.join(', '); // 使用逗号和空格作为分隔符
console.log(str); // 输出: "apple, banana, cherry"
let str = "apple, banana, cherry";
let arr = str.split(', '); // 使用逗号和空格作为分隔符
console.log(arr); // 输出: ["apple", "banana", "cherry"]concat() 数组合并
concat()，用于合并两个或多个数组，创建一个新的数组，原数组不会被改变。这个方法可以接收任意数量的参数，可以是数组，也可以是单独的值。
let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let arr3 = [6];
let combinedArray = arr1.concat(arr2, arr3, 7, 8);
console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr1); // 输出: [1, 2, 3]，原数组不变应用场景
上拉加载，合并数据
reverse() 反转
reverse() 用于颠倒数组中元素的顺序。这个操作会直接修改原数组，而不是创建一个新的数组。
let fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.reverse();
console.log(fruits); // 输出: ['date', 'cherry', 'banana', 'apple']实现一个字符串的反转排列
var str = 'hello';
str.split("").reverse().join("") // "olleh"indexOf() 查找
indexOf()用于查找指定值在字符串或数组中的首次出现的位置，并返回该位置的索引。如果未找到该值，则返回 -1。
let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // 输出: 211，函数
函数是一段可以反复调用的代码块
函数的声明
function命令：function命令声明的代码区域，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数参数。函数体放在大括号里面。
function print(s){
console.log(s);
}函数名的提升
JavaScript引擎将函数名视为变量名，所以采用`function`命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。
add();
function add(){}函数参数
函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数.
function square(){
console.log(x*x);
}
square(3) // 9
square(4) // 16函数返回值
JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果反馈给外界。
function getName(name){
return name;
}
var myName = getName('小明');
console.log(myName); // 小明温馨提示
return 后面不能再添加任何代码，因为不会执行。
12，对象
什么是对象？对象（object）是JavaScript语言的核心概念，也是最重要的数据类型。简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。
var user={
name: 'itkklsqm',
age: '13'
}对象的每一个键名又称为“属性”，它的键值“可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为"方法",它可以像函数那样调用”
var user = {
name: 'itkklsqm',
age: 13,
getName:function(){
console.log(this.name)
}
}13，Math对象
Math是JavaScript的原生对象，提供各种数学功能。
Math.abs()
Math.abs() 方法返回参数值的绝对值
Math.abs(1) // 1
Math.abs(-1) // 1Math.max(), Math.min()
Math.max 方法返回参数之中最大的那个值，Math.min 返回最小的那个值。如果那个参数为空，Math.min 返回Infinity，Math.max 返回 -Infinity.
console.log(Math.max(10,30,20,50,40)); // 50
console.log(Math.min(10,30,20,50,40)); // 10Math.floor(), Math.ceil()
Math.floor 方法返回小于参数值的最大整数. 相当于向下取整
Math.floor(3.2) // 3
Math.floor(-3.2) // -4Math.ceil 方法返回大于参数值的最小整数. 相当于向上取整
Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3Math.random()
Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1
Math.random() // 0.285432534563452453任意范围的随机数生成函数如下
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandomInt(2,10));14，Date对象
Date对象是JavaScript原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后1亿天（单位为毫秒）。
Date.now()
`Date.now()` 方法返回当前时间距离时间零点（1970年1月1日00:00:00 UTC）的毫秒数，相当于Unix时间戳乘以1000。
Date.now(); // 1635216733395时间戳
JavaScript的Date对象提供了多个get方法来获取日期和时间的具体组成部分。以下是一些常用的get方法及其功能描述：
实例方法get类
getFullYear(): 获取四位数的年份（如2023）。
getMonth(): 获取月份（注意：月份是从0开始的，即0表示1月，11表示12月）。
getDate(): 获取一个月中的哪一天（1-31）。
getDay(): 获取一周中的哪一天（0表示周日，6表示周六）。
getHours(): 获取小时数（0-23）。
getMinutes(): 获取分钟数（0-59）。
getSeconds(): 获取秒数（0-59）。
getMilliseconds(): 获取毫秒数（0-999）。
getTime(): 返回1970年1月1日00:00:00 UTC以来的毫秒数，等效于Unix时间戳乘以1000。
getTimezoneOffset(): 返回本地时间和UTC时间之间的时差，以分钟为单位。
var d = new Date();
console.log(d.getDate()); // 14
console.log(d.getMonth()); // 6
console.log(d.getFullYear()); // 2024
console.log(d.getHours()); // 10
console.log(d.getMinutes()); // 29
console.log(d.getSeconds()); // 72.3.3 DOM操作
DOM（Document Object Model，文档对象模型）是针对HTML和XML文档的一个编程接口，它将网页中的结构化文档表示为一系列的节点（Node），允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM提供了一种标准化的方式来表示文档，并且允许开发者通过脚本（如JavaScript）来操作这些文档结构。
DOM只是一个接口规范，可以用各种语言实现。所以严格地说，DOM不是JavaScript语法的一部分，但是DOM操作是JavaScript最常见的任务，离开了DOM，JavaScript就无法控制网页。另一方面，JavaScript也是最常用于DOM操作的语言。
节点
DOM 的最小组成单位叫做节点。文档的树形结构，就是由各种不同类型的节点组成，每个节点可以看作是文档树的一片叶子。
节点的类型有七种
Document: 整个文档树的顶层节点
DocumentType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的标签（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。
浏览器原生提供document节点，代表整个文档
document
// 整个文档树除了根节点，其他节点都有三种层级关系
父节点关系：直接的那个上级节点
子节点关系：直接的下级节点
同级节点关系：拥有同一个父节点的节点
Node.nodeType属性
不同节点的nodeType属性值和对应的常量如下：
文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片段节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
