JS面试题-es6 新增 for of 循环详解

用户10106350

发布于 2022-10-28 13:12:10

4470

发布于 2022-10-28 13:12:10

文章被收录于专栏：WflynnWeb

for...of

创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）,Arguments 等可迭代的数据结构等。

语法

for (variable of iterable) {
    statement
}

variable：每个迭代的属性值被分配给该变量。
iterable：一个具有可枚举属性并且可以迭代的对象。

遍历数组

var arr = [
    { name:'nick', age:18 },
    { name:'freddy', age:24 },
    { name:'mike', age:26 },
    { name:'james', age:34 }
];
for(var item of arr) {
    console.log(item.name, item.age);
}

// nick 18
// freddy 24
// mike 26
// james 34

遍历set集合

const iterable = new Set([1, 1, 2, 2, 1]);

for (const value of iterable) {
  console.log(value);
}
// set集合不允许重复的值
// 1
// 2

遍历字符串

const zxx = 'zxx';
 
for (const value of zxx) {
  console.log(value);
}

// z
// x
// x

遍历arguments

function args() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
 
args('a', 'b', 'c');

// a
// b
// c

遍历Map映射

const iterable = new Map([['one', 1], ['two', 2]]);
 
for (const [key, value] of iterable) {
  console.log(`Key: ${key} and Value: ${value}`);
}
 
// Key: one and Value: 1
// Key: two and Value: 2

遍历Generators(生成器)：生成器是一个函数，它可以退出函数，稍后重新进入函数。

function* generator(){
  yield 1;
  yield 2;
  yield 3;
};
 
for (const g of generator()) {
  console.log(g);
}
 
// 1
// 2
// 3

迭代 DOM 集合

下面的例子演示给每一个 article 标签内的 p 标签添加一个 "read" 类。

//注意：这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

迭代其他可迭代对象

你还可以迭代显式实现可迭代协议的对象：

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2

退出迭代

JavaScript 提供了四种已知的终止循环执行的方法：break、continue、

return 和 throw。让我们来看一个例子：const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
  break;
}
 
// mini

在这个例子中，我们使用 break 关键字在一次执行后终止循环，所以只有 mini 被打印出来。

普通对象不可迭代

const obj = { fname: 'foo', lname: 'bar' };
 
for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}

我们可以通过将类数组(array-like)对象转换为数组来绕过它

const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };
 
const array = Array.from(obj);
for (const value of array) {
    console.log(value);
}
// foo
// bar
// baz

1.大数据的Java基础

链接：https://pan.baidu.com/s/1n6sEZ1X1YVoHvLu9wdjkAw

提取码：8jsj

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-12-12，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自 WflynnWeb 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度