• 技术文章 >web前端 >js教程

    深入了解JS中的for...of循环

    青灯夜游青灯夜游2020-10-12 17:42:44转载126
    本篇文章带大家深入了解一下JavaScript中的for...of循环。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    for...of语句创建的循环可以遍历对象。在ES6中引入的for...of可以替代另外两种循环语句for...in和forEach(),而且这个新的循环语句支持新的迭代协议。for...of允许你遍历可迭代的数据结构,比如数组、字符串、映射、集合等。

    语法

    for (variable of iterable) {
        statement
    }

    我们使用一些示例来阐述。

    Arrays

    array是简单的列表,看上去像object。数组原型有多种方法,允许在其上执行操作,比如遍历。下面的示例使用for...of来对一个array进行遍历操作:

    const iterable = ['mini', 'mani', 'mo'];
    
    for (const value of iterable) {
        console.log(value);
    }
    
    // Output:
    // => mini
    // => mani
    // => mo

    其结果就是打印出iterable数组中的每一个值。

    Map

    Map对象持有key-value对。对象和原始值可以当作一个keyvalueMap对象根据插入的方式遍历元素。换句话说,for...of在每次迭代中返回一个kay-value对的数组。

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

    Set

    Set对象允许你存储任何类型的唯一值,这些值可以是原始值或对象。Set对象只是值的集合。Set元素的迭代是基于插入顺序,每个值只能发生一次。如果你创建一个具有相同元素不止一次的Set,那么它仍然被认为是单个元素。

    const iterable = new Set([1, 1, 2, 2, 1]);
    
    for (const value of iterable) {
        console.log(value);
    }
    
    // Output:
    // => 1
    // => 2

    尽管我们创建的Set有多个12,但遍历输出的只有12

    String

    字符串用于以文本形式存储数据。

    const iterable = 'javascript';
    
    for (const value of iterable) {
        console.log(value);
    }
    
    // Output:
    // => "j"
    // => "a"
    // => "v"
    // => "a"
    // => "s"
    // => "c"
    // => "r"
    // => "i"
    // => "p"
    // => "t"

    在这里,对字符串执行迭代,并打印出每个索引上(index)的字符。

    Arguments Object

    把一个参数对象看作是一个类似数组的对象,与传递给函数的参数相对应。这是一个用例:

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

    你可能在想,到底发生了什么?正如我前面说过的,当调用函数时,参数会接收传入args()函数的任何参数。因此,如果我们将20个参数传递给args()函数,我们将输出20个参数。

    在上面的示例基础上做一些调整,比如给args()函数,传入一个对象、数组和函数:

    function fn(){
    return 'functions';
    }
    
    args('a', 'w3cplus', 'c',{'name': 'airen'},['a',1,3],fn());
    
    // Output:
    // => "a"
    // => "w3cplus"
    // => "c"
    // => Object {
    // =>     "name": "airen"
    // => }
    // => Array [
    // =>    "a",
    // =>    1,
    // =>    3
    // => ]
    // => "functions"

    Generators

    生成器是一个函数,它可以退出函数,稍后重新进入函数。

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

    function* 定义一个生成器函数,该函数返回生成器对象。更多关于生成器相关的信息,可以点击这里

    关闭迭代器

    JavaScript中提供了四种已知的终止循环的方法:breakcontinuereturnthrow。来看一个示例:

    const iterable = ['mini', 'mani', 'mo'];
    
    for (const value of iterable) {
    console.log(value);
    break;
    }
    
    // Output:
    // => mini

    在这个例子中,我们使用break关键词来终止一个循环,并且只打印出一个mini

    普通对象不可迭代

    for...of循环只能和迭代一起工作。但普通对象是不可迭代的。让我们看看:

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

    在这里,我们定义了一个普通对象obj,当我们尝试for...ofobj进行操作时,会报错:TypeError: obj[Symbol.iterator] is not a function

    我们可以把一个类似数组的对象转找成一个数组。对象将具有length属性,它的元素可以被索引。来看一个示例:

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

    Array.from()方法从类似数组(Array-lik)或迭代对象中创建了一个新的数组实例。

    for...of vs. for...in

    for...in在循环中将遍历对象中所有可枚举属性。

    Array.prototype.newArr = () => {};
    Array.prototype.anotherNewArr = () => {};
    const array = ['foo', 'bar', 'baz'];
    for (const value in array) { 
        console.log(value);
    }
    // Outcome:
    // => 0
    // => 1
    // => 2
    // => newArr
    // => anotherNewArr

    for...in不仅可以枚举数组里声明的值,它还可以从构造函数的原型中寻找继承的非枚举属性,比如上例中的newArranotherNewArr,并将它们打印出来。

    for...of可以对数组和对象等做更具体的操作,但并不表示包括所有对象。

    注意:任何具有Symbol.iterator属性的元素都是可迭代的。

    Array.prototype.newArr = function() {};
    const array = ['foo', 'bar', 'baz'];
    for (const value of array) { 
        console.log(value);
    }
    // Outcome:
    // => foo
    // => bar
    // => baz

    for...of不考虑构造函数原型的不可枚举属性。它只需要查找可枚举属性并将其打印出来。

    总结

    理解for...of循环在开发过程中的用法,可以节省很多时间。希望本文能帮助您理解和编写JavaScript开发中的更好的循环结构。从而让你编码更快乐!

    相关免费学习推荐:js视频教程

    以上就是深入了解JS中的for...of循环的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:w3cplus,如有侵犯,请联系a@php.cn删除
    专题推荐:JavaScript for...of循环
    上一篇:JS中20个常用字符串方法及使用方式(总结) 下一篇:消除if else, 让你的代码看起来更优雅
    第13期线上培训班

    相关文章推荐

    • 学学javascript如何截取视频第一帧• 一起看看 鸿蒙 JavaScript GUI 技术栈• 解剖式分析 鸿蒙系统的JavaScript框架• JavaScript之 这次彻底搞懂new操作符!• 10个使用Console进行javascript调试的高级技巧• 深入理解JavaScript中的事件• 原生JavaScript实现弹幕组件de方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网