JS数组开头添加元素用法介绍

1. 引言

JavaScript是一种广泛应用于网页开发的脚本语言，而数组是其中最常用的数据结构之一。在JavaScript中，数组是一种有序集合，可以存储多个值，并且这些值可以是不同的数据类型。本文将详细介绍如何在JS数组的开头添加元素，以及对应的方法和示例代码。

2. 使用unshift()方法添加元素

JavaScript中提供了unshift()方法，可以在数组的开头添加一个或多个元素。该方法会修改原数组，返回新的数组长度。

2.1 语法

array.unshift(item1, item2, ..., itemX)

2.2 参数说明

item1, item2, ..., itemX：要添加到数组开头的元素，可以是任意数据类型，可以同时添加多个元素。

2.3 返回值

该方法返回修改后数组的新长度。

2.4 示例代码

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 输出：3

fruits.unshift('orange');
console.log(fruits); // 输出：['orange', 'apple', 'banana', 'cherry']
console.log(fruits.length); // 输出：4

fruits.unshift('pear', 'grape');
console.log(fruits); // 输出：['pear', 'grape', 'orange', 'apple', 'banana', 'cherry']
console.log(fruits.length); // 输出：6

上述代码展示了unshift()方法的基本用法。通过unshift()方法，在数组fruits的开头分别添加了元素’orange’、’pear’和’grape’。最终，fruits数组的内容变为['pear', 'grape', 'orange', 'apple', 'banana', 'cherry']，并且长度变为6。

3. 使用ES6扩展运算符添加元素

除了使用unshift()方法，还可以使用ES6的扩展运算符来实现在JS数组的开头添加元素的功能。

3.1 语法

[arrayElement, ...array]

3.2 参数说明

arrayElement：要添加的元素；
array：已存在的数组。

扩展运算符通过展开一个已存在的数组，并在开头添加要添加的元素，返回一个新的数组。

3.3 示例代码

let animals = ['dog', 'cat', 'rabbit'];
console.log(animals.length); // 输出：3

animals = ['lion', ...animals];
console.log(animals); // 输出：['lion', 'dog', 'cat', 'rabbit']
console.log(animals.length); // 输出：4

上述代码中，我们使用扩展运算符在animals数组的开头添加了元素’lion’，并将新数组赋值给了animals变量。最终，animals数组的内容变为['lion', 'dog', 'cat', 'rabbit']，长度变为4。

4. 使用concat()方法添加元素

除了unshift()方法和扩展运算符，还可以使用concat()方法在数组开头添加元素。

4.1 语法

array.concat(value1, value2, ..., valueX)

4.2 参数说明

value1, value2, ..., valueX：要添加到数组开头的元素或数组，可以是任意数据类型。

4.3 返回值

concat()方法返回一个新数组，包含原数组的值和要添加的值或数组。

4.4 示例代码

let numbers = [2, 3, 4];
console.log(numbers.length); // 输出：3

numbers = [0, 1].concat(numbers);
console.log(numbers); // 输出：[0, 1, 2, 3, 4] 
console.log(numbers.length); // 输出：5

上述代码中，我们使用concat()方法将数组[0, 1]和numbers数组连接起来，生成新的数组赋值给numbers变量。最终，numbers数组的内容变为[0, 1, 2, 3, 4]，长度变为5。