JavaScript基础大总结（二）【必看】

内容接上回：JavaScript基础大总结（一）【必看】-优快云博客

DOM概述

DOM是HTML和XML文档的编程接口，提供了一种方式，使JavaScript能够访问和操作文档的元素、属性和内容。

选择DOM元素

1. getElementById()：通过元素的ID选择元素。

   let header = document.getElementById("header");

2. getElementsByClassName()：通过元素的类名选择元素集合。

   let boxes = document.getElementsByClassName("box");

3. getElementsByTagName()：通过标签名选择元素集合。

   let divs = document.getElementsByTagName("div");

4. querySelector()：使用CSS选择器选择第一个匹配的元素。

   let firstParagraph = document.querySelector("p");

5. querySelectorAll()：使用CSS选择器选择所有匹配的元素集合。

   let paragraphs = document.querySelectorAll("p");

修改DOM元素的样式

1. 直接设置样式：

   let element = document.getElementById("myElement");
   element.style.color = "red";
   element.style.fontSize = "16px";

2. 修改CSS类：

   element.classList.add("new-class");
   element.classList.remove("old-class");
   element.classList.toggle("active");

修改DOM元素的属性

1. 设置或获取属性值：

   let link = document.getElementById("myLink");
   link.href = "https://www.example.com";
   let currentHref = link.href;

2. 属性操作：

   let image = document.getElementById("myImage");
   image.src = "new-image.jpg"; // 修改图片源
   image.alt = "New image description"; // 修改图片描述

创建和删除DOM元素

1. 创建新元素：

   let newElement = document.createElement("div");

2. 添加和删除类：

   newElement.classList.add("my-class");

3. 设置属性：

   newElement.id = "newDiv";

4. 添加文本内容：

   newElement.textContent = "Hello, World!";

5. 添加子元素：

   let parentElement = document.getElementById("parent"); parentElement.appendChild(newElement);

6. 删除元素：

   let elementToRemove = document.getElementById("removeMe"); elementToRemove.parentNode.removeChild(elementToRemove);

事件监听

1. 添加事件监听器：

   element.addEventListener("click", function() {
       console.log("Element clicked!");
   });

JavaScript事件处理

事件的基本概念

• 事件：用户操作或浏览器行为触发的事件。
• 事件类型：如click、mouseover、keydown等。
• 事件冒泡：事件从子元素向父元素传播的过程。

事件监听器

事件监听器用于指定当特定事件发生时应该执行的函数。

1. 添加事件监听器

   • 使用addEventListener方法添加事件监听器。

     element.addEventListener('click', function() {
         console.log('Button clicked!');
     });

2. 移除事件监听器

   • 使用removeEventListener方法移除事件监听器。

     element.removeEventListener('click', handleClick);

3. 事件处理属性

   • 使用元素的onclick等属性添加事件监听器。

     <button onclick="handleClick()">Click me</button>

事件对象

每次事件被触发时，都会创建一个事件对象，它包含了事件的详细信息和方法。

1. 事件对象的属性

   • type：事件类型。
   • target：触发事件的元素。
   • bubbles：事件是否冒泡。

2. 阻止事件传播

   • 使用event.stopPropagation()阻止事件继续传播。

     function handleClick(event) {
         event.stopPropagation();
     }

3. 阻止默认行为

   • 使用event.preventDefault()阻止事件的默认行为。

     function handleLinkClick(event) {
         event.preventDefault();
         console.log('Link clicked, but default action prevented.');
     }

4. 事件委托

   • 利用事件冒泡原理，通过父元素监听多个子元素的事件。

     document.getElementById('parent').addEventListener('click', function(event) {
         if (event.target.tagName === 'A') {
             console.log('Link clicked:', event.target.href);
         }
     });

事件类型

• 鼠标事件：如click、dblclick、mousedown、mouseup、mouseover、mouseout。
• 键盘事件：如keydown、keyup、keypress。
• 触摸事件：如touchstart、touchend、touchmove。
• 页面事件：如load、unload、beforeunload。
• 表单事件：如submit、reset、change、focus、blur。

JavaScript异步编程

异步编程的基本概念

• 同步和异步：同步操作会阻塞代码执行，而异步操作允许其他操作在等待结果时继续执行。
• 回调函数：在异步操作完成后执行的函数。

回调函数

• 使用场景：用于处理异步操作完成后的结果或错误。
• 问题：可能导致回调地狱（callback hell），代码难以阅读和维护。

  function fetchData(callback) {
      setTimeout(() => {
          const data = { message: "Data loaded" };
          callback(null, data);
      }, 1000);
  }
  
  fetchData((error, result) => {
      if (error) {
          console.error(error);
      } else {
          console.log(result.message);
      }
  });

Promise

• 定义：Promise是一个表示异步操作最终完成或失败的对象。
• 状态：Pending（进行中）、Fulfilled（已成功）、Rejected（已失败）。

  const fetchDataPromise = () => {
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              const data = { message: "Data loaded" };
              resolve(data);
          }, 1000);
      });
  };
  
  fetchDataPromise()
      .then((result) => console.log(result.message))
      .catch((error) => console.error(error));

async/await

• async：用于声明一个异步函数，该函数内部可以使用await。
• await：用于等待一个Promise解决，暂停函数执行，直到Promise完成。

  async function fetchDataAsync() {
      try {
          const result = await fetchDataPromise();
          console.log(result.message);
      } catch (error) {
          console.error(error);
      }
  }
  
  fetchDataAsync();

错误处理

• Promise：使用catch方法捕获Promise链中的错误。
• async/await：使用try...catch结构捕获错误。

并发执行异步操作

• Promise.all：并行执行多个Promise，当所有Promise都成功解决时返回结果数组。

  Promise.all([fetchDataPromise(), fetchDataPromise()])
      .then(([result1, result2]) => {
          console.log(result1.message, result2.message);
      });
  
  Promise.race([fetchDataPromise(), fetchDataPromise()])
      .then((result) => console.log(result.message));

JavaScript错误处理与模块化

错误处理的重要性

• 预防程序崩溃：通过捕获和处理错误，避免程序因未处理的异常而崩溃。
• 提供反馈：向用户或开发者提供错误发生的上下文信息。
• 增强健壮性：使程序能够从错误中恢复并继续执行。

错误捕获与try...catch结构

• try块：包含可能抛出错误的代码。
• catch块：当try块中的代码抛出错误时执行。
• finally块：无论是否发生错误，都会执行的代码块。

  try {
      // 可能抛出错误的代码
      const result = someRiskyOperation();
  } catch (error) {
      // 处理错误
      console.error("An error occurred:", error);
  } finally {
      // 清理工作，如关闭文件流或数据库连接
  }

抛出错误：throw语句

• 使用throw语句主动抛出错误，可以是Error对象或任何值。

  function validateInput(input) {
      if (!input) {
          throw new Error("Input cannot be empty");
      }
  }

错误对象

• Error构造函数用于创建错误对象，包含错误信息和堆栈跟踪。

ES6模块系统

• 模块化：将代码分割成独立、可重用的模块。
• import语句：从其他模块导入函数、对象或原始值。
• export语句：从当前模块导出内容供其他模块使用。

创建模块

• 使用export导出模块的公共接口。

  // mathConstants.js
  export const PI = 3.14;
  export function add(x, y) {
      return x + y;
  }

• 使用import导入模块的内容。

  // app.js
  import { PI, add } from './mathConstants.js';
  
  console.log(`The value of PI is ${PI}`);
  console.log(`The sum is ${add(1, 2)}`);

模块化的好处

• 解耦：模块之间相互独立，降低代码间的依赖。
• 可维护性：独立的模块易于维护和更新。
• 可重用性：模块可以在不同的项目中重用。

ES6及后续版本的新特性概览

1. 箭头函数（Arrow Functions）

   • 箭头函数提供了一种更简洁的定义函数的方法。

     const sum = (a, b) => a + b;

2. 模板字符串（Template Literals）

   • 模板字符串允许在字符串中嵌入表达式，增强了字符串的表达能力。

     const name = "Alice";
     console.log(`Hello, ${name}!`);

3. 解构赋值（Destructuring Assignment）

   • 解构赋值允许从数组或对象中提取数据并赋值给变量。

     const [a, b] = [1, 2];
     const { x, y } = { x: 10, y: 20 };

4. 默认参数值（Default Parameters）

   • 函数参数可以指定默认值，提高函数的灵活性。

     function greet(name, greeting = "Hello") {
         console.log(`${greeting}, ${name}!`);
     }

5. 展开运算符（Spread Operator）

   • 展开运算符允许将数组或对象的元素展开或合并。

     const numbers = [1, ...[2, 3, 4]];
     const obj = { ...{ a: 1 }, ...{ b: 2 } };

6. Promises

   • Promises用于异步计算，提供了一种更好的异步编程模型。

     const promise = new Promise((resolve, reject) => {
         setTimeout(() => resolve("Data"), 1000);
     });
     promise.then(data => console.log(data));

7. async/await

   • async和await使得异步代码的编写更接近同步代码的风格。

     async function fetchData() {
         try {
             const data = await fetchDataPromise();
             console.log(data);
         } catch (error) {
             console.error(error);
         }
     }

8. 类（Classes）

   • 类的引入使得面向对象编程更加直观和简洁。

     class Person {
         constructor(name) {
             this.name = name;
         }
         greet() {
             console.log(`Hello, my name is ${this.name}`);
         }
     }

9. 模块（Modules）

   • ES6模块系统提供了一种定义和使用模块的方式，支持import和export。

     // mathUtils.js
     export const PI = 3.14;
     export function add(x, y) {
         return x + y;
     }
     
     // app.js
     import { PI, add } from './mathUtils.js';

10. 私有字段（Private Fields）

    • 私有字段提供了一种定义类内部私有数据的方式。

      class Person {
          #name;
          constructor(name) {
              this.#name = name;
          }
          get Name() {
              return this.#name;
          }
      }

 直接生成js代码

YDUIbuilder可通过拖拽构建，轻松生成HTML与CSS和JS代码。拖拽间，JS代码自然流淌，无需复杂手写。可视化编程与代码生成的完美结合，让每个创意都触手可及。YDUIbuilder，让编程不再是障碍，而是创造的翅膀。

开源下载地址：yduibuilder: 快速开发UI界面，原型设计即前端开发

JavaScript作为构建现代网页的核心语言，提供了丰富的功能和强大的能力。通过掌握JavaScript的基础知识，开发者可以创建交互性强、用户体验佳的网页应用。