![Day - avaScript Foundations Professional Certification by Mozilla](https://img.php.cn/upload/article/000/000/000/172490773171799.jpg)
概念亮点:
- 使用 for...of 和 for...in 循环
-
Set() 和 Array、Map() 和 Objects 以及 Set() 和 Map()
1. 使用 for...of 和 for...in 循环
循环是编程中的一个基本概念,允许多次执行一段代码。在 JavaScript 中,for...of 和 for...in 是两个常用的循环,但它们有不同的用途。了解这些差异可以帮助您编写更高效、更有效的代码。
1.1 for...of 循环
for...of 循环用于迭代可迭代对象,例如数组、字符串、映射和集合。它提供了一种访问序列中每个值的直接方法,而无需担心索引。
例如)
雷雷
在这个例子中,for...of直接访问teams数组中的每个元素(team)并将其记录到控制台。当您只需要值而不需要索引时,此循环是理想的选择。
1-2. for...in 循环
另一方面,for...in 循环用于迭代对象的属性(键)。它通常与对象一起使用,但也可以与数组一起使用来访问索引。
例如)
雷雷
在此示例中,for...in 迭代 Mariners 对象的键,允许访问键和相应的值。需要注意的是,对于数组,应谨慎使用 for...in,因为它会迭代所有可枚举属性,而不仅仅是数字索引。
1-3.主要差异
目的:
-
for...of:迭代可迭代对象(数组、字符串、集合、映射)的值。-
for...in:迭代对象的可枚举属性(键)。-
用例:
-
当您需要直接访问值时使用 for...of。 -
当您需要访问键或属性名称时,请使用 for...in。 -
2. Set() 与数组、Map() 与对象、Set() 与 `Map() 的区别
JavaScript 提供了多种数据结构,每种数据结构都有其优点和缺点。我探索了一些最常用的之间的差异:
2-1. Set() 与数组
独特性:
-
Set() 存储唯一值,这意味着不允许重复。-
数组允许重复值。 -
订单:
-
Set() 迭代插入顺序。 -
数组还维护插入顺序,但重复项会改变您与其交互的方式。-
例如)
`
let mySet = new Set([1, 2, 3, 3, 4]);
让 myArray = [1, 2, 3, 3, 4];
console.log(mySet) // 输出:Set { 1, 2, 3, 4 }
console.log(myArray) // 输出:[1, 2, 3, 3, 4]
`
在此示例中,Set() 自动删除重复项
3,而 Array 保留它。当您需要唯一项目的集合时,Set() 非常有用。
2-2. Map() 与 Object
- 关键类型:
Map():键可以是任何类型,包括对象、函数和原始类型。 -
- 对象:键通常是字符串或符号。
- 订单:
- 尺寸:
- Map() 有一个 size 属性,它给出键值对的数量。
- 对象需要通过迭代键来手动确定大小。
例如)
`
让 myMap = new Map();
myMap.set('姓名', '约翰');
myMap.set(42, '答案');
myMap.set({}, '空对象');
让 myObject = {
姓名:“约翰”,
42:“答案”,
{}: '空对象'
};
console.log(myMap.size); // 输出:3
console.log(Object.keys(myObject).length); // 输出:2(由于密钥字符串转换)
`
在此示例中,Map() 允许使用各种键类型,而对象键将转换为字符串。此外,Map() 可以轻松提供地图的大小,而对于对象,您需要手动计算键的数量。
2-3. Set() 与 Map()
- 目的:
-
Set() 是唯一值的集合。
-
Map() 是键值对的集合。
- 用例:
- 当您需要存储唯一项目的列表时,请使用 Set()。
- 当您需要将值与键关联时,请使用 Map()。
例如)
`
让 mySet = new Set([1, 2 ,3]);
让 myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(mySet.has(2)); // 输出:true
console.log(myMap.get('key1')); // 输出:'值'1
`
在此示例中,Set() 用于检查值是否存在,而 Map() 用于检索与键关联的值。
以上是日 - Mozilla 的 avaScript 基础专业认证的详细内容。更多信息请关注PHP中文网其他相关文章!