【js自学打卡3】

真假值 | map | 迭代器 | Symbol类型 | entries()

1.关于真值与假值

在这里插入图片描述

2.map对象

键-值映射。类型任意。无序,但保留插入顺序。

// 创建一个新的 Map 对象
const myMap = new Map();

// 设置键值对
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.set('key3', 'value3');

// 获取键对应的值
console.log(myMap.get('key1')); // 输出:value1

// 检查一个键是否存在
console.log(myMap.has('key2')); // 输出:true

// 删除一个键值对
myMap.delete('key1');

// 获取 Map 的大小
console.log(myMap.size); // 输出:2

// 遍历 Map
myMap.forEach((value, key) => {
  console.log(key, value);
});
// 输出:
// key2 value2
// key3 value3

// 遍历 Map 的 keys
myMap.keys().forEach((key) => {
  console.log(key);
});
// 输出:
// key2
// key3

// 遍历 Map 的 values
myMap.values().forEach((value) => {
  console.log(value);
});
// 输出:
// value2
// value3

3.迭代器、可迭代对象与for…of

迭代器
顾名思义就是用来遍历数据集合的接口或对象。在js中,迭代器是实现迭代器协议的对象。(协议:必须实现一个next方法,这个方法会返回一个包含
value 和 done 属性的对象。value为值,done为是否完成遍历)

可迭代对象
能够被for…of循环遍历的对象。
1.实现了可迭代协议;2.有一个@@iterator 方法,是Symbol类型的属性,返回一个迭代器对象。

for…of
for...of 是ES6中引入的一种新的循环结构,用于遍历可迭代对象(iterable objects)。它比传统的 for 循环和 forEach 方法更简洁、更易于理解,并且提供了对迭代行为的更好控制。

for...of 循环的基本语法如下:

for (变量 of 可迭代对象) {
  // 循环体
}

在每次迭代中,for...of 循环会执行以下步骤:

  1. 创建一个用于存储迭代器的状态的变量(在例子中是变量)。
  2. 调用可迭代对象的 @@iterator 方法(也称为迭代器协议),这会返回一个迭代器对象。
  3. 执行迭代器对象的 next 方法,以获取下一个值。如果迭代器已经完成,next 方法会返回一个具有 done 属性为 true 的对象。
  4. 如果 done 属性为 false,则循环体被执行。在循环体中,变量 会被赋予 next 方法返回的对象的值。
  5. 循环体执行完毕后,再次执行迭代器对象的 next 方法,并重复步骤3和4,直到 done 属性为 true
  6. 循环结束。
    for...of 循环自动处理迭代器的生命周期,包括迭代器的创建、值的获取以及循环的终止。这使得 for...of 成为处理可迭代对象非常方便和直观的方法。
    以下是一些使用 for...of 的例子:
// 遍历数组
const array = [1, 2, 3];
for (const value of array) {
  console.log(value); // 输出 1 2 3
}
// 遍历字符串
const string = 'hello';
for (const char of string) {
  console.log(char); // 输出 h e l l o
}
// 遍历自定义可迭代对象
class MyIterable {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
}
const myIterable = new MyIterable();
for (const value of myIterable) {
  console.log(value); // 输出 1 2 3
}
// 遍历Map对象
const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
for (const [key, value] of map) {
  console.log(key, value); // 输出 a 1 b 2 c 3
}
// 遍历Set对象
const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value); // 输出 1 2 3
}

for...of 循环也可以使用 breakcontinue 语句来控制循环的流程,就像传统的 for 循环一样。此外,for...of 循环不支持 return 语句,因为循环的退出是由迭代器的完成状态控制的。

关于for…of详解

迭代器相关

4.Symbol类型

Symbol 是ES6中引入的一种新的原始数据类型,它代表独一无二的值。Symbol值通过Symbol函数创建,该函数接受一个字符串作为描述(description),用于调试。
创建Symbol值的语法如下:

const sym = Symbol('description');

这里,sym 是一个Symbol类型的新实例,它的描述是字符串 'description'。注意,Symbol函数的参数(描述)是可选的,如果没有提供描述,则生成一个匿名(匿名)的Symbol值。
Symbol值的特点是它们总是唯一的,即使是相同的描述字符串也不会产生相同的Symbol值。这意味着你可以使用Symbol来作为对象属性的键,而不用担心属性名冲突。
Symbol值有一些内置的属性,例如:

  • Symbol.iterator:用于定义对象的默认迭代器。
  • Symbol.asyncIterator:用于定义异步迭代器。
  • Symbol.toStringTag:用于自定义对象的字符串描述(Object.prototype.toString.call())。
  • Symbol.for:用于查找或注册一个全局的Symbol值。
    下面是一些使用Symbol的例子:
// 创建带有描述的Symbol值
const sym1 = Symbol('sym1');
const sym2 = Symbol('sym1'); // 即使描述相同,也是不同的Symbol值
// 检查两个Symbol值是否相同
console.log(sym1 === sym2); // 输出 false
// 获取Symbol值的描述
console.log(sym1.description); // 输出 'sym1'
// 使用Symbol值作为对象属性键
const obj = {};
obj[sym1] = 'value';
// 获取Symbol属性值
console.log(obj[sym1]); // 输出 'value'
// 遍历对象,不包括Symbol属性
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key); // 这里不会输出Symbol属性
  }
}
// 使用Symbol.iterator定义默认迭代器
class MyIterable {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
}
const myIterable = new MyIterable();
for (const value of myIterable) {
  console.log(value); // 输出 1 2 3
}

在实际开发中,Symbol值常用于元编程(meta-programming),比如定义对象的私有方法或创建具有特定语义的私有属性。由于Symbol值不会出现在标准的for...in循环和Object.keys()方法中,它们非常适合用于这些用途。

5.entries(),key(),value()

entries()

  • 作用对象:数组、Map对象
  • 返回值为包含键值对[ key, value ]的数组

区分:
key()和value()返回的是迭代器

在JavaScript中,entries() 方法是数组的一个实例方法,它返回一个包含数组中每个元素键值对的新数组。每个键值对是一个包含两个元素的数组,第一个元素是元素的索引,第二个元素是该索引对应的值。
entries() 方法在for...of循环中非常有用,因为它允许你同时访问数组的索引和值。下面是一个使用entries()方法的例子:

const arr = ['a', 'b', 'c'];
// 使用for...of循环和entries()方法
for (const [index, value] of arr.entries()) {
  console.log(index, value); // 输出 0 a 1 b 2 c
}

在这个例子中,for...of循环通过entries()方法获取了数组arr的每个元素的索引和值,并分别赋值给变量indexvalue
entries()方法也可以用于Map对象,它同样会返回一个包含键值对的新数组。

  • 26
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值