JavaScript 基础知识：数据结构和算法初学者指南

2025-06-09

JavaScript 基础知识：数据结构和算法初学者指南

如果你想提升你的 JavaScript 技能，那么你来对地方了。让我们立即开始吧！🎉

什么是数据结构？🤔

数据结构就像厨房里不同类型的容器。就像用玻璃杯盛液体，用盘子盛三明治一样，在编程中，不同类型的数据存储在不同的结构中。这些结构有助于有效地组织和管理数据。想想数组、对象、堆栈等等！

什么是算法？🤔

算法就像菜谱，是执行任务或解决问题的分步说明。在编程中，算法对于数据操作、计算等至关重要。

探索 JavaScript 中的常见数据结构🌐

让我们通过一些方便的代码示例来了解 JavaScript 中最常用的一些数据结构。

阵列：万能之选

JavaScript 中的数组就像瑞士军刀一样——用途广泛！

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Outputs: apple
fruits.push("date");
console.log(fruits); // Outputs: ["apple", "banana", "cherry", "date"]
Enter fullscreen mode Exit fullscreen mode

对象：组织者

对象帮助您将数据存储在键值对中，从而轻松找到所需内容。

let car = {
  make: "Toyota",
  model: "Corolla",
  year: 2021
};
console.log(car.model); // Outputs: Corolla
Enter fullscreen mode Exit fullscreen mode

堆栈：后进先出（LIFO）

堆栈就像一摞盘子；最后放在最上面的盘子就是最先拿走的盘子。

class Stack {
  constructor() {
    this.items = [];
  }

  push(element) {
    this.items.push(element);
  }

  pop() {
    if (this.items.length === 0) return "Underflow";
    return this.items.pop();
  }

  peek() {
    return this.items[this.items.length - 1];
  }
}

let stack = new Stack();
stack.push(10);
stack.push(20);
console.log(stack.peek()); // Outputs: 20
console.log(stack.pop()); // Outputs: 20
console.log(stack.peek()); // Outputs: 10
Enter fullscreen mode Exit fullscreen mode

队列：先进先出（FIFO）

队列就像商店里的队伍；排在第一位的人最先得到服务。

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(element) {
    this.items.push(element);
  }

  dequeue() {
    if (this.items.length === 0) return "Underflow";
    return this.items.shift();
  }

  front() {
    if (this.items.length === 0) return "No elements in Queue";
    return this.items[0];
  }
}

let queue = new Queue();
queue.enqueue(10);
queue.enqueue(20);
console.log(queue.front()); // Outputs: 10
console.log(queue.dequeue()); // Outputs: 10
console.log(queue.front()); // Outputs: 20
Enter fullscreen mode Exit fullscreen mode

链表：灵活的连接器

链表由节点组成，每个节点包含一个值和指向列表中下一个节点的指针。

class Node {
  constructor(element) {
    this.element = element;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.size = 0;
  }

  add(element) {
    let node = new Node(element);
    let current;

    if (this.head === null) this.head = node;
    else {
      current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = node;
    }
    this.size++;
  }
}

let ll = new LinkedList();
ll.add(10);
ll.add(20);
console.log(ll); // Outputs the LinkedList with 10 and 20 as elements
Enter fullscreen mode Exit fullscreen mode

树木：层级组织者

树是非线性数据结构，用于存储计算机中的文件夹等分层数据。

class TreeNode {
  constructor(data) {
    this.data = data;
    this.children = [];
  }

  addChild(child) {
    this.children.push(new TreeNode(child));
  }
}

let root = new TreeNode('root');
root.addChild('child1');
root.addChild('child2');
console.log(root); // Outputs the tree structure with root, child1, and child2
Enter fullscreen mode Exit fullscreen mode

探索 JavaScript 中的常见算法

排序：让事物有序

我们来看一个基本的排序算法——冒泡排序。假设你有一排气球，每个气球上都有一个数字，你想把它们按从小到大的顺序排列起来。

function bubbleSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

console.log(bubbleSort([3, 0, 2, 5, -1, 4, 1]));
// Outputs: [-1, 0, 1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

搜索：大海捞针

假设你把钥匙丢在了一排箱子里，需要找到它。线性查找就像是查找这把钥匙。下面是如何实现一个简单的线性查找。

function linearSearch(arr, x) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === x) return i;
  }
  return -1;
}

console.log(linearSearch([2, 3, 4, 10, 40], 10)); // Outputs: 3
Enter fullscreen mode Exit fullscreen mode

二分查找：快速搜索者

二分查找就像玩“冷热”游戏来查找数字。它采用分治法，每次将搜索范围减半。

function binarySearch(arr, x) {
  let start = 0, end = arr.length - 1;

  while (start <= end) {
    let mid = Math.floor((start + end) / 2);

    if (arr[mid] === x) return mid;
    else if (arr[mid] < x) start = mid + 1;
    else end = mid - 1;
  }

  return -1;
}

let arr = [1, 3, 5, 7, 8, 9];
console.log(binarySearch(arr, 5)); // Outputs: 2
Enter fullscreen mode Exit fullscreen mode

归并排序：高效的组织者

归并排序就像将你的音乐播放列表按完美顺序排列一样。它将列表分成两半，对每半进行排序，然后将它们合并在一起。

function merge(left, right) {
    let arr = [];
    while (left.length && right.length) {
        if (left[0] < right[0]) arr.push(left.shift());
        else arr.push(right.shift());
    }
    return [...arr, ...left, ...right];
}

function mergeSort(arr) {
    const half = arr.length / 2;
    if (arr.length <= 1) return arr;
    const left = arr.splice(0, half);
    return merge(mergeSort(left), mergeSort(arr));
}

let arr = [4, 8, 7, 2, 11, 1, 3];
console.log(mergeSort(arr)); // Outputs: [1, 2, 3, 4, 7, 8, 11]
Enter fullscreen mode Exit fullscreen mode

快速排序：快速分隔符

快速排序就像组织一个图书馆，你选择一本书，把所有较小的书放在左边，把较大的书放在右边，然后重复这个过程。

function quickSort(arr) {
    if (arr.length <= 1) return arr;

    let pivot = arr[arr.length - 1];
    let left = [];
    let right = [];

    for (let i = 0; i < arr.length - 1; i++) {
        if (arr[i] < pivot) left.push(arr[i]);
        else right.push(arr[i]);
    }

    return [...quickSort(left), pivot, ...quickSort(right)];
}

let arr = [3, 0, 2, 5, -1, 4, 1];
console.log(quickSort(arr)); // Outputs: [-1, 0, 1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

递归算法：循环破坏器

递归是一种方法，其中问题的解决方案取决于同一问题的较小实例的解决方案。

function factorial(x) {
  if (x === 0) return 1;
  return x * factorial(x - 1);
}

console.log(factorial(5)); // Outputs: 120
Enter fullscreen mode Exit fullscreen mode

以上就是我们对 JavaScript 数据结构和算法的介绍！我们只是略知皮毛，但你已经踏上了旅程。

祝你编程愉快！🚀👩‍💻👨‍💻

鏂囩珷鏉ユ簮锛�https://dev.to/mattryanmtl/javascript-essentials-a-beginners-guide-to-data-structs-and-algorithms-ap
Devto 翻译
PREV
我想要 PHP 中的标量对象
NEXT
“只使用 Props”：React 和 XState 的指南