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

发布于:2025-07-11 ⋅ 阅读:(10) ⋅ 点赞:(0)

解构赋值解释

基本用法

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的简介

  1. 树形结构:DOM 将文档表示为节点树,每个节点代表文档的一部分
    • 文档节点:整个文档(dom)
    • 元素节点:HTML标签【head【meta,style……】,body【box,section,script……】】
    • 属性节点:元素的属性
    • 文本节点:元素中的文本内容
  2. 节点关系
    • 父节点 (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);

可以发现dom结构为树,非常适合使用图论算法。


网站公告

今日签到

点亮在社区的每一天
去签到