您的位置:68399皇家赌场 > 服务器租用 > foreach, for in, for of 之间的异议

foreach, for in, for of 之间的异议

发布时间:2019-05-07 21:54编辑:服务器租用浏览(103)

    结果如下

    缓和难点

    1. 在那段代码中,赋给 index 的值不是实在的数字,而是字符串“0”、“一”、“2”,此时很恐怕在不识不知之间展开字符串算数总计,例如:“二” 一 == “二一”,那给编码进程带来一点都不小的费劲。
    2. 功效于数组的 for-in 循环体除了遍历数组成分外,还会遍历自定义属性。假如你的数组中有贰个可枚举属性 myArray.name,循环将万分实行一回,遍历到名叫“name”的目录。就连数组原型链上的性质都能被访问到。
    3. 最倒霉的是,在少数意况下,这段代码可能依据自由顺序遍历数组成分。
      forin适用于遍历对象属性,但不适用于遍历数组。
      4. for-of (es6)

    上面我们看个例子:

    示范代码

    标题讲述

    var multi = num => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (num) {
            resolve(num * num);
          } else {
            reject(new Error('num not specified'));
          }
        }, 1000);
      })
    }
    async function test () {
      var nums = [1, 2, 3];
      nums.forEach(async x => {
        var res = await multi(x);
        console.log(res);
      })
    }
    test();
    

    在这一个例子中,通过 forEach 遍历的将每二个数字都实行 multi 操作。代码实施的结果是:1秒后,二回性输出壹,四,九。那几个结果和咱们的预料有些不一样,大家是愿意每间隔 1 秒,然后逐1输出 1,肆,九;所以当前代码应该是并行实施了,而作者辈期待的应有是串行实施。

    1. for循环

    for-in 循环遍历的是指标的属性,而不是数组的目录。因而, for-in 遍历的对象便不囿于于数组,还可以遍历对象。

    巡回中的代码每推行一次,就能对数组的成分也许指标的品质举行3遍操作。

    JavaScript 中的循环数组遍历

    在 JavaScript 中提供了如下多种循环遍历数组成分的点子:

    • for
      这是循环遍历数组元素最简单易行的秘诀
    for(i = 0; i < arr.length; i  ) {
      console.log(arr[i]);
    }
    
    • for - in
      for-in 语句以自由顺序遍历八个目的的可枚举属性,对于数组正是数组下标,对于指标便是对象的 key 值。注意 for-in 遍历重临的指标属性都以字符串类型,纵然是数组下标,也是字符串 “0”, “一”, “二” 等等。[不引进使用 for-in 语句]
    for (var index in myArray) {
      console.log(myArray[index]);
    }
    
    • forEach
      forEach 方法用于调用数组的每一种成分,并将成分传递给回调函数;注目的在于回调函数中无法利用 break 跳出当前巡回,也不知道该如何做利用 return 重临值
    myArray.forEach(function (value) {
      console.log(value);
    });
    
    • for - of
      for-of 语句为各类 collection 集合对象尤其定制的,遍历会集对象的属性值,注意和 for-in 的区别
    for (var value of myArray) {
      console.log(value);
    }
    

    3. for-in

    1
    2
    3
    

    示范代码

    方式二

    使用 for-of 替代 for-each

    for-of 能够遍历各类群集对象的属性值,须求被遍历的对象急需贯彻迭代器 ( iterator ) 方法,比方 myObject[Symbol.iterator]() 用于告知 JS 引擎怎么着遍历该指标。2个享有 [Symbol.iterator]() 方法的对象被以为是可遍历的。

    var zeroesForeverIterator = {
      [Symbol.iterator]: function () {
        return this;
      },
      next: function () {
        return {done: false, value: 0};
      }
    };
    

    如上正是贰个最简易的迭代器对象;for-of 遍历对象时,先调用遍历对象的迭代器方法 [Symbol.iterator](),该办法重返几个迭代器对象(迭代器对象中富含3个 next 方法);然后调用该迭代器对象上的 next 方法。

    老是调用 next 方法都回去2个目的,当中 donevalue 属性用来代表遍历是还是不是终止和眼下遍历的属性值,当 done 的值为 true 时,遍历就停下了。

    for (VAR of ITERABLE) {
      STATEMENTS
    }
    

    等价于:

    var $iterator = ITERABLE[Symbol.iterator]();
    var $result = $iterator.next();
    while (!$result.done) {
      VAR = $result.value;
      STATEMENTS
      $result = $iterator.next();
    }
    

    通过能够知道 for-offorEach 遍历成分时管理的不2诀要是例外的。使用 for-of 替代 forEach 后代码为:

    async function test () {
      var nums = [1, 2, 3];
      for(let x of nums) {
        var res = await multi(x);
        console.log(res);
      }
    }
    
    function arrayHasOwnIndex(array, prop) {
     return array.hasOwnProperty(prop) && 
     /^0$|^[1-9]d*$/.test(prop) && 
     prop <= 4294967294; // 2^32 - 2
    }
    

    结果如下

    分析难题

    在本例中 forEach 的回调函数是1个异步函数,异步函数中蕴涵1个 await 等待 Promise 重临结果,我们意在数组成分串行施行这些异步操作,可是其实却是并行实行了。

    forEach 的实现:

    Array.prototype.forEach = function (callback) {
      // this represents our array
      for (let index = 0; index < this.length; index  ) {
        // We call the callback for each entry
        callback(this[index], index, this);
      }
    }
    

    相当于 for 循环实践了这几个异步函数,所以是并行执行,导致了叁遍性全体输出结果:

    async function test () {
      var nums = [1, 2, 3];
    //   nums.forEach(async x => {
    //     var res = await multi(x);
    //     console.log(res);
    //   })
      for(let index = 0; index < nums.length; index  ) {
        (async x => {
          var res = await multi(x);
          console.log(res);
        })(nums[index]);
      }
    }
    

    2. forEach

    您大概感兴趣的篇章:

    • JS数组的遍历格局for循环与for...in
    • js 数组的for循环到底应该怎么写?
    • javascript下for循环用法小结
    • javascript 循环语句 while、do-while、for-in、for用法分别
    • js for循环,为啥一定要加var定义i变量
    • JS使用for循环遍历Table的有着单元格内容
    • JavaScript中for..in循环陷阱介绍
    • JS 使用for循环遍历子节点查找成分
    • 深深解读JavaScript中的Iterator和for-of循环

    综述:foreach越多的用来遍历数组,但采Nabi较复杂;for in 一般常用来遍历

    方式一

    我们得以更改一下 forEach,确认保证每2个异步的回调实行到位后,才实践下三个

    async function asyncForEach(array, callback) {
      for (let index = 0; index < array.length; index  ) {
        await callback(array[index], index, array);
      }
    }
    async function test () {
      var nums = [1, 2, 3];
      asyncForEach(nums, async x => {
        var res = await multi(x);
        console.log(res);
      })
    }
    
    1. 那是最精简、最直白的遍历数组成分的语法
    2. 其壹措施规避了 for-in 循环的具有缺陷
    3. 与 forEach()分歧的是,它可以正确响应 break、continue 和 return 语句
    4. for-of也能够遍历string, map对象, set对象等其余集合

    为什么要引入 for-of?

    1 var arr = [4, 9, 16, 25];
    2 arr.forEach(function(value, index) {
    3     console.log(index ': ' value 'n');
    4 });
    

    标题浅析

    for (var index in myArray) {  console.log(myArray[index]); }
    

    for-in 的真相

     

    警告: 不要接纳forin遍历数组. 原因:

    率先多谢@papa pa的提醒,才开掘自家事先的知晓有荒唐。

    运行结果

    for (var index = 0; index < myArray.length; index  ) { 
         console.log(myArray[index]);
     }
    
    const arr = ['a', 'b', 'c'];
    for(let data of arr) {
     console.log(data);
    }
    

      一. 索引为字符串类型,不能够一贯开始展览几何运算。

    注意: forEach无法使用break语句中断循环,也不可能应用return语句再次来到到外围函数

    在20一五年八月份文告的ECMAScript6(简称 ES陆)中,新扩大了1种循环,是:

      2. 遍历顺序有异常的大希望不是根据实际数组的内部顺序。

    myArray.forEach( value => console.log(value););
    
    const arr = [1, 2, 3];
    arr.name = "Hello world";
    let index;
    for(index in arr) {
     console.log("arr["   index   "] = "   arr[index]);
    }
    

    for of语句和for in 语句相比较使用更方便,它是ES陆新建议的遍历数组的点子,

    for (var value of myArray) { console.log(value); }
    
    const arr = ["a", "b", "c"];
    for (const [index, elem] of arr.entries()) {
        console.log(`index = ${index}, elem = ${elem}`);
    }
    

    forEach 方法为数组中包蕴有效值的每1项实践壹遍 callback 函数,那么些已去除(使用 delete 方法等情状)或然尚未赋值的项将被跳过(不包罗那八个值为 undefined 或 null 的项)。 callback 函数会被依次传入多少个参数:

    指标;for of 用来遍历数组万分便宜且相比较安全。

    person[fname] = san
    person[lname] = zhang
    person[age] = 99
    

    图片 1

    const arr = [1, 2, 3];
    for(let i = 0, len = arr.length; i < len; i  ) {
     console.log(arr[i]);
    }
    

    图片 2

    写到这里,大家能够开采 for-in 并不符合用来遍历 Array 中的成分,其更契合遍历对象中的属性,那也是其被成立出来的初衷。却有1种景况例外,就是稀疏数组。

    具体运用

    for-of

    注意: forEach() 对于空数组是不会进行回调函数的。

    • 那是最精简、最直白的遍历数组成分的语法。
    • 以此办法逃避了 for-in 循环的全数缺陷。
    • 与 forEach 差异的是,它能够准确响应 break、continue 和 return 语句。
    • 其不但能够遍历数组,还足以遍历类数组对象和其它可迭代对象。

    for/in 语句用于循环对象属性。

    arr[0] = 1
    arr[1] = 2
    arr[2] = 3
    

      三. 运用for in会遍历数组全体的可枚举属性,包含原型。

    for-in

    图片 3

    普普通通意况下,大家能够用 for-in 来遍历二回数组的情节,代码如下:

    1 var arr = [12, 43, 19];
    2 Array.prototype.index = 110;//此原型属性不会被打印出来
    3 for(var value of arr) {
    4     console.log(value 'n');
    5 }
    

    作者们看出 for-in 循环访问了大家新增添的 “name” 属性,因为 for-in 遍历了对象的享有属性,而不光是“索引”。同时供给留意的是,此处输出的索引值,即 “0″、 “1″、 “贰″不是 Number 类型的,而是 String 类型的,因为其就是作为质量输出,而不是索引。那是还是不是说不在大家的 Array 对象中加多新的属性,大家就足以只输出数组中的内容了啊?答案是还是不是认的。因为 for-in 不止遍历 array 自个儿的性质,其还遍历 array 原型链上的全部可枚举的习性。

    亟需小心的是,假使使用for in语句遍历数组,可能会现出以下难点:

    我们能够看 jsPerf ,在不一样浏览器下测试的结果都是 forEach 的快慢不比for。如果大家把测试代码放在调控台的话,可能会获得不一致的结果,重要缘由是调整台的实施情况与诚实的代码实施际遇有所区别。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:foreach, for in, for of 之间的异议

    关键词: 68399皇家赌场 Node.js [学习笔记]