中国移动网络优化做什么的天津seo优化公司

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中集合常用操作方法的详细介绍。这些方法能够帮助你高效地处理数据集合，实现各种复杂的数据操作需求。