JavaScript数组操作：添加元素、去重与倒序截取
引言
在JavaScript开发中，数组操作是非常常见的需求。本文将详细介绍如何向数组添加新元素，处理重复项，以及如何倒序返回最后3个元素。我们将通过具体的代码示例来演示这些操作的实现方法。
向数组添加新元素
JavaScript提供了多种向数组添加元素的方法，最常用的是push()和unshift()方法。
push()方法
push()方法用于向数组的末尾添加一个或多个元素，并返回新的长度。
// 创建一个空数组
let fruits = [];
// 使用push()方法添加元素
fruits.push('apple');
console.log(fruits); // 输出: ['apple']
fruits.push('banana', 'orange');
console.log(fruits); // 输出: ['apple', 'banana', 'orange']unshift()方法
unshift()方法用于向数组的开头添加一个或多个元素，并返回新的长度。
let numbers = [3, 4, 5]; // 使用unshift()方法添加元素 numbers.unshift(1, 2); console.log(numbers); // 输出: [1, 2, 3, 4, 5]
处理重复项
在向数组添加元素时，有时需要避免重复项的出现。以下是几种常见的去重方法。
方法一：使用Set对象
ES6引入的Set对象是一种集合数据结构，它只存储唯一的值。
function addUniqueElement(arr, element) {
// 将数组转换为Set，自动去重，再转换回数组
let uniqueArr = [...new Set(arr)];
// 检查元素是否已存在
if (!uniqueArr.includes(element)) {
uniqueArr.push(element);
}
return uniqueArr;
}
let colors = ['red', 'green', 'blue'];
colors = addUniqueElement(colors, 'red'); // 'red'已存在，不会添加
console.log(colors); // 输出: ['red', 'green', 'blue']
colors = addUniqueElement(colors, 'yellow'); // 'yellow'不存在，会添加
console.log(colors); // 输出: ['red', 'green', 'blue', 'yellow']方法二：使用filter()方法
filter()方法创建一个新数组，包含通过指定函数测试的所有元素。
function addWithoutDuplicates(arr, element) {
// 过滤掉重复的元素
let filteredArr = arr.filter(item => item !== element);
// 添加新元素
filteredArr.push(element);
return filteredArr;
}
let animals = ['cat', 'dog', 'bird'];
animals = addWithoutDuplicates(animals, 'cat'); // 'cat'已存在，会被移除后重新添加
console.log(animals); // 输出: ['dog', 'bird', 'cat']
animals = addWithoutDuplicates(animals, 'fish'); // 'fish'不存在，直接添加
console.log(animals); // 输出: ['dog', 'bird', 'cat', 'fish']倒序返回最后3个元素
要倒序返回数组的最后3个元素，我们可以结合使用slice()和reverse()方法。
使用slice()和reverse()方法
slice()方法返回一个新的数组对象，这一对象是一个由begin和end决定的原数组的浅拷贝。reverse()方法将数组中元素的位置颠倒。
function getLastThreeReversed(arr) {
// 如果数组长度小于等于3，直接返回倒序的数组
if (arr.length <= 3) {
return arr.slice().reverse();
}
// 获取最后3个元素并倒序
return arr.slice(-3).reverse();
}
let scores = [85, 92, 78, 90, 88, 95];
let lastThreeReversed = getLastThreeReversed(scores);
console.log(lastThreeReversed); // 输出: [95, 88, 90]
let shortArray = [1, 2];
let reversedShort = getLastThreeReversed(shortArray);
console.log(reversedShort); // 输出: [2, 1]使用扩展运算符和解构赋值
ES6的扩展运算符和解构赋值提供了更简洁的语法来实现相同的功能。
function getLastThreeReverseModern(arr) {
// 使用扩展运算符和解构赋值获取最后3个元素
const [...lastThree] = arr.slice(-3);
// 手动实现倒序
return lastThree.reverse();
}
let temperatures = [22, 25, 23, 26, 24, 27];
let reversedTemps = getLastThreeReverseModern(temperatures);
console.log(reversedTemps); // 输出: [27, 24, 26]综合示例
下面是一个综合示例，展示了如何结合上述方法来创建一个功能更强大的数组处理函数。
class EnhancedArray {
constructor(...elements) {
this.elements = elements;
}
// 添加唯一元素
addUnique(element) {
if (!this.elements.includes(element)) {
this.elements.push(element);
}
return this;
}
// 获取最后N个元素并倒序
getLastNReversed(n) {
if (this.elements.length <= n) {
return [...this.elements].reverse();
}
return this.elements.slice(-n).reverse();
}
// 获取数组内容
getArray() {
return this.elements;
}
}
// 使用示例
let myArray = new EnhancedArray('a', 'b', 'c');
myArray.addUnique('d').addUnique('b'); // 'b'已存在，不会添加
console.log(myArray.getArray()); // 输出: ['a', 'b', 'c', 'd']
let lastTwoReversed = myArray.getLastNReversed(2);
console.log(lastTwoReversed); // 输出: ['d', 'c']总结
本文介绍了JavaScript中数组的基本操作方法，包括向数组添加元素的push()和unshift()方法，处理重复项的Set对象和filter()方法，以及倒序返回最后3个元素的slice()和reverse()方法。通过这些方法的组合使用，我们可以灵活地处理各种数组操作需求。在实际开发中，根据具体场景选择合适的方法可以提高代码的效率和可读性。