JavaScript中集合常用操作方法详解
JavaScript中集合常用操作方法详解
JavaScript中的集合主要包括数组(Array)、集合(Set)和映射(Map)。下面我将详细介绍这些集合类型的常用操作方法。
数组(Array)
数组是JavaScript中最常用的集合类型，提供了丰富的操作方法。
创建数组
// 字面量创建
const arr1 = [1, 2, 3, 4, 5];
// 构造函数创建
const arr2 = new Array(1, 2, 3, 4, 5);
// 创建指定长度的空数组
const arr3 = new Array(5); // 创建长度为5的空数组
// Array.from方法从类数组对象或可迭代对象创建数组
const arr4 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
// Array.of方法创建包含所有参数的数组
const arr5 = Array.of(1, 2, 3); // [1, 2, 3]
添加和删除元素
const arr = [1, 2, 3];
// 末尾添加元素
arr.push(4, 5); // 返回新长度 5，arr变为[1, 2, 3, 4, 5]
// 开头添加元素
arr.unshift(0); // 返回新长度 6，arr变为[0, 1, 2, 3, 4, 5]
// 末尾删除元素
const last = arr.pop(); // 返回删除的元素 5，arr变为[0, 1, 2, 3, 4]
// 开头删除元素
const first = arr.shift(); // 返回删除的元素 0，arr变为[1, 2, 3, 4]
// 任意位置添加/删除元素
// splice(起始索引, 删除数量, 添加的元素...)
arr.splice(1, 1, 'a', 'b'); // 返回删除的元素数组 [2]，arr变为[1, 'a', 'b', 3, 4]
查找元素
const arr = [1, 2, 3, 4, 5, 3];
// indexOf查找元素首次出现的索引
const index1 = arr.indexOf(3); // 2
// lastIndexOf查找元素最后一次出现的索引
const index2 = arr.lastIndexOf(3); // 5
// includes检查数组是否包含某元素
const hasThree = arr.includes(3); // true
// find返回第一个满足条件的元素
const found = arr.find(item => item > 3); // 4
// findIndex返回第一个满足条件的元素的索引
const foundIndex = arr.findIndex(item => item > 3); // 3
// findLast返回最后一个满足条件的元素（ES2023）
const foundLast = arr.findLast(item => item < 4); // 3
// findLastIndex返回最后一个满足条件的元素的索引（ES2023）
const foundLastIndex = arr.findLastIndex(item => item < 4); // 5
遍历数组
const arr = [1, 2, 3, 4, 5];
// forEach遍历数组
arr.forEach((item, index) => {
console.log(`索引${index}: ${item}`);
});
// map创建一个新数组，其结果是对原数组每个元素调用函数处理后的值
const doubled = arr.map(item => item * 2); // [2, 4, 6, 8, 10]
// filter创建一个新数组，包含通过所提供函数测试的所有元素
const evens = arr.filter(item => item % 2 === 0); // [2, 4]
// reduce对数组中的每个元素执行一个reducer函数，将其结果汇总为单个返回值
const sum = arr.reduce((acc, curr) => acc + curr, 0); // 15
// reduceRight从右到左应用reduce
const rightSum = arr.reduceRight((acc, curr) => acc + curr, 0); // 15
// some检查是否至少有一个元素通过了测试
const hasEven = arr.some(item => item % 2 === 0); // true
// every检查是否所有元素都通过了测试
const allEven = arr.every(item => item % 2 === 0); // false
排序和反转
const arr = [3, 1, 4, 1, 5, 9];
// sort对数组元素进行排序（默认按字符串顺序）
arr.sort(); // [1, 1, 3, 4, 5, 9]
// 自定义排序
arr.sort((a, b) => b - a); // [9, 5, 4, 3, 1, 1] 降序
// reverse反转数组
arr.reverse(); // [1, 1, 3, 4, 5, 9]
数组转换和复制
const arr = [1, 2, 3, 4, 5];
// join将数组元素连接成字符串
const str = arr.join('-'); // "1-2-3-4-5"
// slice返回数组的一部分，不修改原数组
const sliced = arr.slice(1, 4); // [2, 3, 4]
// concat合并两个或多个数组
const combined = arr.concat([6, 7], [8, 9]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 展开运算符复制数组
const copy = [...arr]; // [1, 2, 3, 4, 5]
// flat将嵌套数组扁平化
const nested = [1, [2, [3, 4]]];
const flattened = nested.flat(2); // [1, 2, 3, 4]
// flatMap先映射再扁平化
const flatMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
集合(Set)
Set是一种存储唯一值的集合类型。
基本操作
// 创建Set
const set = new Set([1, 2, 3, 3, 4]); // {1, 2, 3, 4}
// 添加元素
set.add(5); // 返回Set本身，set变为{1, 2, 3, 4, 5}
// 检查元素是否存在
const hasThree = set.has(3); // true
// 删除元素
set.delete(3); // 返回true表示删除成功，set变为{1, 2, 4, 5}
// 获取元素数量
const size = set.size; // 4
// 清空Set
set.clear(); // set变为{}
遍历Set
const set = new Set([1, 2, 3, 4, 5]);
// forEach遍历
set.forEach(value => {
console.log(value);
});
// 使用for...of遍历
for (const value of set) {
console.log(value);
}
// 转换为数组
const arr = [...set]; // [1, 2, 3, 4, 5]
// 获取迭代器
const values = set.values(); // SetIterator {1, 2, 3, 4, 5}
const entries = set.entries(); // SetIterator {[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]}
Set集合操作
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);
// 并集
const union = new Set([...setA, ...setB]); // {1, 2, 3, 4, 5, 6}
// 交集
const intersection = new Set([...setA].filter(x => setB.has(x))); // {3, 4}
// 差集
const difference = new Set([...setA].filter(x => !setB.has(x))); // {1, 2}
映射(Map)
Map是一种键值对集合，可以使用任何类型作为键。
基本操作
// 创建Map
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
// 添加或更新键值对
map.set('key3', 'value3'); // 返回Map本身
// 获取值
const value = map.get('key1'); // "value1"
// 检查键是否存在
const hasKey = map.has('key2'); // true
// 删除键值对
map.delete('key2'); // 返回true表示删除成功
// 获取键值对数量
const size = map.size; // 2
// 清空Map
map.clear(); // map变为空Map
遍历Map
const map = new Map([
['name', '张三'],
['age', 30],
['job', '工程师']
]);
// forEach遍历
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
// 使用for...of遍历
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 获取所有键
const keys = [...map.keys()]; // ["name", "age", "job"]
// 获取所有值
const values = [...map.values()]; // ["张三", 30, "工程师"]
// 获取所有键值对
const entries = [...map.entries()]; // [["name", "张三"], ["age", 30], ["job", "工程师"]]
Map与对象转换
// 对象转Map
const obj = { name: '张三', age: 30 };
const mapFromObj = new Map(Object.entries(obj)); // Map(2) {"name" => "张三", "age" => 30}
// Map转对象
const map = new Map([
['name', '张三'],
['age', 30]
]);
const objFromMap = Object.fromEntries(map); // {name: "张三", age: 30}
WeakMap和WeakSet
WeakMap和WeakSet是特殊的集合类型，它们持有对对象的弱引用，不会阻止垃圾回收。
// WeakMap示例
const weakMap = new WeakMap();
let obj = { id: 1 };
weakMap.set(obj, 'metadata');
// WeakSet示例
const weakSet = new WeakSet();
let obj2 = { id: 2 };
weakSet.add(obj2);
实用技巧
数组去重
// 使用Set去重
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)]; // [1, 2, 3, 4, 5]
数组交集
const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
const intersection = arr1.filter(item => arr2.includes(item)); // [3, 4]
数组分组（ES2023）
const people = [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 },
{ name: '王五', age: 25 }
];
// 按年龄分组
const groupedByAge = Object.groupBy(people, person => person.age);
/*
{
"25": [{ name: '张三', age: 25 }, { name: '王五', age: 25 }],
"30": [{ name: '李四', age: 30 }]
}
*/
对象转Map的应用场景
// 频率计数
const array = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const frequencyMap = array.reduce((map, item) => {
map.set(item, (map.get(item) || 0) + 1);
return map;
}, new Map());
// 结果: Map(3) {"apple" => 3, "banana" => 2, "orange" => 1}
以上就是JavaScript中集合常用操作方法的详细介绍。这些方法能够帮助你高效地处理数据集合，实现各种复杂的数据操作需求。