JavaScript - 数据结构

数据结构是用于存储和组织数据的编程结构。我们可以使用这些结构编写高效的程序，并执行数据操作。JavaScript 为不同的操作提供了各种数据结构。在本教程中，我们将学习 JavaScript 中的不同数据结构。

JavaScript 中的数据结构

JavaScript 中有以下数据结构。

• 数组
• 对象
• 映射(Map)
• 集合
• 弱映射
• 弱集合
• 堆栈
• 队列
• 链表

数组

数组是所有其他编程语言中最常见的数据结构。在 JavaScript 中，数组是元素的集合。数组中所有元素不必都是同一类型。我们可以在数组中存储不同类型的数据。我们可以存储数字、字符串、布尔值、对象，甚至其他数组。

示例

以下是示例代码，展示了如何在 JavaScript 中创建数组。

<html>
<body>
   <p id="output"></p>
   <script>
      var arr = [1, 'John', true, {name: 'John', age: 25}, [1, 2, 3]];
      document.getElementById('output').innerHTML = arr;
   </script>
</body>
</html>

输出

1,John,true,[object Object],1,2,3

对象

对象是 JavaScript 中的另一种数据结构。它由两个值组成:键和对应的值。我们可以将数据存储为键值对。我们可以将数字、字符串、布尔值、对象，甚至其他对象存储在对象中。

示例

以下是示例代码，展示了如何在 JavaScript 中创建对象。

<html>
<body>
   <script>
      var obj = {name: 'John', age: 25, isMarried: true, address: {city: 'New York', country: 'USA'}};
      document.write(JSON.stringify(obj));
   </script>
</body>
</html>

输出

{"name":"John","age":25,"isMarried":true,"address":{"city":"New York","country":"USA"}}

映射(Map)

映射(Map)是元素的集合，每个元素都以键值对的形式存储。键可以是任意类型，值也可以是任意类型。我们可以在 Map 中存储数字、字符串、布尔值、对象，甚至其他类型的 Map。

JavaScript 中 Map 和 Object 的唯一区别在于，Map 不支持 JSON 格式。Object 的键只有一种类型，即字符串，而 Map 支持任意类型的键或值，并且 Map 保持顺序，而 Object 则不遵循任何顺序。

示例

以下是示例代码，展示了如何在 JavaScript 中创建 Map。

<html>
<body>
   <p id="output"></p>
   <script>
      var map = new Map();
      map.set('name', 'John');
      map.set('age', 25);
      map.set('isMarried', true);
      map.set('address', {city: 'New York', country: 'USA'});
      let content = '';
      map.forEach((value, key) =>{
         if(typeof value === 'object') {
            content += key + ' : ' + JSON.stringify(value) + '<br>';
         } else {
            content += key + ' : ' + value + '<br>';
         }
      });
      document.getElementById('output').innerHTML = content;
   </script>
</body>
</html>

输出

name : John
age : 25
isMarried : true
address : {"city":"New York","country":"USA"}

集合

集合是元素的集合，其中每个元素都应该彼此不同(每个元素都应该是唯一的)。我们可以在集合中存储数字、字符串、布尔值、对象，甚至其他集合。

示例

以下是示例代码，展示了如何在 JavaScript 中创建集合。

<html>
<body>
   <p id="output"></p>
   <script>
      var set = new Set();
      set.add(1);
      set.add('John');
      set.add(true);
      let content = '';
      set.forEach(value => content += value + '<br>');
      document.getElementById('output').innerHTML = content;
   </script>
</body>
</html>

输出

1
John
true

WeakMap

WeakMap 是一个元素集合，其中每个元素都以键值对的形式存储。键可以是任意类型，值也可以是任意类型。我们可以在 Weak Map 中存储数字、字符串、布尔值、对象，甚至其他类型的弱映射。Weak Map 和 Weak Map 的主要区别在于 Weak Map 的键是弱持有的。这意味着如果该键在其他任何地方都没有使用，它将被垃圾回收器回收。

示例

以下是示例代码，展示了如何在 JavaScript 中创建 Weak Map。

<html>
<body>
   <p id="output"></p>
   <script>
   var object = [];
   var weakMap = new WeakMap();
   var key = {name: 'John'};
   weakMap.set(key, 25);
   object.push(key);
   let content = '';
   object.forEach(value => content += value.name +" "+ weakMap.get(value));
   document.getElementById('output').innerHTML = content;
   </script>
</body>
</html>

输出

John 25

弱集合(WeakSet)

弱集合是一个类似于 Set 的元素集合，其中每个元素都是唯一的。我们可以在弱集合中存储数字、字符串、布尔值、对象，甚至其他弱集合。集合和弱集合的主要区别在于，弱集合的元素是弱持有的。这意味着，如果元素在其他任何地方都没有使用，它甚至会被垃圾回收器回收。

示例

以下是示例代码，展示了如何在 JavaScript 中创建弱集合。

<html>
<body>
   <p id="output"></p>
   <script>
   var object = [];
   var weakSet = new WeakSet();
   var obj = {name: 'John'};
   weakSet.add(obj);
   object.push(obj);
   let content = '';
   object.forEach(value => content += value.name + '
');
   document.getElementById('output').innerHTML = content;
   </script>
</body>
</html>

输出

John

栈(Stack)

栈是元素的集合，元素按后进先出的顺序存储。我们可以在栈中存储数字、字符串、布尔值、对象，甚至其他类型的栈。

示例

以下是示例代码，展示了如何在 JavaScript 中创建栈。

<html>
<body>
   <script>
      class Stack {
         constructor() {
            this.items = [];
         }
         push(element) {
            this.items.push(element);
         }
         pop() {
            if(this.items.length === 0) {
               return 'Underflow';
            }
            return this.items.pop();
         }
      }
      var stack = new Stack();
      stack.push(1);
      stack.push(2);
      stack.push(3);
      document.write(stack.pop()); 
      document.write(stack.pop());
      document.write(stack.pop());
   </script>
</body>
</html>                                   

输出

321

队列(Queue)

队列是元素的集合，元素按先进先出 (FIFO) 的顺序存储。我们可以在队列中存储数字、字符串、布尔值、对象，甚至其他队列。

示例

以下是示例代码，展示了如何在 JavaScript 中创建队列。

<html>
<body>
   <script>
      class Queue {
         constructor() {
            this.items = [];
         }
         enqueue(element) {
            this.items.push(element);
         }
         dequeue() {
            if(this.items.length === 0) {
               return 'Underflow';
            }
            return this.items.shift();
         }
      }
      var queue = new Queue();
      queue.enqueue(1);
      queue.enqueue(2);
      queue.enqueue(3);
      document.write(queue.dequeue());
      document.write(queue.dequeue());
      document.write(queue.dequeue());
   </script>
</body>
</html>

输出

123

链表

链表是元素的集合，每个元素都存储为一个节点。每个节点都包含数据以及指向下一个节点的引用。我们可以在链表中存储数字、字符串、布尔值、对象，甚至其他链表。

示例

以下是示例代码，展示了如何在 JavaScript 中创建链表。

<html>
<body>
   <script>
      class Node {
         constructor(element) {
            this.element = element;
            this.next = null;
         }
      }
      class LinkedList {
         constructor() {
            this.head = null;
            this.size = 0;
         }
         add(element) {
            var node = new Node(element);
            var current;
            if (this.head === null) {
               this.head = node;
            } else {
               current = this.head;
               while (current.next) {
                  current = current.next;
               }
               current.next = node;
            }
            this.size++;
         }
         printList() {
            var current = this.head;
            var str = '';
            while (current) {
               str += current.element + ' ';
               current = current.next;
            }
            document.write(str);
         }
      }
      var linkedList = new LinkedList();
      linkedList.add(1);
      linkedList.add(2);
      linkedList.add(3);
      linkedList.printList();
   </script>
</body>
</html>

输出

1 2 3