数组使用
- 数组使用
数组使用
你提供的代码已经实现了根据 id
去重的功能,它会遍历 efTaskKmzs
数组,检查 this.efTaskList
中是否已经存在具有相同 id
的元素,如果不存在则将该元素添加到 this.efTaskList
中。
不过,你可以使用更简洁的方式来实现相同的功能,下面为你介绍几种不同的实现方法。
数组去重
方法一:使用 Map
对象
Map
对象可以存储键值对,并且键是唯一的,我们可以利用这个特性来实现去重。
javascript
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
方法可以对数组中的每个元素执行一个自定义的回调函数,并将结果累积为一个单一的值。
javascript
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
方法会创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
javascript
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 实现的通用分组函数,它可以根据指定的键对数组进行分组,并且支持传入分组类型数组来控制分组的顺序和包含的分组:
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 通用分组函数,它支持传入一个函数作为第三个参数,以此实现根据不同条件进行分组:
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()
方法可以从原数组中提取部分元素并返回一个新数组。
javascript
const originalArray = [1, 2, { value: 3 }];
const shallowCopy = originalArray.slice();
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(shallowCopy[2].value); // 输出: 4
concat()
方法 :concat()
方法用于合并多个数组,并返回一个新数组。
javascript
const originalArray = [1, 2, { value: 3 }];
const shallowCopy = [].concat(originalArray);
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(shallowCopy[2].value); // 输出: 4
- 扩展运算符(
...
):扩展运算符可以将一个数组展开为多个元素。
javascript
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
等类型。
javascript
const originalArray = [1, 2, { value: 3 }];
const deepCopy = JSON.parse(JSON.stringify(originalArray));
// 修改原数组中的对象元素
originalArray[2].value = 4;
console.log(deepCopy[2].value); // 输出: 3
- 递归实现深拷贝函数:可以编写一个递归函数来实现深拷贝,该函数可以处理各种类型的元素。
javascript
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
总结
- 浅拷贝:适用于只需要复制数组结构,而不需要复制数组元素内容的场景,性能较高。
- 深拷贝:适用于需要完全独立于原数组的场景,确保对新数组的修改不会影响原数组,但性能相对较低,并且实现复杂。