在 javascript 中，使用 unshift() 方法可以往数组的开头添加一个或多个元素。1. unshift() 接受一个或多个参数，并按顺序将它们插入数组开头，同时返回新数组的长度；2. 它会直接修改原数组，而不是生成新数组；3. 与 push() 不同，unshift() 插入位置是数组开头，适用于通知列表、日志记录等需最新数据置顶的场景；4. 频繁对大型数组使用 unshift() 可能引发性能问题，因其复杂度为 o(n)；5. 替代方案包括使用展开运算符创建新数组、concat() 合并数组、或 splice() 灵活操作；6. 在数据量可控时，unshift() 仍具备实用性，如实时通知、历史记录构建、动态菜单项添加等场景。
在 JavaScript 中，如果你想往数组的开头添加一个或多个元素，最直接的方法就是使用 unshift() 方法。它会将新元素放在数组的最前面，并返回数组的新长度。这个方法会直接修改原数组，而不是返回一个新数组。
解决方案
unshift() 方法的用法非常直观。你只需要将要添加的元素作为参数传递给它即可。它可以接受一个或多个参数，这些参数会按照传入的顺序依次添加到数组的开头。
let fruits = ['apple', 'banana'];// 添加一个元素let newLength1 = fruits.unshift('orange');console.log(fruits); // 输出: ['orange', 'apple', 'banana']console.log(newLength1); // 输出: 3// 添加多个元素let numbers = [3, 4];let newLength2 = numbers.unshift(1, 2);console.log(numbers); // 输出: [1, 2, 3, 4]console.log(newLength2); // 输出: 4// unshift返回的是新数组的长度let emptyArray = [];let len = emptyArray.unshift('first');console.log(emptyArray); // ['first']console.log(len); // 1
从上面的例子可以看出，unshift() 确实非常方便。它修改了 fruits 和 numbers 这两个原始数组，并且每次调用都返回了修改后数组的新长度。这在我看来，是它最核心的特性：原地修改。
立即学习“Java免费学习笔记（深入）”；
unshift() 与 push() 有何不同？何时选择 unshift？
unshift() 和 push() 都是 JavaScript 数组用于添加元素的方法，但它们操作的位置截然不同。push() 是往数组的末尾添加元素，而 unshift() 则是往数组的开头添加。这听起来可能只是个位置的区别，但在实际应用和性能上，它们之间有着微妙但重要的差异。
我个人在使用时，会根据数据结构的“逻辑”来选择。如果你在处理一个像队列一样的数据结构（先进先出），那么 push() 元素到末尾，然后从开头 shift() 出来，是非常自然的。但如果你的需求是“最新”的数据总是在最前面，比如一个通知列表或者聊天记录，那么 unshift() 就显得非常合适。想象一下，你收到一条新消息，你肯定希望它显示在列表的最上方，而不是最下方，对吧？这时候 unshift() 就派上用场了。
再举个例子，我在开发一个简单的日志记录功能时，希望最新的日志条目总是显示在控制台输出的最上方。我就会倾向于使用 unshift() 来将新的日志字符串添加到日志数组的开头。这样，在展示日志时，用户就能一眼看到最新的信息。而 push() 更多用于构建一个累积性的列表，比如购物车商品列表，新添加的商品通常是排在后面的。
使用 unshift() 可能遇到的性能问题及替代方案
虽然 unshift() 用起来很方便，但作为一名开发者，我们总得考虑一下它背后的性能开销。说实话，unshift() 在处理大型数组时，性能表现并不理想。这是因为当你在数组开头插入一个元素时，JavaScript 引擎需要将数组中所有现有元素的索引都向后移动一位，以便为新元素腾出位置。这个操作的计算复杂度是 O(n)，其中 n 是数组的长度。这意味着数组越大，这个操作就越慢。
我曾经在一个项目中，因为频繁地对一个包含数千条记录的数组使用 unshift()，导致页面出现明显的卡顿。那时候我才真正意识到，这种“方便”的背后是有代价的。
那么，有没有更好的替代方案呢？当然有。
创建新数组并使用展开运算符（Spread Operator）：如果你不介意创建一个新数组，并且需要保持原数组的不可变性，这是我最推荐的方法。它简洁、现代，而且通常在性能上比 unshift() 更好，因为它避免了原地修改带来的索引重排。
let originalArray = [2, 3, 4];let newElement = 1;let newArray = [newElement, ...originalArray];console.log(newArray); // 输出: [1, 2, 3, 4]console.log(originalArray); // 输出: [2, 3, 4] - 原数组未被修改
这种方式在函数式编程范式中特别受欢迎，因为它避免了副作用。
使用 concat() 方法：concat() 方法用于合并两个或多个数组。你可以将新元素放在一个数组中，然后与原数组进行合并。这同样会返回一个新数组。
let originalArray = [2, 3, 4];let newElement = 1;let newArray = [newElement].concat(originalArray);console.log(newArray); // 输出: [1, 2, 3, 4]console.log(originalArray); // 输出: [2, 3, 4] - 原数组未被修改
性能上，concat() 通常也比 unshift() 要好，尤其是在大型数组上。
splice() 方法（不常用，但可行）：splice() 方法可以用于在数组的任意位置添加/删除元素。虽然它主要用于中间插入或删除，但也可以用来在开头插入。
let originalArray = [2, 3, 4];let newElement = 1;originalArray.splice(0, 0, newElement); // 在索引0处，删除0个元素，插入newElementconsole.log(originalArray); // 输出: [1, 2, 3, 4]
尽管 splice() 也能实现，但它的语义更复杂，可读性不如 unshift() 或展开运算符。我一般只在需要进行更复杂数组操作时才会考虑它。
总的来说，对于小型数组或者不频繁的操作，unshift() 绝对是方便快捷的选择。但如果你的应用对性能有较高要求，或者需要处理大量数据，那么考虑使用展开运算符或 concat() 来创建新数组会是更明智的决定。
unshift() 在实际开发中的应用场景举例
尽管 unshift() 有其性能上的考量，但在某些特定的场景下，它依然是简洁而有效的解决方案。我来分享几个我在实际项目中遇到过的例子。
实时通知或消息流：这是 unshift() 最典型的应用场景之一。设想一个网页上的通知中心，当有新的通知到来时，你通常希望它立即出现在列表的最顶端，让用户一眼就能看到。
let notifications = [ { id: 3, message: '您的订单已发货', time: '10:30' }, { id: 2, message: '新功能上线啦！', time: '09:00' }];function addNewNotification(msg) { const newNotification = { id: Date.now(), // 简单模拟ID message: msg, time: new Date().toLocaleTimeString() }; notifications.unshift(newNotification); // 通常这里还会触发UI更新，比如Vue/React组件重新渲染 console.log("当前通知列表:", notifications);}addNewNotification('您有一条新消息');// 输出: 当前通知列表: [{ id: ..., message: '您有一条新消息', time: '...' }, { id: 3, ... }, { id: 2, ... }]
在这种情况下，通知的数量通常不会非常庞大，所以 unshift() 的性能影响微乎其微，而它的直观性则大大提升了开发效率。
历史记录或面包屑导航（逆向构建）：有时，我们需要构建一个历史记录列表，或者一个面包屑导航（Breadcrumb Navigation），但数据的生成顺序是逆向的。例如，用户访问页面的路径是 A -> B -> C，但你希望在显示时，C 在最右边，A 在最左边。如果数据是按访问顺序获取的，那么在构建时，每次新访问的页面就需要添加到历史记录的开头。
let pageHistory = [];function recordPageVisit(pageName) { pageHistory.unshift(pageName); // 为了避免历史记录过长，可以限制数组大小 if (pageHistory.length > 5) { pageHistory.pop(); // 移除最旧的（即最后一个） } console.log("访问历史:", pageHistory);}recordPageVisit('首页'); // 访问历史: ['首页']recordPageVisit('产品列表'); // 访问历史: ['产品列表', '首页']recordPageVisit('商品详情'); // 访问历史: ['商品详情', '产品列表', '首页']
这里，unshift() 使得“最新访问的页面总在最前面”这个逻辑变得非常自然。配合 pop() 来限制数组长度，可以实现一个简单的固定大小历史记录。
动态添加菜单项或列表项：在某些管理后台或配置页面，可能需要动态地在列表的顶部添加新的配置项。如果用户习惯于新添加的项出现在最上面，unshift() 就能满足这个需求。
这些例子都说明了，虽然 unshift() 有其性能上的局限性，但在数据量可控、且“最新项在最前”的逻辑需求明确时，它依然是一个非常实用且能提升代码可读性的方法。关键在于，理解它的特性，并根据具体的业务场景和数据规模做出明智的选择。
以上就是JavaScript如何用数组的unshift添加首元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508976.html
微信扫一扫 
支付宝扫一扫 
