文章目录
- 一、map对象
- 二、map对象应用场景
- 1. 数组元素转换
- 2. 对象数组的属性提取或转换
- 3. 数组元素的复杂转换
- 4. 与其他数组方法结合使用
- 5. 与异步操作结合(使用 Promise)
- 6. 生成新的数据结构
- 7. 数学和统计计算
- 三、set对象
- 1. 基本使用
- 2. 特性
- 3. 注意事项
- 4. 与数组的区别
- 四、set对象常见操作
- 1. 创建 Set 对象
- 2. 添加元素
- 3. 检查元素是否存在
- 4. 删除元素
- 5. 获取 Set 的大小
- 6. 遍历 Set
- 7. 转换为数组
- 8. 清除 Set
- 9. 交集、并集、差集操作
- 10. 使用 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. 特性
- 唯一性:
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事件循环