文章目录

一、map对象二、map对象应用场景1. 数组元素转换2. 对象数组的属性提取或转换3. 数组元素的复杂转换4. 与其他数组方法结合使用5. 与异步操作结合（使用 Promise）6. 生成新的数据结构7. 数学和统计计算

三、set对象1. 基本使用2. 特性3. 注意事项4. 与数组的区别

四、set对象常见操作1. 创建 Set 对象2. 添加元素3. 检查元素是否存在4. 删除元素5. 获取 Set 的大小6. 遍历 Set7. 转换为数组8. 清除 Set9. 交集、并集、差集操作10. 使用 Set 去重

五、热门文章

一、map对象

在JavaScript中，<code>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. 特性

唯一性：Set中的元素是唯一的，重复添加同一个值不会有任何效果。无序性：Set中的元素没有特定的顺序。虽然插入时有顺序，但是当你遍历它时，顺序可能会根据具体的实现有所不同。可迭代：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事件循环