【数组去重、分组和拷贝】
数组使用
- 数组使用
- 数组去重
- 方法一：使用 `Map` 对象
- 方法二：使用 `reduce` 方法
- 方法三：使用 `filter` 方法
- 数组分组
- 一、自定义的分组数组
- 二、自定义的分组函数
- 数组拷贝
- 一、浅拷贝
- 实现浅拷贝的方法
- 二、深拷贝
- 实现深拷贝的方法
- 总结
数组使用
你提供的代码已经实现了根据 id 去重的功能，它会遍历 efTaskKmzs 数组，检查 this.efTaskList 中是否已经存在具有相同 id 的元素，如果不存在则将该元素添加到 this.efTaskList 中。
不过，你可以使用更简洁的方式来实现相同的功能，下面为你介绍几种不同的实现方法。
数组去重
方法一：使用 Map 对象
Map 对象可以存储键值对，并且键是唯一的，我们可以利用这个特性来实现去重。
const efTaskKmzs = data.efTaskKmzs;
// 创建一个 Map 对象，用于存储已经存在的 id
const idMap = new Map(this.efTaskList.map(item => [item.id, item]));
efTaskKmzs.forEach(item => {
if (!idMap.has(item.id)) {
idMap.set(item.id, item);
}
});
// 将 Map 对象的值转换为数组赋值给 this.efTaskList
this.efTaskList = Array.from(idMap.values());
方法二：使用 reduce 方法
reduce 方法可以对数组中的每个元素执行一个自定义的回调函数，并将结果累积为一个单一的值。
const efTaskKmzs = data.efTaskKmzs;
this.efTaskList = [...this.efTaskList, ...efTaskKmzs].reduce((acc, current) => {
// 检查累积数组中是否已经存在具有相同 id 的元素
const existing = acc.find(item => item.id === current.id);
if (!existing) {
// 如果不存在，则将当前元素添加到累积数组中
acc.push(current);
}
return acc;
}, []);
方法三：使用 filter 方法
filter 方法会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
const efTaskKmzs = data.efTaskKmzs;
const combinedList = [...this.efTaskList, ...efTaskKmzs];
this.efTaskList = combinedList.filter((item, index, self) => {
// 检查当前元素的索引是否是第一次出现该 id 的元素的索引
return index === self.findIndex(t => t.id === item.id);
});
以上三种方法都可以实现根据 id 对数组元素进行去重的功能，你可以根据自己的喜好选择合适的方法。
数组分组
一、自定义的分组数组
用 JavaScript 实现的通用分组函数，它可以根据指定的键对数组进行分组，并且支持传入分组类型数组来控制分组的顺序和包含的分组：
function groupBy(arr, key, groupTypes = []) {
const grouped = {};
// 如果提供了分组类型数组，先初始化分组对象
if (groupTypes.length > 0) {
groupTypes.forEach(type => {
grouped[type] = [];
});
}
arr.forEach(item => {
const groupValue = item[key];
if (!grouped[groupValue]) {
grouped[groupValue] = [];
}
grouped[groupValue].push(item);
});
return grouped;
}
// 示例数据
const people = [
{ name: '张三', gender: '男' },
{ name: '李四', gender: '女' },
{ name: '王五', gender: '男' }
];
// 根据性别分组
const groupedByGender = groupBy(people, 'gender', ['男', '女']);
console.log(groupedByGender);
二、自定义的分组函数
JavaScript 通用分组函数，它支持传入一个函数作为第三个参数，以此实现根据不同条件进行分组：
function groupBy(arr, key, groupFunction) {
const grouped = {};
arr.forEach(item => {
const groupValue = groupFunction(item[key]);
if (!grouped[groupValue]) {
grouped[groupValue] = [];
}
grouped[groupValue].push(item);
});
return grouped;
}
// 示例数据
const people = [
{ name: '张三', age: 18 },
{ name: '李四', age: 22 },
{ name: '王五', age: 30 },
{ name: '赵六', age: 26 }
];
// 定义分组函数
const ageGroupFunction = (age) => {
if (age >= 0 && age < 20) {
return '0 - 20';
} else if (age >= 20 && age < 25) {
return '20 - 25';
} else if (age >= 25 && age < 36) {
return '25 - 36';
}
return '其他';
};
// 根据年龄分组
const groupedByAge = groupBy(people, 'age', ageGroupFunction);
console.log(groupedByAge);
数组拷贝
在 JavaScript 中，数组的浅拷贝和深拷贝是处理数组复制时的重要概念，它们在复制数组时有着不同的行为和应用场景，下面为你详细介绍。
一、浅拷贝
浅拷贝会创建一个新的数组对象，但新数组中的元素仍然是原数组元素的引用。这意味着，如果原数组中的元素是对象或其他引用类型，那么新数组和原数组中的这些元素会指向同一个内存地址。对其中一个数组中引用类型元素的修改会影响到另一个数组。
实现浅拷贝的方法
slice()方法：slice()方法可以从原数组中提取部分元素并返回一个新数组。
const originalArray = [1, 2, { value: 3 }];
const shallowCopy = originalArray.slice();
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(shallowCopy[2].value); // 输出: 4
concat()方法：concat()方法用于合并多个数组，并返回一个新数组。
const originalArray = [1, 2, { value: 3 }];
const shallowCopy = [].concat(originalArray);
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(shallowCopy[2].value); // 输出: 4
- 扩展运算符（
...）：扩展运算符可以将一个数组展开为多个元素。
const originalArray = [1, 2, { value: 3 }];
const shallowCopy = [...originalArray];
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(shallowCopy[2].value); // 输出: 4
二、深拷贝
深拷贝会创建一个新的数组对象，并且递归地复制原数组中的所有元素，包括嵌套的对象和数组。这意味着，新数组和原数组中的元素指向不同的内存地址，对其中一个数组的修改不会影响到另一个数组。
实现深拷贝的方法
JSON.parse()和JSON.stringify()：这是一种简单的深拷贝方法，但它有一些局限性，例如不能处理函数、undefined、Symbol等类型。
const originalArray = [1, 2, { value: 3 }];
const deepCopy = JSON.parse(JSON.stringify(originalArray));
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(deepCopy[2].value); // 输出: 3
- 递归实现深拷贝函数：可以编写一个递归函数来实现深拷贝，该函数可以处理各种类型的元素。
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
let copy;
if (Array.isArray(obj)) {
copy = [];
for (let i = 0; i < obj.length; i++) {
copy[i] = deepCopy(obj[i]);
}
} else {
copy = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepCopy(obj[key]);
}
}
}
return copy;
}
const originalArray = [1, 2, { value: 3 }];
const deepCopyArray = deepCopy(originalArray);
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(deepCopyArray[2].value); // 输出: 3
总结
- 浅拷贝：适用于只需要复制数组结构，而不需要复制数组元素内容的场景，性能较高。
- 深拷贝：适用于需要完全独立于原数组的场景，确保对新数组的修改不会影响原数组，但性能相对较低，并且实现复杂。