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中集合常用操作方法的詳細介紹。這些方法能夠幫助你高效地處理數據集合，實現各種復雜的數據操作需求。
)
