JavaScript map对象/set对象详解

一、map对象

在JavaScript中，map 是一种常见的方法，主要用于数组（Array）对象。这个方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

map 方法的基本语法如下：

arr.map(function callback(currentValue[, index[, array]]) {// 返回元素的新值
}[, thisArg])

• callback：生成新数组元素的函数，有三个参数：
  • currentValue（必需）：数组中正在处理的当前元素。
  • index（可选）：数组中正在处理的当前元素的索引。
  • array（可选）：map 方法被调用的数组。
• thisArg（可选）：执行 callback 函数时 this 所指向的对象。

下面是一个使用 map 方法的简单示例：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {return number * 2;
});console.log(doubled); // 输出：[2, 4, 6, 8, 10]

在这个例子中，我们有一个包含数字的数组 numbers。我们使用 map 方法遍历这个数组，并返回一个新数组 doubled，其中的每个元素都是原数组中对应元素的两倍。

你也可以使用箭头函数来简化代码：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);console.log(doubled); // 输出：[2, 4, 6, 8, 10]

此外，map 方法不会改变原始数组，而是返回一个新数组。这是它与其他会修改原始数组的方法（如 forEach、pop、push 等）之间的主要区别。

二、map对象应用场景

JavaScript 中的 map() 方法在数组操作中非常有用，它允许你遍历数组的每个元素，并对每个元素执行一个函数，然后将该函数的结果组成一个新的数组。以下是 map() 方法的一些常用场景：

1. 数组元素转换

当你需要将数组中的每个元素转换为另一种形式时，可以使用 map()。例如，你可能有一个数字数组，并希望将其转换为字符串数组，或者将每个元素乘以某个数。

const numbers = [1, 2, 3, 4, 5];
const strings = numbers.map(num => num.toString()); // ["1", "2", "3", "4", "5"]
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

2. 对象数组的属性提取或转换

如果你有一个对象数组，并希望提取或转换每个对象的某个属性，map() 也能派上用场。

const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];
const names = users.map(user => user.name); // ["Alice", "Bob", "Charlie"]

3. 数组元素的复杂转换

有时，你可能需要对数组中的每个元素进行复杂的转换，这可能需要多个步骤或依赖于其他数据。map() 可以很容易地处理这种情况。

const prices = [100, 200, 300];
const discountedPrices = prices.map(price => price * 0.9); // 打折后的价格

4. 与其他数组方法结合使用

map() 经常与其他数组方法（如 filter()、reduce()）结合使用，以执行更复杂的数组操作。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenSquares = numbers.filter(num => num % 2 === 0) // 过滤出偶数.map(num => num * num); // 平方每个偶数
// [4, 16, 36, 64]

5. 与异步操作结合（使用 Promise）

虽然 map() 本身不直接支持异步操作，但你可以使用它结合 Promise 和 async/await 来处理异步数组操作。

async function fetchData(urls) {const responses = await Promise.all(urls.map(url => fetch(url)));const data = await Promise.all(responses.map(response => response.json()));return data;
}

6. 生成新的数据结构

map() 可以用于基于原始数组生成全新的数据结构，如对象或嵌套数组。

const numbers = [1, 2, 3];
const objects = numbers.map(num => ({ value: num, squared: num * num }));
// [{ value: 1, squared: 1 }, { value: 2, squared: 4 }, { value: 3, squared: 9 }]

7. 数学和统计计算

对于涉及数组元素数学运算的任务（如计算每个元素的平方、累加等），map() 可以提供一个简洁的解决方案。

三、set对象

在JavaScript中，Set 是一个内建的对象类型，它允许你存储唯一的值，无论是原始值或者是对象引用。每个值在Set对象中只会出现一次。它是ES6（ECMAScript 2015）中引入的一种新的数据结构。

1. 基本使用

你可以通过new Set()来创建一个空的Set对象，或者传递一个数组或其他可迭代对象来初始化它。

// 创建一个空的 Set
let mySet = new Set();// 创建一个包含初始值的 Set
let mySet = new Set([1, 2, 3, 4, 4]); // 注意：4 只会出现一次// 添加元素
mySet.add(5);// 检查元素是否存在
console.log(mySet.has(1)); // 输出：true
console.log(mySet.has(6)); // 输出：false// 获取 Set 的大小
console.log(mySet.size); // 输出：5// 删除元素
mySet.delete(3);
console.log(mySet.has(3)); // 输出：false// 遍历 Set
for (let item of mySet) {console.log(item); // 依次输出：1, 2, 4, 5（顺序可能与输入时不同）
}// 转换为数组
let myArray = Array.from(mySet);
// 或者使用扩展运算符 ...
let myArray = [...mySet];
console.log(myArray); // 输出：[1, 2, 4, 5]（顺序可能与输入时不同）

2. 特性

1. 唯一性：Set中的元素是唯一的，重复添加同一个值不会有任何效果。
2. 无序性：Set中的元素没有特定的顺序。虽然插入时有顺序，但是当你遍历它时，顺序可能会根据具体的实现有所不同。
3. 可迭代：Set是可迭代的，所以你可以使用for...of循环来遍历它。

3. 注意事项

• 当使用对象作为Set的元素时，由于对象的引用性质，即使两个对象的内容相同，但它们在内存中的位置不同，所以它们会被视为不同的元素。
• 如果你想要比较对象的内容是否相同，而不是引用是否相同，你可能需要自行实现一个比较函数或者使用其他数据结构，如Map结合自定义的键来存储对象。

4. 与数组的区别

数组可以包含重复的元素，而Set不可以。此外，数组是有序的，但Set是无序的（尽管在插入时有一定的顺序，但在遍历时可能会变化）。这些特性使得Set在某些场景下（如去重、检查唯一性等）比数组更为方便和高效。

四、set对象常见操作

在JavaScript中，Set 对象是一种特殊的类型，它允许你存储唯一的值（无论是原始值还是对象引用）。以下是一些基本的操作 Set 对象的方法：

1. 创建 Set 对象

你可以使用 new Set() 来创建一个新的 Set 对象。

let mySet = new Set();

或者，你可以通过传递一个数组或其他可迭代对象来初始化 Set。

let mySet = new Set([1, 2, 3, 4, 4]); // 4 只会出现一次

2. 添加元素

使用 add() 方法向 Set 中添加元素。

mySet.add(5);

3. 检查元素是否存在

使用 has() 方法来检查 Set 中是否包含某个元素。

console.log(mySet.has(1)); // 输出：true
console.log(mySet.has(6)); // 输出：false

4. 删除元素

使用 delete() 方法（注意：在Set中是delete而不是数组的splice或pop等方法）从 Set 中删除元素。

mySet.delete(3);
console.log(mySet.has(3)); // 输出：false

5. 获取 Set 的大小

使用 size 属性来获取 Set 中的元素数量。

console.log(mySet.size); // 输出：4（假设已经删除了元素3）

6. 遍历 Set

由于 Set 对象是可迭代的，你可以使用 for...of 循环来遍历它。

for (let item of mySet) {console.log(item); // 依次输出 Set 中的元素
}

7. 转换为数组

你可以使用 Array.from() 方法或扩展运算符 ... 将 Set 转换为数组。

let myArray = Array.from(mySet);
// 或者
let myArray = [...mySet];
console.log(myArray); // 输出：一个包含 Set 中所有元素的数组

8. 清除 Set

使用 clear() 方法来清除 Set 中的所有元素。

mySet.clear();
console.log(mySet.size); // 输出：0

9. 交集、并集、差集操作

虽然 Set 对象本身没有提供直接进行交集、并集、差集操作的方法，但你可以通过组合使用 Set 的方法来实现这些功能。例如，你可以使用 filter() 方法结合 has() 方法来实现差集操作。

10. 使用 Set 去重

由于 Set 只存储唯一的值，因此它经常被用来去除数组中的重复项。

let arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [...new Set(arrayWithDuplicates)];
console.log(uniqueArray); // 输出：[1, 2, 3, 4, 5]

五、热门文章

【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环