简写运算符+=

=赋值 ==判断是否相等 ===判断是否全等包含值和类型

逻辑运算符 与 && 或 || 非！

1. 逻辑短路（Logical Short-Circuiting）
逻辑短路是指在逻辑表达式求值过程中，由于某个操作数的值已经能够确定整个表达式的真假，所以表达式中剩余的部分不再需要被求值。这在JavaScript的&&（逻辑与）和||（逻辑或）操作中尤为明显。

逻辑与（&&）：如果第一个操作数为false，则整个表达式的结果为false，此时不再计算第二个操作数。
逻辑或（||）：如果第一个操作数为true，则整个表达式的结果为true，此时不再计算第二个操作数。
这种机制有时被用来作为条件执行的快捷方式，类似于其他语言中的“条件运算符”（?:）的简化形式，或者用来给变量赋默认值。

if语句

if（条件）{
} else if（条件）{
} else if（条件）{
} else{
}

三元表达式

//if双分支的简单写法，一般用来取值，语法如下：
//条件？满足是执行的代码：不满足执行的代码
<script>
    let cj = prompt("输入成绩")
    alert(cj >= 60 ? "及格" : "不及格")
  
 </script>

选择语句Switch语句

// key全等于value执行case中的代码,break跳过后续代码无break则会顺序执行所有
//switch语句的case子句后面不能直接跟判断表达式（如if语句或逻辑表达式）。case后面必须直接跟上一个常量表达式（如字符串、数字或常量），这个常量表达式用于与switch语句中的表达式进行比较。
switch (key) {
      case value:

        break;
      case value:

        break;
      case value:

        break;

      default:
        break;
    }

循环语句 while break跳出循环 continue结束本次循环

.

while (条件表达式) {
  // 循环体（当条件表达式为真时，重复执行的代码块）
}
let i = 1
    while (i <= 5) {
      document.write(`${i}<br>`)
      i++
    }

//for循环

for ([初始化表达式]; [条件表达式]; [递增（或递减）表达式]) {
  // 循环体（当条件表达式为真时，重复执行的代码块）
}
初始化表达式（Initialization）：在循环开始前执行，通常用于初始化一个或多个循环计数器。
条件表达式（Condition）：在每次循环开始前评估。如果条件为真（即，表达式的计算结果为true），则执行循环体内的代码。如果为假（false），则退出循环。
递增（或递减）表达式（Final-expression）：在每次循环的末尾执行，通常用于更新或递增（或递减）循环计数器。
示例

以下是一个使用for循环的示例，该示例将打印数字1到5：

javascript
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 输出：
// 1
// 2
// 3
// 4
// 5

在这个示例中，我们定义了一个变量i作为循环计数器，并将其初始化为1。for循环的条件是i <= 5，这意味着只要i的值小于或等于5，循环就会继续执行。在循环体内，我们打印了变量i的当前值。i++是递增表达式，它会在每次循环迭代结束时执行，将i的值增加1。因此，循环会重复执行，直到i的值增加到6，此时条件表达式i <= 5不再为真，循环结束。

遍历数组

for循环也常用于遍历数组中的每个元素。以下是一个遍历数组并打印其元素的示例：

const fruits = ["Apple", "Banana", "Cherry"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// 输出：
// Apple
// Banana
// Cherry

在这个示例中，我们使用let i = 0来初始化循环计数器i，它用于访问数组中的元素。条件表达式i < fruits.length确保我们不会尝试访问数组界限之外的元素。递增表达式i++将i的值在每次迭代后增加1，以便我们可以访问数组的下一个元素。在循环体内，我们使用fruits[i]来访问并打印当前索引i处的数组元素。

数组操作

JavaScript中的数组是一种非常重要的数据结构，用于在单个变量中存储多个值。这些值可以是任何数据类型，包括数字、字符串、对象或甚至是其他数组（多维数组）。下面是一些JavaScript数组常用的操作及语法：

1. 创建数组
使用数组字面量：let arr = [1, 2, 3, 'Hello', true];
使用Array构造函数：let arr = new Array(1, 2, 3); 
或 let arr = new Array(5); // 创建一个长度为5的空数组，但注意，单个参数且为数字时，它定义的是数组长度而非单个元素
2. 访问元素
使用索引：let secondElement = arr[1]; // 访问第二个元素（索引从0开始）
3. 插入元素
在末尾添加：arr.push(4);
在开头添加：arr.unshift(0);
在任意位置添加：arr.splice(2, 0, 'a', 'b'); // 从索引2开始，删除0个元素，并添加'a'和'b'
4. 删除元素
删除末尾元素：let removedElement = arr.pop();
删除开头元素：let removedElement = arr.shift();
删除任意位置的元素：let removedElements = arr.splice(2, 1); // 从索引2开始，删除1个元素
5. 遍历数组
使用for循环：
javascript
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
使用forEach方法：
javascript
arr.forEach(function(element) {
    console.log(element);
});
或ES6箭头函数：
javascript
arr.forEach(element => console.log(element));
6. 搜索数组
使用indexOf方法：let index = arr.indexOf(3); // 查找元素3的索引，如果不存在则返回-1
使用find方法（返回第一个符合条件的元素）：
javascript
let found = arr.find(element => element > 2);
console.log(found); // 第一个大于2的元素
使用findIndex方法（返回第一个符合条件的元素的索引）：
javascript
let index = arr.findIndex(element => element > 2);
console.log(index); // 第一个大于2的元素的索引
7. 转换和合并数组
使用concat方法：let newArr = arr.concat([4, 5, 6]); // 合并数组
使用slice方法：let slicedArr = arr.slice(1, 3); // 从索引1开始到索引3（不包含）结束的子数组
使用spread操作符（ES6）：let [...newArr, 7, 8] = arr; 或合并数组：let combined = [...arr, ...[9, 10]];
8. 排序和反转
排序：arr.sort((a, b) => a - b); // 默认将数组元素转换为字符串并比较Unicode码点值
反转：arr.reverse();
9. 映射和过滤
使用map方法：let doubled = arr.map(element => element * 2); // 创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值
使用filter方法：let even = arr.filter(element => element % 2 === 0); // 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

这些操作覆盖了JavaScript数组日常使用的绝大部分场景。掌握这些操作，对于进行高效的数据处理至关重要。

数组splice操作

将只删除数组

在JavaScript中，splice() 方法是一个非常灵活的数组方法，用于通过删除或替换现有元素和/或添加新元素来更改数组的内容。该方法会修改原数组，并返回被删除的元素组成的新数组（如果没有元素被删除，则返回一个空数组）。

语法
javascript
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start（必需）：指定修改的开始位置（数组索引）。如果超出了数组的长度，则会从数组末尾开始添加内容；如果是负值，
则表示从数组末尾开始的第几位（例如，-2表示数组倒数第二个元素）。
deleteCount（可选）：整数，表示要移除的数组元素的数量。如果 deleteCount 被省略或其值大于 start 之后
的元素总数，则从 start 后面的所有元素都将被删除（如果 deleteCount 是 0 或负数，则不会移除任何元素）。
如果 deleteCount 被省略，则其默认值为 start 之后的所有元素的数量（即 array.length - start）。
item1, item2, ...（可选）：要添加进数组的元素，从 start 位置开始。如果不指定，则 splice() 将只删除数组元素。
返回值:splice() 方法都修改了原数组 arr，并返回了一个新数组，该数组包含了那些由于调用 splice()
 而被删除的元素（如果有的话）。
示例

假设我们有一个数组 arr：

let arr = [1, 2, 3, 4, 5];
示例 1: 删除元素
let removed = arr.splice(2, 2); // 从索引2开始，删除2个元素
console.log(arr); // 输出: [1, 2, 5]
console.log(removed); // 输出: [3, 4]
示例 2: 添加元素
javascript
arr.splice(2, 0, 'a', 'b'); // 从索引2开始，删除0个元素，并添加'a'和'b'
console.log(arr); // 输出: [1, 2, 'a', 'b', 5]
示例 3: 删除并添加元素
javascript
arr.splice(2, 1, 'c'); // 从索引2开始，删除1个元素，并添加'c'
console.log(arr); // 输出: [1, 2, 'c', 'b', 5]
示例 4: 负数索引
javascript
arr.splice(-2, 1); // 从倒数第二个元素开始，删除1个元素
console.log(arr); // 输出: [1, 2, 'c', 'b']
示例 5: 不删除元素，只添加
javascript
arr.splice(2, 0, 'x', 'y'); // 从索引2开始，不删除元素，添加'x'和'y'
console.log(arr); // 输出: [1, 2, 'x', 'y', 'c', 'b']

这些示例展示了 splice() 方法在数组操作中的灵活性和强大功能。你可以通过修改 start、deleteCount 和要添加的元素来精确地控制数组的变更。

函数 语法 : function 函数名(){}

在JavaScript中，函数定义（或声明）主要通过两种主要语法来完成：函数声明（Function Declaration）和函数表达式（Function Expression）。尽管它们都用于定义函数，但它们在行为和使用方式上有所不同。

1. 函数声明（Function Declaration）

函数声明使用function关键字后跟一个函数名、参数列表（用括号括起来，参数之间用逗号分隔）、和函数体（用大括号括起来的代码块）。

javascript
function functionName(parameters) {
  // 函数体
}

示例：

javascript
function sayHello(name) {
  console.log('Hello, ' + name + '!');
}

sayHello('Alice'); // 输出: Hello, Alice!

函数声明的一个关键特性是函数提升（hoisting）。这意味着，无论函数声明在代码中的什么位置，它都会被提升到其作用域的顶部。因此，你可以在函数声明之前调用该函数。

2. 函数表达式（Function Expression）

函数表达式是另一种定义函数的方式，它通常将函数赋值给一个变量。这意呀着，函数表达式不会提升。

函数表达式可以是一个匿名函数（没有函数名）或具名函数（有一个函数名，但在表达式中通常不使用）。

匿名函数表达式：

javascript
let functionName = function(parameters) {
  // 函数体
};

具名函数表达式（通常用于调试目的，但在表达式外部不常使用函数名）：

javascript
let functionName = function myFunctionName(parameters) {
  // 函数体
  // 注意：这里的 myFunctionName 在函数体外部是不可访问的
};

箭头函数表达式（ES6+）：

箭头函数提供了一种更简洁的方式来写函数表达式。

javascript
let functionName = (parameters) => {
  // 函数体
};

// 单个参数的箭头函数可以省略括号
let functionName = parameter => {
  // 函数体
};

// 如果函数体只有一条语句，可以省略大括号和return（隐式返回）
let functionName = parameter => `Hello, ${parameter}!`;

// 没有参数的箭头函数需要空括号
let functionName = () => {
  // 函数体
};

示例（函数表达式）：

javascript
let sayHello = function(name) {
  return 'Hello, ' + name + '!';
};

console.log(sayHello('Bob')); // 输出: Hello, Bob!

// 使用箭头函数
let greet = name => `Hello, ${name}!`;
console.log(greet('Charlie')); // 输出: Hello, Charlie!

函数表达式在需要动态定义函数或将其作为值传递（例如，作为参数或返回值）时非常有用。箭头函数则提供了更简洁的语法，特别是在处理回调函数或需要this值自动绑定到外部词法作用域时。

匿名函数用法一 立即执行函数

JavaScript中的立即执行函数表达式（Immediately Invoked Function Expression, IIFE）是一种特殊的函数，它在定义之后立即执行。IIFE通常用于创建一个新的作用域，这样可以避免污染全局作用域或模块作用域。

语法
IIFE的基本语法结构如下：
(function() {
    // 函数体
    console.log("IIFE is executed immediately");
})();
注意，函数声明被包裹在一对圆括号中，并且整个表达式后面紧跟着另一对圆括号，这对圆括号用于立即执行该函数。

示例
示例 1：基本的IIFE
javascript
(function() {
    var localVar = "I'm local to this IIFE!";
    console.log(localVar);
})();

// 尝试访问 localVar 会导致 ReferenceError，因为它只在 IIFE 的作用域内有效
// console.log(localVar); // ReferenceError: localVar is not defined
示例 2：带有参数的IIFE
你可以向IIFE传递参数，就像向任何其他函数传递参数一样。

javascript
(function(greeting) {
    console.log(greeting + ", World!");
})("Hello");

对象

在JavaScript中，对象是一种复合数据类型，用于存储键值对（key-value pairs），
其中键（key）是字符串（或Symbol），值（value）可以是任何数据类型，
包括数字、字符串、布尔值、数组、函数、对象等。
对象允许你将相关的数据组合在一起，并以直观的方式访问这些数据。

对象的声明

JavaScript中有几种方式可以声明对象：

1. 对象字面量语法

这是最常用的声明对象的方式，通过大括号{}包含一系列的键值对，每个键值对之间用逗号,分隔。

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.firstName + " " + this.lastName);
  }
};
2. 使用new Object()

这种方式首先使用new关键字创建一个Object的实例，然后通过赋值语句为对象添加属性。不过，这种方式相对繁琐，不如对象字面量语法直观。

javascript
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;
person.greet = function() {
  console.log("Hello, my name is " + this.firstName + " " + this.lastName);
};
3. 使用Object.create()

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__（即其原型）。这在实现继承时非常有用。

javascript
var personPrototype = {
  greet: function() {
    console.log("Hello, my name is " + this.firstName + " " + this.lastName);
  }
};

var person = Object.create(personPrototype);
person.firstName = "John";
person.lastName = "Doe";
对象的使用

一旦对象被声明，你就可以通过点符号.或方括号[]来访问其属性或方法了。

使用点符号.
javascript
console.log(person.firstName); // 输出: John
person.greet(); // 输出: Hello, my name is John Doe
使用方括号[]

当属性名不是有效的标识符（例如，包含空格、特殊字符或需要动态生成时），你可以使用方括号[]来访问属性。

javascript
var propName = "firstName";
console.log(person[propName]); // 输出: John

// 假设属性名中包含空格
var spaceName = "first name";
person[spaceName] = "Jane"; // 注意：这实际上是在添加一个新属性，而不是修改原有的firstName
console.log(person[spaceName]); // 输出: Jane
总结

JavaScript中的对象是一种非常强大的数据结构，允许你以结构化的方式存储和操作数据。通过对象字面量语法、new Object()或Object.create()，你可以方便地声明对象，并通过点符号.或方括号[]来访问其属性或方法。

对象的增删改查

在JavaScript中，对象的增删改查（CRUD：Create, Read, Update, Delete）是非常常见的操作。下面分别给出这些操作的语法及示例。

1. 创建（Create）

创建对象通常使用对象字面量语法或new Object()构造函数。

对象字面量语法
javascript
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};
new Object()
javascript
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;
2. 读取（Read）

读取对象的属性或方法使用点符号.或方括号[]。

使用点符号
javascript
console.log(person.firstName); // 输出: John
使用方括号
javascript
console.log(person["lastName"]); // 输出: Doe
3. 更新（Update）

更新对象的属性或方法实际上就是重新赋值。

javascript
person.age = 31; // 更新年龄
person.greet = function() {
  console.log("Hello, my name is " + this.firstName + " " + this.lastName);
};

person.greet(); // 输出: Hello, my name is John Doe
4. 删除（Delete）

删除对象的属性使用delete关键字。

javascript
delete person.age; // 删除age属性
console.log(person.age); // 输出: undefined（如果删除成功）

// 注意：delete不能删除通过var或let声明的变量，只能删除对象的属性
完整示例
javascript
// 创建对象
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

// 读取属性
console.log(person.firstName); // 输出: John

// 更新属性
person.age = 31;

// 添加新方法
person.greet = function() {
  console.log("Hello, my name is " + this.firstName + " " + this.lastName + ". I am " + this.age + " years old.");
};

person.greet(); // 输出: Hello, my name is John Doe. I am 31 years old.

// 删除属性
delete person.age;

// 再次尝试读取已删除的属性
console.log(person.age); // 输出: undefined

在JavaScript中，对象的属性可以是任意数据类型，包括函数（方法），这使得JavaScript的对象非常灵活和强大。通过增删改查操作，你可以动态地管理和维护对象的状态。

对象遍历 for in 循环

在JavaScript中，for...in循环用于遍历一个对象的所有可枚举属性（包括对象自身的属性和其原型链上的属性，除非使用hasOwnProperty()等方法来过滤掉原型链上的属性）。for...in循环可以遍历对象的所有枚举属性，并以字符串形式返回每个属性的名称，然后你可以使用这个名称来访问相应的属性值。

定义

for...in循环的基本语法如下：

for (variable in object) {
  // 在这里，variable 会依次被赋予 object 的每个可枚举属性的名称（作为字符串）
  // 然后你可以使用 object[variable] 来访问对应的属性值
}
示例

以下是一个使用for...in循环遍历对象属性的示例：

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.firstName + " " + this.lastName);
  }
};

// 遍历对象的属性
for (var prop in person) {
  // 使用 hasOwnProperty() 方法来检查属性是否是对象自身的属性
  // 而不是继承自原型链的属性
  if (person.hasOwnProperty(prop)) {
    console.log(prop + ": " + person[prop]);
  }
}

// 输出:
// firstName: John
// lastName: Doe
// age: 30
// 注意：greet 方法不会被打印出来，因为它是函数，而不是纯数据值
// 如果你也想包括函数，可以简单地去掉 hasOwnProperty() 检查

在这个示例中，for...in循环遍历了person对象的所有可枚举属性。使用hasOwnProperty()方法确保了只遍历对象自身的属性，而不包括从原型链上继承的属性。然而，如果你也想包括继承的属性（尽管这在大多数情况下不是必需的），你可以省略hasOwnProperty()检查。

另外，请注意，for...in循环遍历属性的顺序并不是固定的，它依赖于JavaScript引擎的实现。在大多数情况下，属性是按照它们被添加到对象中的顺序来遍历的，但这并不是ECMAScript规范所保证的。因此，如果你需要按照特定的顺序遍历对象的属性，最好使用Object.keys()、Object.values()或Object.entries()方法，并结合数组的方法来实现。

间歇函数

在JavaScript中，间歇函数通常指的是使用setInterval()方法创建的函数。
setInterval()方法允许你按照指定的周期（以毫秒计）来重复调用函数或执行代码段。
这个方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。

使用setInterval()

setInterval()方法接收两个参数：第一个参数是要周期性执行的函数（或者是一个能执行代码的字符串，
但出于安全和性能的考虑，不推荐使用字符串），第二个参数是时间间隔（以毫秒为单位）。

示例代码
javascript
// 定义一个简单的函数
function myFunction() {
  console.log("这个函数每隔3秒执行一次！");
}

// 使用setInterval()设置该函数每3秒执行一次
setInterval(myFunction, 3000);

// 如果你想要在某个时间点停止这个函数继续执行，可以使用clearInterval()
// 首先，你需要将setInterval()的返回值保存到一个变量中
let intervalId = setInterval(myFunction, 3000);

// 然后，你可以使用clearInterval()和保存的变量来停止它
// 例如，在5秒后停止
setTimeout(() => {
  clearInterval(intervalId);
  console.log("函数不再执行了。");
}, 5000);
注意事项

性能问题：如果setInterval()调用的函数执行时间比设定的时间间隔还要长，那么这些函数会排队等待执行，可能会导致性能问题。

清除间隔：使用clearInterval()来停止setInterval()设置的重复调用。如果不这样做，这些函数将会一直执行下去，即使是在页面已经关闭或者用户已经离开页面的情况下。

与setTimeout()的对比：setTimeout()用于在指定的延迟后执行代码一次，而setInterval()则用于重复执行代码。

使用场景：setInterval()非常适合需要周期性执行任务的场景，比如轮询数据、更新页面上的时间显示等。
然而，在处理需要精确控制执行时间的场景时（比如动画），可能需要考虑使用requestAnimationFrame()或其他方法。

常用监听时间

JavaScript中，监听事件是开发交互式网页和Web应用的关键部分。事件监听允许你定义当特定事件（如用户点击按钮、鼠标移动、键盘按键等）发生时应该执行的代码。以下是一些JavaScript中常用的监听事件：

click：当用户点击某个元素时触发。

dblclick：当用户双击某个元素时触发。

mouseover：当鼠标指针移动到某个元素上方时触发。

mouseout：当鼠标指针从某个元素上移开时触发。

mousemove：当鼠标指针在元素内部移动时触发。

mousedown：当鼠标按钮在某个元素上按下时触发。

mouseup：当鼠标按钮在某个元素上释放时触发。

keydown：当用户按下键盘上的某个键时触发。

keyup：当用户释放键盘上的某个键时触发。

keypress：当用户按下并释放键盘上的某个键时触发（注意：在某些情况下，如按下Shift键时，可能不会触发）。但请注意，keypress事件已被废弃，建议使用keydown或keyup。

change：当<input>、<select>或<textarea>元素的值发生变化且失去焦点时触发。

submit：当表单提交时触发。

focus：当元素获得焦点时触发。

blur：当元素失去焦点时触发。

load：当页面或图像完全加载后触发。

resize：当窗口或框架被调整大小时触发。

scroll：当用户滚动元素的滚动条时触发。

touchstart、touchmove、touchend：这些事件与触摸屏设备上的触摸操作相关。

mouseenter、mouseleave：与mouseover和mouseout类似，但它们在处理子元素时表现不同（mouseenter和mouseleave不会冒泡到子元素）。

contextmenu：当用户尝试打开上下文菜单（通常是右键菜单）时触发。

监听这些事件通常使用addEventListener()方法，它允许你为指定元素添加事件监听器。例如，要为按钮添加点击事件监听器，你可以这样做：

javascript
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

使用addEventListener()的优点之一是你可以为同一个元素添加多个相同类型的事件监听器，而不会相互覆盖。此外，它还提供了更好的灵活性，比如能够动态地添加和移除事件监听器。

时间日期对象

在JavaScript中，处理时间和日期主要通过Date对象来实现。Date对象提供了一系列的方法来操作日期和时间。
时间戳（Timestamp）通常指的是自1970年1月1日00:00:00 UTC（协调世界时）以来经过的毫秒数。
JavaScript中的Date对象可以很容易地转换成这种时间戳，也可以从时间戳转换回日期对象。

创建Date对象

你可以通过以下几种方式创建Date对象：

不传递参数：创建一个表示当前日期和时间的Date对象。

javascript
let now = new Date();
console.log(now); // 输出类似 "Wed Jun 23 2021 15:30:45 GMT+0800 (中国标准时间)"

传递表示日期的字符串：

javascript
let dateString = "June 23, 2021 15:30:45";
let specificDate = new Date(dateString);
console.log(specificDate); // 输出与字符串相对应的日期和时间

传递年、月、日等参数：可以直接传递年、月（注意月份是从0开始的，即0代表1月）、日、小时、分钟、秒、毫秒等参数。

javascript
let specificDate = new Date(2021, 5, 23, 15, 30, 45); // 注意月份是5（代表6月）
console.log(specificDate);
时间戳的使用

获取当前时间戳：可以使用Date对象的getTime()方法或简单地通过+操作符将Date对象转换为时间戳。

javascript
let timestamp = new Date().getTime(); // 使用getTime()方法
console.log(timestamp); // 输出类似 1624439445000

let timestamp2 = +new Date(); // 使用+操作符
console.log(timestamp2); // 同样输出时间戳

将时间戳转换为Date对象：可以直接将时间戳作为参数传递给Date对象的构造函数。

javascript
let timestamp = 1624439445000;
let dateFromTimestamp = new Date(timestamp);
console.log(dateFromTimestamp); // 输出对应的时间
示例：计算两个日期之间的时间差
javascript
let startDate = new Date("2021-01-01");
let endDate = new Date("2021-12-31");

let diff = endDate - startDate; // 直接相减得到毫秒数
let diffDays = Math.ceil(diff / (1000 * 60 * 60 * 24)); // 转换为天数

console.log(`Difference is ${diffDays} days.`);

这样，你就可以在JavaScript中灵活地使用Date对象和时间戳来处理时间和日期了。

父子兄弟节点操作

在JavaScript中，对DOM节点的操作经常涉及到父节点、子节点和兄弟节点的访问与修改。以下是一些常用的方法来操作这些节点：

父节点
获取父节点：使用parentNode属性。
javascript
var parent = element.parentNode;
子节点
获取子节点列表：使用childNodes（包括所有类型的节点，如元素节点、文本节点等）或children（仅包括元素节点）。
javascript
// 获取所有子节点（包括文本节点等）
var childNodes = element.childNodes;

// 获取所有元素子节点
var children = element.children;

// 访问第一个子节点（作为元素节点）
var firstChildElement = element.firstElementChild;

// 访问最后一个子节点（作为元素节点）
var lastChildElement = element.lastElementChild;
添加子节点：使用appendChild()或insertBefore()。
javascript
// 在父节点的末尾添加新子节点
parent.appendChild(newElement);

// 在参考节点之前添加新子节点
parent.insertBefore(newElement, referenceNode);
移除子节点：使用removeChild()。
javascript
// 移除子节点
parent.removeChild(childNode);
兄弟节点
获取兄弟节点：使用nextSibling和previousSibling（可能包含文本节点等非元素节点），或使用nextElementSibling和previousElementSibling（仅包括元素节点）。
javascript
// 获取下一个兄弟节点（作为元素节点）
var nextSiblingElement = element.nextElementSibling;

// 获取上一个兄弟节点（作为元素节点）
var previousSiblingElement = element.previousElementSibling;
示例

假设我们有以下HTML结构：

html
<div id="parent">
    <p>First Paragraph</p>
    <p id="middle">Middle Paragraph</p>
    <p>Last Paragraph</p>
</div>

我们可以使用JavaScript来操作这些节点：

javascript
// 获取父节点
var parent = document.getElementById('parent');

// 获取中间段落的元素
var middle = document.getElementById('middle');

// 添加新子节点
var newElement = document.createElement('p');
newElement.textContent = 'New Paragraph';
parent.appendChild(newElement);

// 移除子节点（假设我们知道要移除哪个节点）
// 注意：这里只是示例，实际上你可能需要遍历子节点或使用其他逻辑来确定要移除哪个节点
// parent.removeChild(middle); // 如果确实要移除middle

// 访问兄弟节点
var previousSibling = middle.previousElementSibling;
var nextSibling = middle.nextElementSibling;

console.log(previousSibling.textContent); // 输出: First Paragraph
console.log(nextSibling.textContent); // 输出: Last Paragraph

请注意，在移除子节点时，你需要确保你引用的是要移除的节点的正确引用。在上面的示例中，我注释掉了移除middle的代码，因为它会直接从DOM中删除该元素，并且这只是一个示例操作。在实际应用中，你可能需要根据不同的条件来确定要移除哪个节点。

本地存储增删改查

在JavaScript中，本地存储（Local Storage）是一个非常有用的功能，它允许我们在用户的浏览器中存储数据，并且这些数据即使在浏览器关闭后仍然保持。这使得在多个页面会话中保持用户数据或应用程序状态变得非常方便。以下是如何在JavaScript中使用本地存储进行增删改查的基本操作：

1. 存储数据（增加/修改）

使用localStorage.setItem(key, value)方法来存储数据。这里，key是存储数据的键名，而value是与该键名相关联的数据值。如果key已存在，则会覆盖原有的值。

javascript
// 存储数据
localStorage.setItem('username', 'JohnDoe');
// 也可以存储JSON对象，但需要先将对象转换为字符串
var user = {name: 'JohnDoe', age: 30};
localStorage.setItem('user', JSON.stringify(user));
2. 读取数据（查询）

使用localStorage.getItem(key)方法来获取与特定键名相关联的数据值。

javascript
// 读取数据
var username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

var user = localStorage.getItem('user');
console.log(JSON.parse(user)); // 将字符串转回对象，然后输出
3. 删除数据

使用localStorage.removeItem(key)方法来删除存储的数据项。

javascript
// 删除数据
localStorage.removeItem('username');
4. 清除所有数据

如果你想清除所有存储在localStorage中的数据，可以使用localStorage.clear()方法。

javascript
// 清除所有数据
localStorage.clear();
存储在localStorage中的数据以字符串形式存储，如果你需要存储非字符串类型的数据（如对象或数组），
你需要先使用JSON.stringify()方法将数据转换为字符串，然后在读取时使用JSON.parse()方法转换回原始数据类型。
箭头函数

箭头函数使用=>语法，并且不绑定自己的this、arguments、super或new.target。
这些函数表达式更适用于那些本不需要自己this的场合，并且能更简洁地写回调函数。

定义

箭头函数的基本语法如下：

javascript
(参数1, 参数2, …, 参数N) => { 函数体 }

如果函数体只有一行，可以省略大括号{}和return语句（自动返回表达式的值）。

示例
1. 无参数函数
javascript
const sayHello = () => {
  console.log('Hello!');
};

sayHello();  // 输出: Hello!
2. 单个参数函数

如果函数只有一个参数，可以省略参数周围的括号。

javascript
const square = x => x * x;

console.log(square(5));  // 输出: 25
3. 多个参数函数
javascript
const sum = (a, b) => a + b;

console.log(sum(2, 3));  // 输出: 5
4. 函数体只有一行且返回表达式的函数
javascript
const double = x => x * 2;

console.log(double(5));  // 输出: 10
5. 使用对象字面量作为返回值

如果箭头函数需要返回一个对象字面量，必须用小括号将对象字面量包起来，否则会被解析为函数体的开始。

javascript
const getPerson = () => ({ name: 'Alice', age: 30 });

console.log(getPerson());  // 输出: { name: 'Alice', age: 30 }
注意点

this的绑定：箭头函数不绑定自己的this，它会捕获其所在上下文的this值，作为自己的this值。这意味着在箭头函数内部，this指向的是定义它时的作用域，而不是调用时的作用域。

arguments对象：箭头函数没有arguments对象，但你可以使用剩余参数（...args）来访问函数的参数列表。

new操作符：由于箭头函数没有自己的this，因此不能使用new操作符来调用箭头函数，否则会抛出一个错误。

yield关键字：箭头函数不能用作Generator函数，即不能使用yield关键字。
实际写法示例
  function fn() {
      console.log("普通函数")
    }
    fn()
    //箭头函数写法 =>省略了function
    let fn1 = () => {
      console.log("箭头函数")
    }
    fn1()
    //箭头函数只有一行的写法可以省略{}和返回值
    let fn2 = (x, y) => console.log(x + y)
    fn2(3, 5)
    //箭头函数只有一个参数的写法可以省略()
    let fn3 = name => console.log("箭头函数只有一个参数的写法" + name)
    fn3("张三")

数组和对象的解构

在JavaScript中，解构赋值（Destructuring assignment）是一种表达式，它允许你从数组或对象中提取数据，并将其赋值给声明的变量，从而避免使用多个return语句或从数组中获取值时需要索引。这种语法使得代码更加简洁和易于阅读。

数组解构

数组解构允许你直接从数组中提取值，将其赋给变量。

基本用法
javascript
const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
跳过某些值

如果你对数组中的某些值不感兴趣，可以通过在对应位置放置逗号来跳过它们。

javascript
const [, , c] = [1, 2, 3];
console.log(c); // 3
默认值

你可以在解构赋值时指定默认值，以防数组中的相应位置没有值（undefined）。

javascript
const [a = 10, b, c = 20] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 20
剩余元素

你还可以使用剩余运算符（...）来收集数组中的剩余元素。

javascript
const [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 1
console.log(rest); // [2, 3, 4]
对象解构

对象解构允许你直接从对象中提取值，将其赋给声明的变量，这些变量的名称与对象中的属性名相匹配。

基本用法
javascript
const person = {
  name: 'Alice',
  age: 30,
  job: 'Engineer'
};

const { name, age, job } = person;
console.log(name); // Alice
console.log(age);  // 30
console.log(job);  // Engineer
更改变量名

如果你不想使用对象中的属性名作为变量名，可以在解构时指定一个新名称。

javascript
const { name: personName, age: personAge } = person;
console.log(personName); // Alice
console.log(personAge);  // 30
默认值

同样地，你可以在解构时指定默认值。

javascript
const { job: personJob = 'Unknown' } = person;
console.log(personJob); // Engineer

const anotherPerson = { name: 'Bob' };
const { job: anotherPersonJob = 'Unknown' } = anotherPerson;
console.log(anotherPersonJob); // Unknown
嵌套解构

你还可以对嵌套对象进行解构。

javascript
const user = {
  id: 1,
  profile: {
    name: 'Alice',
    age: 30
  }
};

const { profile: { name, age } } = user;
console.log(name); // Alice
console.log(age);  // 30

解构赋值是ES6中引入的一项非常有用的特性，它使得从数组或对象中提取数据变得更加简单和直观。
构造函数
在JavaScript中，构造函数是一种特殊的函数，主要用于创建和初始化对象。
当你使用new关键字调用一个函数时，这个函数就成为了一个构造函数。
构造函数的主要任务是定义对象将要拥有的属性和方法。

构造函数的特点

函数名首字母大写：按照JavaScript的命名习惯，构造函数的首字母通常大写，以区别于普通函数（普通函数首字母小写）。但这只是一种约定，JavaScript引擎并不强制要求。

使用new关键字调用：当你使用new关键字调用一个函数时，JavaScript会执行以下步骤：

创建一个新的空对象（即{}）。
将这个新对象的内部[[Prototype]]（即__proto__）链接到构造函数的prototype属性所指向的对象。
构造函数内部的this指向这个新对象。
执行构造函数中的代码（为这个新对象添加属性）。
如果构造函数返回了一个对象，则返回这个对象；否则，返回新创建的对象。

有一个prototype属性：每个构造函数都有一个prototype属性，这个属性是一个对象，包含了一个名为constructor的属性和一些用于对象实例的共享方法和属性。当你创建一个对象的实例时，这个实例会继承构造函数prototype属性上的所有属性和方法。

示例
javascript
function Person(name, age) {
  this.name = name;
  this.age = age;

  // 可以在这里添加更多属性和方法
  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

// 使用new关键字调用构造函数
const person1 = new Person('Alice', 30);

// 访问实例的属性和方法
console.log(person1.name); // Alice
console.log(person1.age);  // 30
person1.greet();           // Hello, my name is Alice and I am 30 years old.

// 构造函数原型上的属性和方法可以被所有实例共享（但通常不推荐在构造函数内部定义方法）
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}.`);
};

person1.sayHello(); // Hello, I'm Alice.

const person2 = new Person('Bob', 25);
person2.sayHello(); // Hello, I'm Bob.

在这个例子中，Person是一个构造函数，它创建了一个具有name、age属性和greet方法的对象。我们还向Person.prototype添加了一个sayHello方法，这个方法现在可以被所有Person的实例共享和访问。
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 逻辑运算符 且 && 或 || 非！
    let name //变量声明关键词let
    const PI=3.1415 //常量声明关键词const 声明时必须赋值
    let age
    let meal
    let arr = ["我", "刘德华", "吴彦祖"]
    age+=5//简写运算符相当于 age=age+5 其他-= *=类似 自增运算符++每次加1
    age++ //自增运算符++每次加1
    name = prompt("输入你的姓名")//输入语句 prompt
    gender = prompt("输入性别")
    age = Number(prompt("输入你的第一个年龄"))//转换成数据格式关键词number,否则+会当成文本组合，除了+号其他运算符会自动转换为数字
    let people=name+age+"岁" //字符串连接符+ 可let后直接赋值
    let all = `我今年${age}岁了` //模板字符串外面使用反引号变量使用${变量}包裹
    document.write(name, age, gender, arr[2], arr.length)//body主体输出关键字 document.write
    alert(`你的两个年龄相加是${age + age2}岁`) //弹窗输出
  </script>
</body>

</html>
最后修改：2024 年 08 月 27 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏