JavaScript循环of in

琳沫1

已于 2023-08-17 11:47:41 修改

阅读量107

点赞数

文章标签： javascript 前端开发语言

于 2023-08-14 14:00:42 首次发布

本文链接：https://blog.csdn.net/weixin_45655721/article/details/132273898

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

JavaScript 循环_for...of / in

循环
一、 for…in 循环
- 1.生成新的对象
二、for…of 循环

循环

const img= obj[`img${i}`];

 <div  class="movebody"  :style="{ height: `${boxHeight}px`}">
 </div>

这段代码使用了模板字符串和对象属性的动态访问方式。

${i}是一个模板字符串的语法，用于插入变量i的值。模板字符串用`` (反引号)包裹起来，其中${}部分会被变量的值替换。

obj[img${i}]则是使用动态属性访问的方式。在这个例子中，属性名由img字符串和变量i的值组成。这意味着，如果i的值是1，那么这个代码将尝试访问obj对象的img1属性。

总而言之，这段代码的目的是动态访问obj对象中以img开头，后面跟着变量i的值的属性，并将其赋值给变量img。你可以根据具体的上下文来判断这段代码的用途。

提示：以下是本篇文章正文内容，下面案例可供参考

一、 for…in 循环

for…in 循环：用于遍历对象的可枚举属性（不包括原型链上的属性）。
在每次迭代中，变量 key 会被赋值为对象的一个属性名，你可以通过 obj[key] 来访问对应的属性值

示例：for…in 循环会遍历 obj 对象的属性，key 的值会分别是 ‘imgSrc’ 和 ‘name’。

const obj = { imgSrc: 'image.jpg', name: 'example' };

for (let key in obj) {
  if (key.includes('img')) {
    console.log(`${key}属性名包含'img'`);
  }
}
// 输出结果 ： imgSrc属性名包含'img'

1.生成新的对象

如果你想将对象中属性名包含"img"的键值对重新生成为一个新的对象，可以使用以下代码实现：

const obj = { imgSrc: 'image.jpg', name: 'example', imgSrc222: 'image.jpg' };

const newObj = {};

for (let key in obj) {
  if (key.includes('img')) {
    newObj[key] = obj[key];
  }
}

console.log(newObj);

Object.keys()方法获取对象的所有属性，然后根据属性的数量进行循环。

const obj = { imgSrc: 'image.jpg', name: 'example', imgSrc222: 'image.jpg' };
const imgUrls = [];

const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  if (key.includes('img')) {
    imgUrls.push(obj[key]);
  }
}

console.log(imgUrls);

在这个例子中，通过Object.keys(obj)获取到obj对象中的所有属性名，然后使用一个循环遍历这些属性名。在循环体中，我们检查每个属性名是否包含"img"，如果是，则将对应的属性值(obj[key])添加到imgUrls数组中。

二、for…of 循环

JavaScript 中也有使用 “of” 的循环结构，即 for…of 循环。与 for…in 循环不同，for…of 循环用于遍历可迭代对象（例如数组、字符串等），而不是对象的属性。

1.可迭代对象

可迭代对象是指实现了可迭代协议（Iterable protocol）的对象。可迭代协议要求对象必须实现一个具有特殊方法 Symbol.iterator 的函数，该函数返回一个迭代器（Iterator）对象。

迭代器对象用于定义如何进行迭代，它包含一个 next() 方法，该方法在每次迭代中返回一个包含两个属性的对象：value（表示当前迭代的值）和 done（表示迭代是否完成）。

在 JavaScript 中，一些内置的可迭代对象包括：

数组（Array）：可以使用 for…of 循环遍历数组中的元素。
字符串（String）：可以使用 for…of 循环遍历字符串中的字符。
Map 和 Set：可以使用 for…of 循环遍历 Map 和 Set 中的条目。
除了这些内置对象，你也可以自定义实现可迭代对象，只需要在对象中定义 Symbol.iterator 方法，并返回一个迭代器对象，就可以使用 for…of 循环来遍历自定义对象。

需要注意的是，并不是所有的对象都是可迭代对象，如果一个对象没有实现可迭代协议，尝试对其使用 for…of 循环将会导致错误。

2.for…of 循环来`遍历数组`

for…of 循环来遍历数组的例子（示例）：

const arr = [1, 2, 3, 4, 5];

for (let item of arr) {
  console.log(item);
}
// 输出:
// 1
// 2
// 3
// 4
// 5

3.for…of 循环来`字符串数组`

代码如下（示例）：

const str = "Hello";

for (let char of str) {
  console.log(char);
}
// 输出:
// H
// e
// l
// l
//

该处使用的url网络请求的数据。

4.for…of 循环来`Map` 和 `Set`

除了数组，我们还可以使用 for…of 循环遍历其他可迭代对象，比如字符串、Map 和 Set。下面是对字符串和 Map 进行遍历的例子：

const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);

for (let [key, value] of map) {
  console.log(key, value);
}
// 输出:
// 1 "one"
// 2 "two"
// 3 "three"

在字符串的例子中，我们使用 for…of 循环遍历了字符串中的每个字符，并将其打印出来。而在 Map 的例子中，我们使用 for…of 循环遍历了 Map 中的每个条目，并打印出键和对应的值。

通过使用 for…of 循环，我们可以方便地遍历可迭代对象中的元素，并对它们进行操作。

Set 去除重复

Set集合去重的原理
 数组去重及原理总结

使用 Set 来进行去重操作是非常方便的，但有时可能会出现没有去重的情况。这可能是因为 Set 的去重是基于值的严格相等性进行的，而不是基于自定义的相等性比较函数。

举个例子，如果我们想要对一个包含对象的数组进行去重，可能会遇到没有去重的情况。这是因为 Set 在比较对象时，实际上比较的是对象的引用，而不是对象的内容。即使两个对象具有相同的属性和值，它们也会被视为不同的对象。

为了解决这个问题，我们需要自定义一个比较函数，并在每次插入元素到 Set 之前对其进行比较。例如，假设我们有一个包含对象的数组，我们可以使用 Array.from() 和自定义的比较函数来实现去重：

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }
];

const uniqueArr = Array.from(new Set(arr.map(JSON.stringify)), JSON.parse);

console.log(uniqueArr);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]