当前位置：首页 > news >正文

JS实现基础算法与dom的结构

news 2025/7/8 13:28:53

解构赋值解释

基本用法

let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];// 解构赋值方式
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

所以有：

[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
//可以交换arr[j], arr[j + 1]的值

冒泡排序

//传入要排序的数组
function bubbleSort(arr) {const len = arr.length;for (let i = 0; i < len - 1; i++) {// 每次将本次遍历中的最大元素放置最后for (let j = 0; j < len - 1 - i; j++) {// 若前元素比后元素大，则交换if (arr[j] > arr[j + 1]) {// 解构赋值交换元素[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];}}}//返回的排序好的数组return arr;
}// 使用示例
//注意，js中数组传入函数同样是传入地址，因此会在原函数上进行修改
const unsortedArray = [64, 34, 25, 12, 22, 11, 90];
console.log(unsortedArray);
console.log(bubbleSort(unsortedArray));
//因此上述描述与下述等价
const unsortedArray = [64, 34, 25, 12, 22, 11, 90];
console.log(unsortedArray);
bubbleSort(unsortedArray);
console.log(unsortedArray);

时间复杂度：O(n²)

二分查找

基本实现

function Search(Array, target) {let left = 0;let right = Array.length - 1;while (left <= right) {const mid = Math.floor((left + right) / 2);const midValue = Array[mid];if (midValue === target) {return mid; // 找到目标，返回索引} else if (midValue < target) {left = mid + 1; // 目标在右半部分} else {right = mid - 1; // 目标在左半部分}}return -1; // 未找到目标
}// 使用示例
const sortedNumbers = [1, 3, 5, 7, 9, 11, 13];
console.log(binarySearch(sortedNumbers, 9)); // 输出: 4 (索引)
console.log(binarySearch(sortedNumbers, 2)); // 输出: -1 (未找到)

JavaScript 引擎是由 C++ 编写的，因此基本与C++类似。
因此，在实际应用开发中，我们可以通过算法知识简化JS代码的时间/空间复杂度，例如使用算法结合js进行有趣的动画制作。或利用图论结合dom树对象进行信息查找

DOM的简介

树形结构：DOM 将文档表示为节点树，每个节点代表文档的一部分
- 文档节点：整个文档（dom）
- 元素节点：HTML标签【head【meta，style……】，body【box，section，script……】】
- 属性节点：元素的属性
- 文本节点：元素中的文本内容
节点关系：
- 父节点 (parentNode)
- 子节点 (childNodes)
- 兄弟节点 (sibling nodes)

主要功能

获取和修改元素内容
添加、删除和修改元素
响应事件（如点击、鼠标移动等）
动态改变样式

基本操作示例

// 获取元素,默认返回第一个，可以按照css选择器特别选择
const element = document.querySelector('#element');// 修改内容
element.innerHTML = '新内容';// 添加事件监听
element.addEventListener('click', function() {alert('元素被点击!');
});// 创建新元素
const newElement = document.createElement('div');
document.body.appendChild(newElement);