当前位置:首页 > JavaScript

js实现shift

2026-03-13 17:04:46JavaScript

实现数组的 shift 方法

JavaScript 中的 shift 方法用于移除数组的第一个元素并返回该元素。以下是几种实现方式:

原生方法

直接使用数组的原生 shift 方法:

const arr = [1, 2, 3];
const firstElement = arr.shift();
console.log(firstElement); // 1
console.log(arr); // [2, 3]

手动实现

通过修改数组长度和重新索引实现:

function customShift(arr) {
  if (arr.length === 0) return undefined;
  const firstElement = arr[0];
  for (let i = 0; i < arr.length - 1; i++) {
    arr[i] = arr[i + 1];
  }
  arr.length = arr.length - 1;
  return firstElement;
}

const arr = [1, 2, 3];
console.log(customShift(arr)); // 1
console.log(arr); // [2, 3]

使用 slice 和 splice

结合数组方法实现:

js实现shift

function shiftWithSlice(arr) {
  const firstElement = arr[0];
  arr.splice(0, 1);
  return firstElement;
}

const arr = [1, 2, 3];
console.log(shiftWithSlice(arr)); // 1
console.log(arr); // [2, 3]

性能考虑

原生 shift 方法性能最佳,手动实现适用于特殊场景或学习目的。频繁操作大型数组时需注意时间复杂度为 O(n)。

标签: jsshift
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…