JavaScript 数组 unshift() 方法

JavaScript unshift() 语法

unshift() 是 JavaScript 数组的一个方法,它用于在数组的 “开头” 添加一个或多个元素,并返回新数组的长度。

语法:

arr.unshift(value1, value2, ..., valueN)

说明:

value1、value2、...、valueN 可以是任意类型的值。

注意:

  • unshift() 是一个 “破坏性” 方法,它会改变原数组。
  • unshift() 方法是有返回值的,不过它的返回值并非添加后的数组,而是添加后的数组长度。
  • unshift() 方法的效率比 push() 低。因为在数组开头添加元素时,数组中的现有元素都需要依次向后移动一个位置(索引全部改变),对于大数组来说开销较大。

很多数据结构都有 “增删查改” 这 4 种操作,数组的相关方法如下表所示。

数组的 “增删查改” 方法
方法 说明
unshift() 在数组开头添加元素
shift() 在数组开头删除元素
push() 在数组结尾添加元素
pop() 在数组结尾删除元素

JavaScript unshift() 摘要

属于 JavaScript Array 对象
使用频率 中
修改原数组 是
官方文档 查看
MDN 查看

JavaScript unshift() 示例

接下来,我们通过几个简单的例子来讲解一下 JavaScript unshift() 方法是如何使用的。

示例 1:unshift() 添加一个元素

const arr = ["Python", "C++"];
const result = arr.unshift("Java");

console.log(arr);
console.log(result);

运行结果如下。

[ 'Java', 'Python', 'C++' ]
3

分析:

unshift() 方法会改变原数组,它返回的是添加后的数组长度。如果你不需要用到添加后的数组长度,也可以不使用变量来接收它的返回值,比如:

const arr = ["Python", "C++"];
arr.unshift("Java");
console.log(arr);         // 输出:[ 'Java', 'Python', 'C++' ]

示例 2:unshift() 添加多个元素

const arr = ["Python", "C++"];
arr.unshift("Java", "Go");
console.log(arr);

运行结果如下。

[ 'Java', 'Go', 'Python', 'C++' ]

分析:

unshift() 方法可以一次性在数组开头添加多个元素。

示例 3:unshift() 添加的元素是数组

const arr = ["Python", "C++"];
arr.unshift(["Java", "Go"]);
console.log(arr);

运行结果如下。

[ [ 'Java', 'Go' ], 'Python', 'C++' ]

分析:

当 unshift() 添加的值是一个数组时,此时该数组会作为一个元素添加进去,而不是合并两个数组。

示例 4:unshift() 添加的元素是对象

const arr = ["Python", "C++"];
arr.unshift({name: "Jack", age: 20});
console.log(arr);

运行结果如下。

[ { name: 'Jack', age: 20 }, 'Python', 'C++' ]

分析:

如果 unshift() 添加的值是一个对象,那么该对象同样会作为一个元素添加进去。

深入了解 unshift()

想要在数组开头添加元素,除了 unshift() 方法,还有一个非常有用的方法——ES6 扩展运算符。

示例 5:ES6 扩展运算符

const arr = ["Python", "C++"];
const result = ["Java", ...arr];

console.log(arr);
console.log(result);

运行结果如下。

[ 'Python', 'C++' ]
[ 'Java', 'Python', 'C++' ]

分析:

在某些时候,ES6 扩展运算符会比 unshift()、shift()、push()、pop() 等方法更好用,因为它不会修改原数组。

上一篇:

下一篇:

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号