zoukankan      html  css  js  c++  java
  • 【JavaScript】for...of

    以下内容为学习记录,可以参考 MDN 原文。

    环境

    • node v12.18.1
    • npm 6.14.5
    • vscode 1.46
    • Microsoft Edge 83

    概念

    for...of 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

    示例

    const array1 = ['a', 'b', 'c'];
    
    for (const element of array1) {
      console.log(element);
    }
    
    // expected output: "a"
    // expected output: "b"
    // expected output: "c"
    

    迭代 Array

    let iterable = [10, 20, 30];
    
    for (const value of iterable) {
      console.log(value);
    }
    // 10
    // 20
    // 30
    

    迭代 String

    let iterable = "boo";
    
    for (let value of iterable) {
      console.log(value);
    }
    // "b"
    // "o"
    // "o"
    

    迭代 Map

    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
    
    for (let entry of iterable) {
      console.log(entry);
    }
    // ["a", 1]
    // ["b", 2]
    // ["c", 3]
    
    for (let [key, value] of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    

    迭代 Set

    let iterable = new Set([1, 1, 2, 2, 3, 3]);
    
    for (let value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    

    迭代 arguments

    (function() {
      for (let argument of arguments) {
        console.log(argument);
      }
    })(1, 2, 3);
    
    // 1
    // 2
    // 3
    

    迭代 DOM

    //注意:这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
    let articleParagraphs = document.querySelectorAll("article > p");
    
    for (let paragraph of articleParagraphs) {
      paragraph.classList.add("read");
    }
    

    for...of 与 for...in 的区别

    无论是 for...in 还是 for...of 语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

    for...in 语句以任意顺序迭代对象的可枚举属性。
    for...of 语句遍历可迭代对象定义要迭代的数据。

    以下示例显示了与 Array 一起使用时,for...of 循环和 for...in 循环之间的区别。

    Object.prototype.objCustom = function() {}; 
    Array.prototype.arrCustom = function() {};
    
    let iterable = [3, 5, 7];
    iterable.foo = 'hello';
    
    for (let i in iterable) {
      console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
    }
    
    for (let i in iterable) {
      if (iterable.hasOwnProperty(i)) {
        console.log(i); // logs 0, 1, 2, "foo"
      }
    }
    
    for (let i of iterable) {
      console.log(i); // logs 3, 5, 7
    }
    
  • 相关阅读:
    stm32keilIDE遇到的bug
    linux输入子系统
    按键消抖
    字符驱动程序之——同步互斥阻塞
    字符驱动程序之——异步通知
    字符驱动程序之——poll机制
    第一个驱动之字符设备驱动(四)按键中断
    第一个驱动之字符设备驱动(三)按键查询
    第一个驱动之字符设备驱动(二)mdev
    三者互ping,PC,虚拟机,uboot,nfs网络文件系统搭建
  • 原文地址:https://www.cnblogs.com/jiangbo44/p/13727364.html
Copyright © 2011-2022 走看看