【DAY43-2】前端知识整理

HTML:

超链接标签：<a href="">内容</a>

href：链接地址，可以是内部链接，也可以是内部链接

跳转到超链接设置的锚的位置的语法：<a href="#锚名">

HTML表格：

<table>表格

<tr>行

<td>单元格

单行文本域：

<form>

        <input type="text" name=......>

</form>

密码框：type=“password"

文件域：type="file"

单选框：type="radio"

默认选中状态：checked

下拉菜单：

<select>

        <option value="">选项</option>

</select>

默认选择状态：selected

Node.js:

Node.js 是一个基于 Chrome 的 V8 JavaScript 引擎的开源、跨平台 JavaScript 运行环境。它可以让 JavaScript 不仅仅只在浏览器中运行，也可以在服务器端运行，并且具有事件驱动、非阻塞 I/O 的特性，这使得 Node.js 能够处理高并发、高吞吐量的网络应用。

Node.js 的主要用途是编写服务器端应用，它可以连接数据库、处理HTTP请求、构建Web应用、处理文件输入输出等。但是它的应用领域并不仅限于服务器端，它也可以用于编写命令行工具、桌面应用程序、浏览器扩展程序等。

Node.js 使用模块化的架构，可以轻松地引入模块，也可以发布自己的模块供别人使用。它的包管理工具 npm 是非常强大的，可以帮助开发者快速、方便地引入和管理项目所需的依赖包。同时，Node.js 也有一个庞大的社区，可以提供各种各样的开源模块和工具，让开发者快速构建应用。

Node.js为vue.js的生态，使用的地方有：

1. Vue CLI（Vue.js 的官方脚手架工具）：Vue CLI 是通过 Node.js 运行的命令行工具，它可以帮助开发者快速搭建 Vue.js 项目，并提供了一些插件和工具以加快开发。Vue CLI 使用了 webpack 和 babel 等工具来打包和编译 Vue.js 应用。

2. 服务器端渲染（SSR）：Vue.js 可以在服务器端进行渲染，这需要依赖 Node.js 提供的服务器环境。通过服务器端渲染，可以提高网页的性能和SEO，并且使得从客户端到服务器端的数据交换更加稳定可靠。

3. 单元测试和端到端（E2E）测试：在 Vue.js 项目中，可以通过一些测试框架来编写自动化测试。这些测试通常在 Node.js 环境中运行，以确保代码的行为符合预期。

4. 开发工具和插件：在 Vue.js 的生态系统中，有许多基于 Node.js 的开发工具和插件，比如 Vue.js devtools，这是一款 Chrome 插件，用于调试 Vue.js 应用程序。

vue：

Vue.js（通常称为 Vue）是一款流行的JavaScript 前端框架，用于在 Web 网页中构建用户界面。

Vue.js 的核心库只关注视图层的渲染和状态管理，而且容易扩展，可以搭配许多各种各样的插件和库来开发复杂的应用程序。

Vue.js 主要由三部分组成：

• 核心库：实现了 Vue.js 的基本功能，包括数据绑定、组件化、事件处理等。

• Vue CLI：Vue.js 的命令行工具，提供了一个快速搭建 Vue.js 应用程序的脚手架。

• Vue.js 的状态管理库，用于管理应用中的数据状态。

 Vue.js 的主要特点包括：

1. 响应式设计：Vue.js 能够自动追踪数据的变化，并且及时更新页面显示的内容，这一特点称为“响应式设计”。开发者可以通过简单的声明式语法，将数据绑定到页面中的元素上，从而快速构建交互性强、用户体验好的 Web 应用程序。

2. 组件化开发：Vue.js 的组件化开发方式使得开发者能够把一个大型的应用程序划分为多个组件，提高了应用程序的可维护性和可复用性。组件之间可以互相传递数据和事件，也可以进行嵌套和组合。

3. 指令和过滤器：Vue.js 提供了丰富的指令和过滤器，用于处理页面显示效果和数据处理等逻辑。例如 v-for 指令可以用于循环渲染列表，v-bind 指令可以用于绑定元素属性，v-on 指令可以用于处理用户事件等等。

4. 虚拟 DOM：Vue.js 使用虚拟 DOM 技术，使得页面更新的效率更高，减少了页面渲染的开销。在更新页面时，Vue.js 会通过比较虚拟 DOM 的差异来更新真实的 DOM，而不是每次都重新渲染整个页面。

以上就是 Vue.js 的一些主要特点和优势。它的口号是“渐进式框架”，意味着开发者可以逐步使用各种特性和工具，以适应不同的开发场景。

DOM

DOM 是 Document Object Model（文档对象模型）的缩写，它是一种表示 HTML、XML 等文档的标准方式，可以使用 JavaScript 来操作和更新文档的内容、结构和样式。DOM 可以把文档看作是一个树形结构，文档中的每个元素都是树中的一个节点，通过操作这个树，我们可以改变页面的显示效果。DOM 不仅仅适用于 Web 页面，也适用于其他文档和 XML 应用程序。

在 Web 应用程序中，DOM 是由浏览器提供的，每个文档都有一个与之相关联的 DOM。通过 JavaScript 可以访问 DOM，创建、删除或修改页面元素，以及监听用户事件。例如，我们可以使用 DOM 技术来修改文本内容、添加、删除或重排元素，同时还可以对元素进行样式设置、移动、显示或隐藏等操作。

DOM 主要包含以下几个核心概念：

1. 节点（Node）：文档中的每个元素、属性、文本内容等都是一个节点，每个节点可以包含多个子节点。节点对象根据其类型可以有不同的属性和方法。

2. 元素（Element）：文档中的基本单元，用于表示 HTML 标签，每个元素都可以包含多个子节点和属性。

3. 属性（Attribute）：文档中每个元素都可以包含多个属性，属性用于为元素提供附加信息，并影响元素的样式和行为。

4. 事件（Event）：文档中的交互行为，例如用户点击、鼠标悬停等，都会触发事件。通过注册事件监听器，可以在特定事件发生时执行相应的操作。

DOM 的使用可以大大提高 Web 应用程序的交互性和可控性，使得开发者可以更加灵活地控制页面的行为和样式。

在使用 DOM 进行修改时，需要注意以下几点：

1. 避免直接操作 HTML 字符串：使用 innerHTML 或 outerHTML 可以直接修改或添加 HTML 字符串，但这种操作会破坏当前节点的所有子节点和事件监听器。因此，如果需要对节点进行修改、添加或删除操作，应该使用 DOM API 提供的方法，例如 createElement、appendChild、insertBefore、removeChild 等。

2. 尽量减少 DOM 操作次数：频繁的 DOM 操作会消耗大量的计算资源，导致页面的性能下降。因此，在进行多次 DOM 操作时，可以考虑批量更新元素，使用文档碎片来减少 DOM 操作次数。

3. 优化 DOM 的查询和遍历：DOM 查询和遍历也是常见的性能瓶颈，因此需要尽可能地减少这些操作。可以通过缓存查询结果、使用更具体的选择器、使用 class、id 或索引等方法来优化 DOM 查询和遍历。

4. 兼容性问题：不同的浏览器可能会对 DOM 的 API 进行改动或扩展，因此需要针对不同的浏览器进行测试和兼容性处理

事件循环： 

Event Loop 是 JavaScript 的一种机制，用于处理异步事件的执行方式。事件循环可以理解为一个事件队列，当主线程完成当前任务后，就会从事件队列中取出下一个任务执行。在事件队列中，异步事件会被添加到队列的末尾，等待主线程空闲时执行。

事件循环的实现方式是基于事件轮询的机制。事件轮询是一种实现异步事件的机制，通过轮询事件队列来获取新的事件，并将其推入执行栈中执行。

在事件循环中，有三种类型的任务：

1. 宏任务（macro task）：包括整体代码 script、setTimeout、setInterval、setImmediate、UI rendering 等任务，需要被推入事件队列中执行。

2. 微任务（micro task）：包括 Promise、process.nextTick、Object.observe 等任务，需要被优先执行，会在当前任务执行完毕后立即执行。

3. 渲染任务（render task）：当屏幕需要更新时执行，也属于宏任务。

当主线程空闲时，事件循环会首先执行微任务队列中的任务，直到微任务队列为空，然后再执行宏任务队列中的任务。每次执行完一个宏任务时，就会检查微任务队列，如果存在微任务，则按顺序执行完微任务，否则继续执行下一个宏任务。

事件循环的工作机制极其重要，尤其是对于异步编程和并发执行的 JavaScript 应用程序来说。理解事件循环的工作原理和机制，有助于优化 JavaScript 应用程序的性能和稳定性，以及避免一些常见的 bug 和错误。

JavaScript 在语言层面上提供了很多异步编程的解决方案，其中包括回调函数、Promise、async/await 等。这些解决方案都是基于事件循环机制实现的。

async/await：

async 和 await 是 ES2017 引入的功能，用于编写异步代码的简洁、易读并且可维护。

简单来说，async 和 await 是一种用于处理 Promise 对象的语法糖。通过 async 声明的函数将自动返回一个 Promise 对象，而 await 可以暂停 Promise 的执行，等待 Promise 对象完成后再继续执行。

以下是 async 和 await 的基本用法：

async function test() {
  // 使用 await 等待 Promise 完成
  const result = await somePromise;

  // 可以像同步代码一样使用 Promise 的结果
  console.log(result);
}

test();

在这个例子中，test() 函数被声明为 async，自动返回一个 Promise 对象。在函数中，await 可以等待 Promise somePromise 完成，并将结果存储在 result 变量中。当 Promise 完成后，console.log(result) 将被执行。

需要注意的是，使用 await 必须在 async 函数中。同时，在使用 await 时需要确保 Promise 已经被正确处理，否则可能会导致程序出错。

当使用 await 等待 Promise 时，如果 Promise 被拒绝（rejected），则会抛出一个错误，可以通过 try-catch 捕获这个错误并进行错误处理。例如：

async function test() {
  try {
    // 使用 await 等待 Promise 完成
    const result = await somePromise;

    // 可以像同步代码一样使用 Promise 的结果
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

test();

除了使用 async/await 的方式处理Promise外，还可以使用传统的 Promise 链（Promise chain）方法，例如：

function fetchData() {
  return fetch('https://some-api.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      return data;
    })
    .catch(error => console.error(error));
}

这里调用 fetch 函数获取数据，然后使用 Promise 链调用 then 方法处理返回的数据。如果出现错误，可以使用 catch 方法进行错误处理。如果使用 async/await 重写这段代码，可能会更简明易读：

async function fetchData() {
  try {
    const response = await fetch('https://some-api.com/data');
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error(error);
  }
}

总之，async/await 提供了一种简单而直观的方法，用于处理 Promise，减少了 Promise 链的嵌套和回调地狱的问题，提高了异步代码的可读性。

除了基本的用法，async 和 await 还有一些高级特性和用法，例如：

1. 并发执行多个异步操作

通过将多个 Promise 对象放在 Promise.all() 函数中，可以并发执行这些异步操作并等待它们全部完成。

const results = await Promise.all([promise1, promise2, promise3]);

1. 给异步操作设置超时时间

使用 Promise.race() 函数可以在一组异步操作中使用超时时间。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('Timeout')), 5000);
});

const result = await Promise.race([promise, somePromise]);

上述代码会在 5 秒钟后，如果 somePromise 仍未完成，则抛出一个超时错误。

1. 处理多个 Promise 对象的错误

可以使用 Promise.all() 函数和 catch() 方法来捕获所有 Promise 的错误。当其中任何一个 Promise 被拒绝时，Promise.all() 返回的 Promise 对象被拒绝，并返回一个拒绝原因为一个数组，其中包含每个 Promise 的拒绝原因。

try {
  const results = await Promise.all([promise1, promise2, promise3]);
  console.log(results);
} catch (errors) {
  console.error(errors);
}

上述代码将捕获所有 Promise 的错误，而不仅仅是第一个被拒绝的 Promise。

总之， async 和 await 是一种非常强大和灵活的异步编程语言特性，能够帮助开发人员写出更加简单、可读和可维护的异步代码，提高开发效率并减少出错的可能性。

async 和 await 极大地简化了异步代码的编写和阅读。在处理异步操作时，通过使用 async 和 await，可以轻松地实现代码的可读性和可维护性。

回调函数是最基本的异步编程方式。它通过将异步任务的回调函数作为参数传递到异步函数中，当异步任务完成时调用该回调函数，通知主线程继续执行。

Promise

Promise 是 ECMAScript 6 新增的一种处理异步操作的方式。它可以用来处理异步函数的返回值，并且提供了链式调用和错误处理等功能。Promise 对象有三种状态：pending、fulfilled 和 rejected，其中 pending 状态表示异步操作正在进行中，fulfilled 状态表示异步操作已经成功完成，rejected 状态表示异步操作失败。

async/await 是 ECMAScript 2017 新增的异步编程语法糖，它可以使异步代码看起来更加同步和清晰。async 和 await 分别用来定义异步函数和等待异步操作的结果。async 函数的返回值是一个 Promise 对象，可以使用 await 操作符来等待该 Promise 对象的结果。

总之，在编写 JavaScript 异步代码时，需要根据实际需求选择适合的异步编程方式，并遵循最佳实践来实现可读性高、稳定性好的异步代码。

在使用Promise时，可以通过Promise构造函数来创建新的Promise对象，然后使用then()和catch()方法来操作Promise对象返回的结果。then()方法可以接收两个参数，分别是完成回调函数和拒绝回调函数，用于处理Promise完成和未能完成的情况；catch()方法用于捕获Promise未能成功完成的情况，并返回错误信息。

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    const num = Math.random()
    if(num > 0.5) {
      resolve(num)
    } else {
      reject(new Error('Promise rejected'))
    }
  }, 1000)
})

p.then((num) => {
  console.log('Promise fulfilled with num:', num)
}).catch((error) => {
  console.error('Promise rejected with error:', error.message)
})

在这个示例中，创建了一个新的Promise对象，使用setTimeout模拟异步操作，当操作成功完成时调用resolve函数，当操作未能完成时调用reject函数。然后使用then()和catch()方法来处理操作完成和未完成的情况。

在使用 Promise 时，还可以使用 Promise.all() 和 Promise.race() 方法来处理多个 Promise 对象的情况。

Promise.all()

Promise.all() 方法接收一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当所有的 Promise 对象都完成时，返回的 Promise 对象也会完成，返回结果是所有 Promise 对象的结果组成的数组。如果其中一个 Promise 对象拒绝，返回的 Promise 对象也会拒绝，并返回拒绝的原因。

const p1 = Promise.resolve('promise 1 resolved')
const p2 = Promise.resolve('promise 2 resolved')
const p3 = Promise.resolve('promise 3 resolved')

Promise.all([p1, p2, p3])
  .then((results) => {
    console.log('Promise.all() resolved with results:', results)
  })
  .catch((error) => {
    console.error('Promise.all() rejected with error:', error)
  })

 在这个示例中，创建了三个 Promise 对象，使用 Promise.all() 方法将这三个 Promise 对象作为参数传入，然后使用 then() 方法来处理所有的 Promise 对象都完成时的情况，输出结果为所有 Promise 对象的结果组成的数组。

Promise.race() 

它与 Promise.all() 方法类似，也接收一个 Promise 对象数组作为参数并返回一个新的 Promise 对象。当数组中的任意一个 Promise 对象完成时，返回的 Promise 对象也会完成，返回对应 Promise 对象的结果。如果其中一个 Promise 对象拒绝，返回的 Promise 对象也会拒绝，并返回拒绝的原因。

以下是一个 Promise.race() 方法的示例：

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise 1 resolved')
  }, 1000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise 2 resolved')
  }, 2000)
})

Promise.race([p1, p2])
  .then((result) => {
    console.log('Promise.race() resolved with result:', result)
  })
  .catch((error) => {
    console.error('Promise.race() rejected with error:', error)
  })

在这个示例中，创建了两个 Promise 对象，使用 Promise.race() 方法将这两个 Promise 对象作为参数传入，然后使用 then() 方法来处理其中一个 Promise 对象完成时的情况，输出结果为第一个完成的 Promise 对象的结果，而不会等第二个对象完成

作用域：

在 JavaScript 中，作用域是一种控制变量可见性和生命周期的机制。作用域可以分为全局作用域和局部作用域。

全局作用域是指变量在整个代码中都可见和访问，在任何地方都可以使用。在浏览器中，全局作用域通常是指 window 对象。

局部作用域是指变量只在所在代码块中可见和访问，在代码块外部无法访问。在 JavaScript 中，局部作用域通常是通过函数来实现的。

在 ES6 中，引入了 let 和 const 关键字，可以用来声明块级作用域变量和常量。let 和 const 只在声明它们的代码块中可见，并且不会受到函数作用域外的影响。

JavaScript 还提供了闭包的机制，它可以在函数内定义一个局部作用域，并且保持该作用域在函数执行后依然存在。闭包可以用来访问函数作用域中的变量和保存状态，是一种强大的编程技巧。

this

在 JavaScript 中，this 关键字用于访问当前执行上下文中的对象。由于 JavaScript 是一种动态绑定语言，this 的值在运行时才确定，可以在不同的上下文中指向不同的对象。

this 的值在不同的情况下有不同的指向：

1. 全局上下文中，this 指向全局对象。在浏览器中，全局对象是 window；在 Node.js 中，全局对象是 global。

2. 函数上下文中，this 的值取决于函数的调用方式。如果函数是作为对象的方法调用，this 就指向该对象；如果函数作为普通函数调用，this 就指向全局对象。

3. 构造函数上下文中，this 指向正在创建的新对象。

4. apply()、call() 和 bind() 方法可以显式地指定函数内部的 this 值，其中 apply() 和 call() 方法会立即执行函数，而 bind() 方法会返回一个新的函数，需要手动调用。

 1.new

new 运算符用于创建一个新对象。它可以调用构造函数，并返回一个新的对象，同时也会自动将 this 绑定到该对象。

举个例子：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var person = new Person("John", 22);

在这个例子中，new 运算符创建了一个 Person 实例，并将 this 绑定到该实例，将 name 和 age 属性添加到该实例中。

2.bind

bind 方法返回一个绑定了指定 this 的函数，该函数在调用时会将绑定的 this 作为函数的 this 传递。

举个例子：

var obj = { x: 1 };
function foo() {
    console.log(this.x);
}

var bar = foo.bind(obj);
bar(); // 输出 1

在这个例子中，bind 方法返回了一个新函数 bar，并将该函数的 this 绑定到了 obj 上。

3.call

call 方法调用一个函数，并将指定的对象绑定到函数的 this 上，然后传递指定的参数。

举个例子：

var obj = { x: 1 };
function foo(a, b) {
  console.log(this.x + a + b);
}

foo.call(obj, 2, 3); // 输出 6

在这个例子中，call 方法调用 foo 函数，并将 obj 作为该函数的 this 对象绑定，然后传递 2 和 3 作为该函数的参数。

4.apply

apply 方法调用一个函数，并将指定的对象绑定到函数的 this 上，然后将指定的参数作为一个数组传递。

举个例子：

var obj = { x: 1 };
function foo(a, b) {
  console.log(this.x + a + b);
}

foo.apply(obj, [2, 3]); // 输出 6

在这个例子中，apply 方法调用 foo 函数，并将 obj 作为该函数的 this 对象绑定，然后传递一个包含 2 和 3 的数组作为该函数的参数。

在箭头函数中，this 的值与外层函数的 this 值相同，与箭头函数本身的执行上下文无关。箭头函数使用的是词法作用域，即在代码中定义时，this 的值就已经确定。

箭头函数：

箭头函数（Arrow Function）是在ES6中引入的一种新的函数声明方式，也称为“Lambda函数”或“简洁函数”。

箭头函数通常使用箭头符号（=>）来定义，其基本语法如下：

(parameters) => { statement }

其中，parameters 是可选的函数参数列表，可以是零个或多个参数，用逗号分隔。如果没有参数，则使用空括号表示。

statement 是函数体，通常是一条或多条语句组成的代码块。如果函数体只有一条语句，则可以省略花括号，并将这个语句作为函数体的返回值。

例如，以下是一个简单的箭头函数的例子：

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

非箭头函数形式：

function sum(a, b) {
  return a + b;
}

该例子定义了一个接受两个参数的箭头函数，将这两个参数相加并返回它们的和。该函数可以像普通函数一样被调用：

console.log(sum(2, 3)) // 输出：5

箭头函数的一个特点是它的 this 值是固定的，指向定义时所在的上下文的 this 值，而不是运行时所在的上下文。这可以解决 JavaScript 中函数作为回调函数时 this 值不确定的问题。

模块化和class:

模块化（modularity）是指通过将一个大型系统划分为独立的、可重用的组件或模块来简化复杂系统的设计和开发过程。每个模块都有明确定义的接口，可以通过这些接口来与其他模块进行通信。模块化有助于降低系统的复杂性、提高代码的可读性和可维护性，同时也有助于提高系统的灵活性和可扩展性。

在编程中，我们通常会将一些相关的数据和函数放到一个独立的文件中，这个文件就是一个模块。我们可以使用 Python 中的 import 语句来导入这个模块，并使用其中的函数和数据。Python 标准库中包含了许多有用的模块，比如 math、random、datetime 等。

Class（类）是面向对象编程中的一个重要概念。它是一种自定义数据类型，可以用来描述一类事物的属性和行为。类定义了一组方法，这些方法描述了对象可以执行的操作，并且每个对象都拥有一组独立的属性。在 Python 中，使用 class 关键字定义一个类，可以包含数据属性和方法。

类中的方法可以访问类的数据属性和对象的实例属性，并且方法可以被重载和覆盖，从而实现不同的功能。类可以派生出子类，并且子类可以继承父类的属性和方法，并可以添加自己的属性和方法。

面向对象编程通常被用于开发大型系统，尤其是需要复杂数据结构和算法的系统。使用面向对象编程可以提高代码的可读性、可复用性和可维护性。Python 作为一种支持面向对象编程的语言，在实践中得到了广泛的应用。

map：

Map 是一种以 key 和 value 作为存储方式的集合。其中每个键（key）只会出现一次，可以将字符串、数字、数组等类型作为键，并且键和值都可以是任意数据类型。

常用方法：

• set(key, value)：添加键值对。
• get(key)：根据键获取对应的值。
• has(key)：判断是否存在该键。
• delete(key)：删除该键值对。
• clear()：清空Map。

const map = new Map()
map.set('a', 1)
map.set('b', 2)
console.log(map.get('a')) // 1
console.log(map.has('b')) // true
map.delete('b')
console.log(map) // Map(1) { 'a' => 1 }

Set:

Set是一种存储唯一值的集合。其中每个值只会出现一次，可以存储字符串、数字、对象等类型的数据。和数组不同的是，Set 中的元素是无序的，不能通过索引访问。

常用方法：

• add(value): 添加一个新元素。
• has(value): 判断集合中是否存在该元素。
• delete(value): 删除集合中指定的元素。
• clear(): 清空 Set 集合中所有元素。

示例：

const set = new Set()
set.add('a')
set.add('b')
console.log(set.has('a')) // true
set.delete('b')
console.log(set) // Set(1) { 'a' }

Map 和 Set 都非常实用，可以用来快速查找、去重等，如果在项目中需要用到大量查找和去重的操作，这两个集合类是很不错的选择。

Map 和 Set 都是在 JavaScript 中用来存储并操作值的集合类型，但它们的使用场景不同。

Map 适合用来存储键值对（key-value pairs），其中每个键（key）都是唯一的。常见的使用场景包括：

• 存储和操作 JSON 数据；
• 通过映射关系转换数据，例如将一个数组转换成一个包含同样元素的对象；
• 存储和查找状态、设置和获取选项等。

Set 适合用来存储一组唯一的值（values），且每个值都是唯一的。常见的使用场景包括：

• 用作去重器，从大量值中去除重复值；
• 存储一组关键字或选项，判断某个值是否在这个集合中出现；
• 存储和操作不同的数据类型，例如数字、字符串、日期等。

字符串方法：

• toUpperCase(): 将字符串转换成大写字母形式；
• toLowerCase(): 将字符串转换成小写字母形式；
• indexOf(): 返回指定字符串的索引位置；
• slice(): 从字符串中提取指定的部分并返回一个新的字符串；
• substring(): 从字符串中提取指定的部分并返回一个新的字符串。

示例：

const str = 'Hello, World!'
console.log(str.toUpperCase()) // "HELLO, WORLD!"
console.log(str.indexOf('o')) // 4
console.log(str.slice(0, 5)) // "Hello"
console.log(str.substring(7, 12)) // "World"

 数组方法：

• push(): 在数组尾部添加一个或多个元素；
• pop(): 移除数组中的最后一个元素并返回该元素；
• shift(): 移除数组中的第一个元素并返回该元素；
• unshift(): 在数组头部添加一个或多个元素；
• sort(): 对数组元素进行排序。

1. 数组排序算法：

在 JavaScript 中，有许多数组排序算法可供选择。以下是其中两种：

(1) 冒泡排序 (Bubble Sort):
冒泡排序算法的基本思路是通过多次遍历数组来交换相邻的元素，将大的值逐步“冒泡”到数组的最后。

示例：

function bubbleSort(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp
      }
    }
  }
  return arr
}
const arr = [1, 3, 2, 5, 4]
console.log(bubbleSort(arr)) // [1, 2, 3, 4, 5]

(2) 快速排序 (Quick Sort):
快速排序是一种使用分治法实现的排序算法，它的基本思路是选择一个合适的"基准"值，将数组分割成两个子数组，一个包含所有比基准值小的元素，另一个包含所有比基准值大的元素。然后，递归地将子数组进行排序，最后合并得到排序好的数组。

示例：

function quickSort(arr) {
  if (arr.length <= 1) {
    return arr
  }
  const pivotIndex = Math.floor(arr.length / 2)
  const pivot = arr.splice(pivotIndex, 1)[0] // 选择基准值
  const left = []
  const right = []
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i])
    } else {
      right.push(arr[i])
    }
  }
  return quickSort(left).concat([pivot], quickSort(right)) // 合并左中右三个数组
}
const arr = [1, 3, 2, 5, 4]
console.log(quickSort(arr)) // [1, 2, 3, 4, 5]

总之，字符串和数组都是 JavaScript 中十分常用的数据类型，掌握它们的方法和算法，可以提高前端开发的效率和质量。

前端的解构赋值

前端的解构赋值 (Destructuring assignment) 是ES6引入的一种语法，它可以让我们从数组或对象中快速提取值并赋值给变量。而 rest 则是一种在解构赋值中使用的语法，可以将剩余的元素打包成一个数组。

举个例子，假设有一个包含多个元素的数组：

const arr = [1, 2, 3, 4, 5];

现在我们想要将数组中的前两个元素赋值给变量 a 和 b，而剩余的元素则赋值给变量 rest。可以这样写：

const [a, b, ...rest] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

在这个例子中，我们使用了数组解构赋值语法，将数组 arr 中的前两个元素分别赋值给了变量 a 和 b，并使用 rest 语法将剩余的元素打包成数组，赋值给了变量 rest。

类似的，我们也可以在对象解构赋值中使用 rest 语法，用于提取剩余的键值对：

const obj = {a: 1, b: 2, c: 3, d: 4, e: 5};
const {a, b, ...rest} = obj;
console.log(a); // 1
console.log(b); // 2
console.log(rest); // {c: 3, d: 4, e: 5}

需要注意的是，rest 语法只能用于最后一个变量，否则会抛出语法错误：

// 报错，rest 语法不在最后一个变量
const [a, ...rest, b] = [1, 2, 3, 4, 5];

// 报错，rest 语法不在最后一个变量
const {a, ...rest, b} = {a: 1, b: 2, c: 3};

除了在解构赋值中使用，rest 语法还可以用于函数参数中，将传入函数的参数打包成数组：

function foo(a, b, ...rest) {
  console.log(a); // 1
  console.log(b); // 2
  console.log(rest); // [3, 4, 5]
}

foo(1, 2, 3, 4, 5);

总之，解构赋值是一种非常方便的语法，可以让我们更加简洁地提取数组或对象中的值，并将它们赋值给变量。其中 rest 语法则提供了一种在解构赋值中使用的方法，可以将剩余的元素打包成数组，或者将函数参数打包成数组。

防抖节流的原理和写法

防抖

防抖的原理是，当事件被触发后，我们等待一定时间，如果在此期间内没有再次触发该事件，就执行这个事件。

写一个基本的防抖函数可以像这样：

function debounce(func, delay) {
  let timer = null;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

这里的 debounce 函数接受一个函数和一个延迟时间，它返回一个新的函数，在执行这个新函数时会等待一定时间，如果在等待时间内没有再次执行这个函数，那么就会调用原始函数。如果在等待时间内再次执行了这个函数，就会重新启动计时器等待下一次调用。

下面是一个使用 debounce 函数来防抖一个点击事件的例子：

const btn = document.querySelector('button');
function handleClick() {
  console.log('You clicked the button');
}
btn.addEventListener('click', debounce(handleClick, 1000));

在这个例子中，当我们点击按钮时函数 handleClick 会被防抖，如果在1秒钟内我们重复点击了按钮，那么 handleClick 函数不会被调用。如果我们在1秒钟后点击了一次按钮，那么 handleClick 函数就会被调用。

节流

节流的原理是，在一定时间内最多执行一次事件。如果在指定时间内再次触发事件，就会被忽略。这个技术常常用于限制事件的传输频率，例如在滚动事件中。

写一个基本的节流函数可以像这样：

function throttle(func, delay) {
  let timer = null;
  return function () {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        func.apply(context, args);
      }, delay);
    }
  };
}

这里的 throttle 函数会返回一个新函数，在执行这个新函数时，如果在指定的时间段内多次调用该新函数，那么只有第一个调用会被执行，其余的调用会被忽略。仅仅是第一个调用完成后，才会重新开始计算下一个时间段，以便下一个调用。

下面是一个使用 throttle 函数来限制窗口调整大小事件的例子：

window.addEventListener(
  'resize',
  throttle(function () {
    console.log('Window resize event throttled');
  }, 100)
);

在这个例子中，每当窗口调整大小时函数 console.log 会被节流。如果在指定的时间内多次调整窗口大小，只有第一个事件会被处理。文章来源地址https://www.toymoban.com/news/detail-421008.html

到了这里，关于【DAY43-2】前端知识整理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！