JavaScript中的push方法详解|极客教程

JavaScript中的push方法详解

在JavaScript中，push()方法是用于向数组的末尾添加一个或多个元素，并返回新的长度。本文将详细介绍push()方法的用法及示例代码。

语法

array.push(element1, ..., elementN)

element1, ..., elementN: 要添加到数组末尾的元素。

示例代码

示例1：向数组末尾添加一个元素

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

Output:

JavaScript中的push方法详解

示例2：向数组末尾添加多个元素

let arr = [1, 2, 3];
arr.push(4, 5, 6);
console.log(arr); // [1, 2, 3, 4, 5, 6]

Output:

JavaScript中的push方法详解

示例3：向空数组添加元素

let arr = [];
arr.push(1);
console.log(arr); // [1]

Output:

JavaScript中的push方法详解

返回值

push()方法返回新数组的长度。

示例4：返回新数组的长度

let arr = [1, 2, 3];
let length = arr.push(4);
console.log(length); // 4

Output:

JavaScript中的push方法详解

注意事项

push()方法会修改原数组，没有返回新的数组。
push()方法会改变数组的长度。

示例5：原数组被修改

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

Output:

JavaScript中的push方法详解

示例6：数组长度改变

let arr = [1, 2, 3];
console.log(arr.length); // 3
arr.push(4);
console.log(arr.length); // 4

Output:

JavaScript中的push方法详解

使用`push()`方法构建栈

push()方法常用于构建栈（stack），栈是一种后进先出（LIFO）的数据结构。

示例7：构建栈

let stack = [];
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.pop()); // 3
console.log(stack.pop()); // 2
console.log(stack.pop()); // 1

Output:

JavaScript中的push方法详解

使用`push()`方法合并数组

push()方法还可以用于合并数组。

示例8：合并数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

Output:

JavaScript中的push方法详解

使用`push()`方法实现队列

除了栈，push()方法也可以用于构建队列（queue），队列是一种先进先出（FIFO）的数据结构。

示例9：构建队列

let queue = [];
queue.push(1);
queue.push(2);
queue.push(3);
console.log(queue.shift()); // 1
console.log(queue.shift()); // 2
console.log(queue.shift()); // 3

Output:

JavaScript中的push方法详解

使用`push()`方法实现循环队列

循环队列是一种特殊的队列，当队列满时，新元素会覆盖最旧的元素。

示例10：构建循环队列

let queue = [];
const maxSize = 3;

function enqueue(element) {
  if (queue.length === maxSize) {
    queue.shift();
  }
  queue.push(element);
}

enqueue(1);
enqueue(2);
enqueue(3);
enqueue(4);
console.log(queue); // [2, 3, 4]

Output:

JavaScript中的push方法详解

使用`push()`方法实现优先队列

优先队列是一种特殊的队列，每个元素都有一个优先级，优先级高的元素先出队。

示例11：构建优先队列

class PriorityQueue {
  constructor() {
    this.queue = [];
  }

  enqueue(element, priority) {
    this.queue.push({ element, priority });
    this.queue.sort((a, b) => a.priority - b.priority);
  }

  dequeue() {
    return this.queue.shift().element;
  }
}

let pq = new PriorityQueue();
pq.enqueue('task1', 2);
pq.enqueue('task2', 1);
pq.enqueue('task3', 3);
console.log(pq.dequeue()); // task2
console.log(pq.dequeue()); // task1
console.log(pq.dequeue()); // task3

Output:

JavaScript中的push方法详解

使用`push()`方法实现拼接字符串

除了数组，push()方法还可以用于拼接字符串。

示例12：拼接字符串

let str = 'Hello, ';
str.push('world!');
console.log(str); // Hello, world!

使用`push()`方法实现链表

链表是一种常见的数据结构，push()方法可以用于构建链表。

示例13：构建链表

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

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

  push(value) {
    let newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }
}

let ll = new LinkedList();
ll.push(1);
ll.push(2);
ll.push(3);
console.log(ll.head.value); // 1
console.log(ll.head.next.value); // 2
console.log(ll.head.next.next.value); // 3

Output:

JavaScript中的push方法详解

使用`push()`方法实现树

树是一种常见的数据结构，push()方法可以用于构建树。

示例14：构建树

class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

class Tree {
  constructor() {
    this.root = null;
  }

  push(value) {
    let newNode = new TreeNode(value);
    if (!this.root) {
      this.root = newNode;
    } else {
      let current = this.root;
      while (true) {
        if (value < current.value) {
          if (!current.left) {
            current.left = newNode;
            break;
          }
          current = current.left;
        } else {
          if (!current.right) {
            current.right = newNode;
            break;
          }
          current = current.right;
        }
      }
    }
  }
}

let tree = new Tree();
tree.push(2);
tree.push(1);
tree.push(3);
console.log(tree.root.value); // 2
console.log(tree.root.left.value); // 1
console.log(tree.root.right.value); // 3

Output:

JavaScript中的push方法详解

使用`push()`方法实现图

图是一种常见的数据结构，push()方法可以用于构建图。

示例15：构建图

class Graph {
  constructor() {
    this.vertices = [];
    this.edges = {};
  }

  addVertex(vertex) {
    this.vertices.push(vertex);
    this.edges[vertex] = [];
  }

  addEdge(vertex1, vertex2) {
    this.edges[vertex1].push(vertex2);
    this.edges[vertex2].push(vertex1);
  }
}

let graph = new Graph();
graph.addVertex('A');
graph.addVertex('B');
graph.addVertex('C');
graph.addEdge('A', 'B');
graph.addEdge('B', 'C');
console.log(graph.vertices); // ['A', 'B', 'C']
console.log(graph.edges); // { A: ['B'], B: ['A', 'C'], C: ['B'] }

Output:

JavaScript中的push方法详解

使用`push()`方法实现队列的优先级调度

在优先级队列的基础上，可以使用push()方法实现队列的优先级调度。

示例16：队列的优先级调度

class PriorityScheduler {
  constructor() {
    this.queue = [];
  }

  schedule(task, priority) {
    this.queue.push({ task, priority });
    this.queue.sort((a, b) => a.priority - b.priority);
  }

  run() {
    while (this.queue.length > 0) {
      let task = this.queue.shift();
      console.log(`Running task: ${task.task}`);
    }
  }
}

let scheduler = new PriorityScheduler();
scheduler.schedule('task1', 2);
scheduler.schedule('task2', 1);
scheduler.schedule('task3', 3);
scheduler.run();
// Output:
// Running task: task2
// Running task: task1
// Running task: task3

Output:

JavaScript中的push方法详解

使用`push()`方法实现事件队列

事件队列是一种常见的应用场景，可以使用push()方法实现事件的排队执行。

示例17：事件队列

class EventQueue {
  constructor() {
    this.queue = [];
  }

  addEvent(event) {
    this.queue.push(event);
  }

  processEvents() {
    this.queue.forEach(event => {
      console.log(`Processing event: ${event}`);
    });
    this.queue = [];
  }
}

let eventQueue = new EventQueue();
eventQueue.addEvent('event1');
eventQueue.addEvent('event2');
eventQueue.addEvent('event3');
eventQueue.processEvents();
// Output:
// Processing event: event1
// Processing event: event2
// Processing event: event3

Output:

JavaScript中的push方法详解

使用`push()`方法实现消息队列

消息队列是一种常见的通信机制，可以使用push()方法实现消息的排队传递。

示例18：消息队列

class MessageQueue {
  constructor() {
    this.queue = [];
  }

  sendMessage(message) {
    this.queue.push(message);
  }

  receiveMessage() {
    if (this.queue.length > 0) {
      return this.queue.shift();
    }
    return null;
  }
}

let messageQueue = new MessageQueue();
messageQueue.sendMessage('Hello');
messageQueue.sendMessage('World');
console.log(messageQueue.receiveMessage()); // Hello
console.log(messageQueue.receiveMessage()); // World

Output:

JavaScript中的push方法详解

使用`push()`方法实现缓存队列

缓存队列是一种常见的性能优化手段，可以使用push()方法实现缓存的数据存储和读取。

示例19：缓存队列

class CacheQueue {
  constructor() {
    this.queue = [];
  }

  addToCache(data) {
    this.queue.push(data);
  }

  getFromCache() {
    if (this.queue.length > 0) {
      return this.queue.pop();
    }
    return null;
  }
}

let cacheQueue = new CacheQueue();
cacheQueue.addToCache('data1');
cacheQueue.addToCache('data2');
console.log(cacheQueue.getFromCache()); // data2
console.log(cacheQueue.getFromCache()); // data1