前言

作为一个低年级的计算机本科生，我深知现在的就业情况，而我只是一个就读普通院校的学生，学校的课程实在是学不到什么！自己在计算机方面也没什么天赋‍♂️，所以我决定当身边的同学还沉浸在 打、cs 、王者、原神启动的时候，先把前端学起来。哈哈哈！！！

下面就我最近学习前端总结了一些学习笔记，欢迎大佬在评论区指导

学习笔记(乱序，想到啥就写了)1.前后端联通的桥梁

fetch('https://api.example.com/data')  // 发送 GET 请求
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应失败');
    }
    return response.json();  // 将响应内容解析为 JSON
  })
  .then(data => {
    console.log(data);  // 处理 API 返回的数据
  })
  .catch(error => {
    console.error('请求发生问题:', error);  // 处理错误
  });

fetch()函数：fetch() 是 JavaScript 中用来发送 HTTP 请求的一个内置方法，它会返回一个Promise,表示返回的结果。 而这个Promise是JavaScript中的一个用于表示异步操作最终完成（或者失败）及其结果值的机制。它存在三种状态：

为什么要返回一个 Promise？因为通常我们发送网络请求，读取文件或计时器时它不是立即执行完，它需要一定的时间。在这里当你发起网络请求时，fetch() 会立即返回一个 Promise 对象，而实际的请求可能需要一段时间来完成。Promise 代表的是这个请求的最终结果（可能是拿到的数据，也可能是错误），而不是请求执行的实时过程。

const promise = fetch('https://api.example.com/data');
console.log(promise);  // 输出: Promise {  }等待中
promise.then(response => {
  console.log(response);  // 如果请求成功，输出 Response 对象
}).catch(error => {
  console.log(error);  // 如果请求失败，输出错误信息
});

在fetch()函数执行时会返回一个Promise，该 Promise 初始状态是 pending（等待中），表示请求正在进行。要是请求成功Promise的状态就会变成Fulfilled（已完成） 然后被.then()方法中的回调函数处理数据。要是请求失败promise的状态就是Rejected（已拒绝） 也就是读取数据失败，catch() 方法中的回调会被执行，处理错误。

再来看看then()方法

通过上面的例子我们知道then()是用来处理Promise的，那它是如何工作的呢？then() 的作用：

等待 Promise 的结果：你把 .then() 绑定到返回的 Promise 上，当请求完成时（无论是成功还是失败），会调用 .then() 中的回调。处理成功的结果：如果请求成功，.then() 中的回调函数会收到 Response 对象作为参数，你可以用它来访问服务器返回的数据。继续链式调用：.then() 返回的也是一个新的 Promise，你可以继续链式调用 .then()，逐步处理数据。也就是这样的：

const promise = new Promise((resolve, reject) => {
let success = true; 
if (success) {
resolve('请求成功!');
} else { 
reject('请求失败!');
}
promise
  .then(result => {
    console.log(result);  // 输出: '数据加载成功'
    return '下一步处理';  // 返回一个新的值
  })
  .then(result => {
    console.log(result);  // 输出: '下一步处理'
    return new Promise((resolve) => resolve('异步操作完成'));
  })
  .then(result => {
    console.log(result);  // 输出: '异步操作完成'
  })
  .catch(error => {
    console.log(error);  // 捕获错误
  });

解析：

2.解构

解构是什么？

解构：它是JavaScript 中的一种语法，允许从数组或对象中提取值，并将它们赋值给变量。它可以简化代码，使提取数据更加简洁和直观。

数组结构：

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

数组解构可以很方便的让你实现从数组中提取元素赋值给变量。

对象解构

在对象中解构也可是实现提取元素赋值给变量

const person = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};
const { name, age, city } = person;
console.log(name); // Alice
console.log(age);  // 25
console.log(city); // New York

解构还可以用在交换变量上：

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1

一般我们要交换x和y的值我们需要引入第三个变量做中间值的，但用解构就不需要。

解构还用在什么地方呢？

前两天，我在学习react的时候我发现在react的组件中也经常使用解构；

在React 中引入useState功能

import React from 'react';
const useState = React.useState;

解释：

在 React 中，解构也经常用于从 props 或 state 中提取数据，代码更简洁易懂。

function Welcome({ name, age }) {
  return <h1>Hello, {name}. You are {age} years old.h1>;
}
const person = { name: 'Eve', age: 22 };
<Welcome {...person} />

map()方法：

map() 是 JavaScript 中的一个数组方法，用于遍历数组中的每个元素，并对每个元素执行指定的回调函数，返回一个新数组，它会包含每次回调函数执行的结果。我们来看看map()方法的基本语法：

array.map(callback(currentValue, index, array), thisArg);

map() 的作用是遍历数组并对每个元素应用 callback 函数。所以callback是必需的，它会处理数组中的每个元素，并返回一个新的值，该值会被存储在 map() 返回的新数组中。它可以接受三个参数

而thisArg是可以有也可以没有的

const numbers = [10, 20, 30];
const result = numbers.map((num, index, array) => {
  return `Index ${index}: ${num} (Original Array: ${array})`;
});
console.log(result);
// [
//   "Index 0: 10 (Original Array: 10,20,30)",
//   "Index 1: 20 (Original Array: 10,20,30)",
//   "Index 2: 30 (Original Array: 10,20,30)"
// ]

(num, index, array) => { return '...' } 这个匿名函数就是 callback 函数

总结在fetch()中通过使用 Promise，异步代码变得更加易于理解和管理，可以通过链式调用 .then() 和 .catch() 来处理成功和失败的情况，而如果没有 Promise 或类似的机制，代码将变得非常复杂，容易出现“回调地狱”（callback hell）问题。解构的好处：允许数组或对象中提取值，并将它们赋值给变量。它可以简化代码，使提取数据更加简洁和直观。map()方法的特点：

今天就分享这么多， 要是有什么总结的不对的地方欢迎大佬在评论区指出。

最后，各位大佬我在参加掘金官方的年度作者计划，能不能给我投投票呀

（づ￣3￣）づ╭❤️～求求了，我真的很想要那个定制奖杯