踏上JavaScript代码片段的奇妙探索之旅，30秒一览127段代码精粹（三）

JavaScript代码片段的奇妙世界：第三部分

简介

欢迎来到JavaScript代码片段探索之旅的第三部分！在经历了前两部分的旅程后，我们已经了解了42段代码片段的魅力。在这一部分，我们将继续深入JavaScript的奇妙世界，探索另外24段代码片段，每一秒都将为您带来醍醐灌顶般的顿悟。

获取当前日期和时间

const currentDate = new Date();
console.log(currentDate);

此段代码使用Date对象轻松获取当前日期和时间。您可以在浏览器的控制台中试用它，瞧！当前时间就在眼前。

从DOM中获取元素

const element = document.getElementById("my-element");
console.log(element);

通过document.getElementById方法，您可以从DOM中获取指定ID的元素。想象一下，您正在构建一个具有动态内容的网站，此代码片段就像一把万能钥匙，让您轻松访问所需元素。

添加事件监听器

const button = document.getElementById("my-button");
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

事件监听器就像警报系统，当指定事件（如按钮单击）发生时，它们会触发您定义的代码块。通过此代码片段，您可以让您的网页对用户的交互做出响应。

移除事件监听器

const button = document.getElementById("my-button");
button.removeEventListener("click", myEventHandler);

当您不再需要监听特定事件时，您可以使用removeEventListener方法将其移除。这就像关闭警报系统，让您的代码在不再需要时变得更加精简。

设置和获取cookie

document.cookie = "name=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
const cookies = document.cookie;

cookie就像存储在浏览器中的小笔记，用于保存用户偏好或会话信息。此代码片段可以让您设置和获取这些信息，为您的网站提供个性化体验。

创建和使用正则表达式

const pattern = /pattern/;
const str = "This is a string.";
console.log(pattern.test(str));

正则表达式是强大的模式匹配工具，可帮助您搜索和操作字符串。此代码片段演示了如何使用它们来查找特定的文本模式。

使用箭头函数

const sum = (a, b) => a + b;
console.log(sum(1, 2));

箭头函数是简洁且易于阅读的函数语法。此代码片段展示了如何用一行代码定义一个求和函数。

使用展开运算符

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];
console.log(combinedArr);

展开运算符（...）就像一个魔力棒，可以将多个数组或对象合并成一个。此代码片段演示了如何使用它来轻松合并数组。

使用解构赋值

const [first, second] = [1, 2, 3];
console.log(first); // 1
console.log(second); // 2

解构赋值是一种优雅的语法，可让您从数组或对象中提取值。此代码片段展示了如何从一个包含三个元素的数组中获取前两个元素。

使用对象扩展运算符

const obj1 = { name: "John Doe" };
const obj2 = { age: 30 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj);

对象扩展运算符（...）与展开运算符类似，但它用于合并对象。此代码片段展示了如何使用它来创建一个包含两个对象属性的新对象。

使用代理

const obj = { name: "John Doe" };
const proxy = new Proxy(obj, {
  get: (target, property) => {
    console.log(`Accessing property ${property}`);
    return target[property];
  }
});
proxy.name; // "John Doe"

代理就像一个守门人，拦截对对象属性的访问。此代码片段展示了如何使用代理来记录对对象属性的访问。

使用反射

const obj = { name: "John Doe" };
const propertyName = "name";
console.log(Reflect.get(obj, propertyName)); // "John Doe"

反射是一种在运行时检查和操作对象的方法。此代码片段演示了如何使用反射来获取对象属性的值。

使用Symbol

const mySymbol = Symbol("my-symbol");
const obj = {
  [mySymbol]: "John Doe"
};
console.log(obj[mySymbol]); // "John Doe"

Symbol是一种独特且不可变的数据类型，用于创建私有属性。此代码片段演示了如何使用Symbol来创建一个私有属性。

使用生成器函数

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}
const generator = generateSequence(1, 5);
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: 4, done: false }
console.log(generator.next()); // { value: 5, done: false }
console.log(generator.next()); // { value: undefined, done: true }

生成器函数是一种特殊类型的函数，它们能够暂停和恢复执行。此代码片段展示了如何使用生成器函数创建序列生成器。

使用异步函数

async function myAsyncFunction() {
  const result = await Promise.resolve(1);
  console.log(result); // 1
}
myAsyncFunction();

异步函数是处理异步操作的便捷方式。此代码片段演示了如何使用异步函数来执行一个异步操作，例如从Promise获取值。

使用模块

import { sum } from "./math.js";
console.log(sum(1, 2)); // 3

模块是代码重用的强大机制。此代码片段展示了如何使用模块来导入和导出函数。

使用类

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
const person = new Person("John Doe", 30);
person.greet();

类是创建和管理对象的蓝图。此代码片段展示了如何使用类来创建一个Person对象。

使用继承

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);
    this.jobTitle = jobTitle;
  }
  work() {
    console.log(`I am ${this.name} and I work as a ${this.jobTitle}.`);
  }
}
const employee = new Employee("John Doe", 30, "Software Engineer");
employee.greet();
employee.work();

继承是一种强大的机制，允许您创建基于现有类的子类。此代码片段展示了如何使用继承来创建Employee类，该类继承了Person类的属性和方法。

使用多态性

class Shape {
  constructor(name) {
    this.name = name;
  }
  getArea() {
    throw new Error("This method should be implemented in a subclass.");
  }
}
class Rectangle extends Shape {
  constructor(width, height) {
    super("Rectangle");
    this.width = width;
    this.height = height;
  }
  getArea() {
    return this.width * this.height;
  }
}
class Circle extends Shape {
  constructor(radius) {
    super("Circle");
    this.radius = radius;
  }
  getArea() {
    return Math.PI * this.radius ** 2;
  }
}
const shapes = [new Rectangle(2, 3), new Circle(5)];
shapes.forEach((shape) => {
  console.log(`${shape.name} has an area of ${shape.getArea()}.`);
});

多态性是一种重要的面向对象编程概念，它允许您使用统一的方式处理不同的对象类型。此代码片段展示了如何使用