关闭

Array循环for、for in、for of、forEach各间优劣

时间: 2020-12-09阅读: 79标签: 遍历

JavaScript中有多种循环Array的方式,你是否常常分不清他们的细微差别,和适用场景。本文将详细梳理各间的优缺点,整理成表以便对比。

循环可访问element可访问index可迭代property支持中断支持await支持任意位置开始
for×
for in××
forEach××××
for of××


for (ES1)

这个循环方式历史悠久,从ECMAScript 1就被支持。

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (let index=0; index < arr.length; index++) {
  const elem = arr[index];
  console.log(index, elem);
}

// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for循环方式通用,迭代过程可以访问元素和当前元素下标索引,但是语法上略显冗长。


for in (ES1)

for in 的历史同for一样悠久。

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const key in arr) {
  console.log(key);
}

// Output:
// '0'
// '1'
// '2'
// 'prop'

for in 用来循环数组不是一个合适的选择。

  • 迭代的是属性key,不是值
  • 由于属性 key 是字符串,迭代出的元素索引是 string,不是 number.
  • 迭代的是数组实例上所有可枚举的属性key,而不是数组内元素。

如果你想获取一个对象所有的可枚举属性(包含原型链上的),那么 for in 倒是可以胜任,若仅仅是对象自身声明的属性,那 Object.keys 更合适。


forEach (ES5)

鉴于 for 和 for-in 都不特别适合在 Arrays 上循环,因此在ECMAScript 5中引入了辅助方法:Array.prototype.forEach.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

arr.forEach((elem, index) => {
  console.log(elem, index);
});

// Output:
// 'a', 0
// 'b', 1
// 'c', 2

这个方法很方便,它让我们可以访问数组元素和数组元素下标,而不需要做太多的事情。箭头函数(在ES6中引入)使该方法在语法上更加优雅。

forEach 主要确定是:

  • 循环内部不支持 await 操作。
  • 即使找到你想要的元素,也无法中断循环。

要实现中断循环,可以使用同期引入的 Array.prototype.same 方法。some 循环遍历所有 Array 元素,并在其回调返回一个真值时停止。

const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
  if (index >= 2) {
    return true; //结束循环
  }
  console.log(elem);
  // 隐式返回假值 undefined,继续循环
});

// Output:
// 'red'
// 'green'


for of (ES6)

for of 是 ECMAScript 6 新引入的语法。

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const elem of arr) {
  console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'

for of 很适合遍历数组:

  • 迭代所有数组元素
  • 内部支持 await,甚至是 ES2018 中引入的 for-await-of 语法
  • 可以使用 break 和 continue 跳出循环

for-of 的另一个好处是,我们不仅可以遍历数组,还可以遍历任何可迭代对象(例如map)

const myMap = new Map()
  .set(false, 'no')
  .set(true, 'yes')
;
for (const [key, value] of myMap) {
  console.log(key, value);
}

// Output:
// false, 'no'
// true, 'yes'

遍历 myMap 会生成[key, value]对,对其进行解构方便直接访问。

如果你在循环中需要感知当前元素索引,可以通过 Array 方法 entries 返回可迭代的 [index,value]对。 和map一样的解构直接访问index、value:

const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const [index, value] of arr.entries()) {
  console.log(index, value);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'


循环体内 await 测试

准备如下代码用于测试循环体内 await,getFruit 模拟远程服务延迟返回。

const fruits = ["apple", "grape", "pear"];

const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const getFruit = (fruit) => {
  return sleep(2000).then((v) => fruit);
};

先看 for of, 元素之间会按预期间隔输出。

(async function(){
    console.log('start');
    for (fruit of fruits) {
        const element = await getFruit(fruit);
        console.log(element);
    }
    console.log('start');
})();

//3个元素 间隔2s输出
"start"
"apple"
"grape"
"pear"
"end"

再看 forEach, 注意 forEach 调用后直接返回输出 loop end, 间隔2s 后同时输出了后面结果,并没有按预期各个间隔输出。

(async function () {

  console.log("foreach loop start ....");
  fruits.forEach(async value => {
    const element = await getFruit(value);
    console.log(element);
  });
  console.log("foreach loop end ....");

})();

//同时输出
foreach loop start ....
foreach loop end ....
//间隔2s 后同时输出下面3个
apple
grape
pear
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10148

js遍历对象的三种方法

for in 只能遍历可枚举属性和原型链的属性;通过Object.keys(obj) 只能遍历可枚举属性 不能遍历不可枚举和原型链上的属性 //Object.values(obj) //遍历可枚举的值

为什么不推荐用for...in遍历数组

通过用户给定的选择器列表selectors确定哪些元素可以提取出来作为标题,比如传一个[\\\'h1\\\', \\\'h3\\\', \\\'div.title\\\']。网友的使用方法完全正确,selectors传递的都是合法的选择器

Js二叉树与多叉树的遍历

二叉树的顺序存储结构就是用一维数组存储二叉树中的各个结点,并且结点的存储位置能体现结点之间的逻辑关系。二叉树的遍历有三种方式,如下:

Js中forEach跳出循环体

在forEach中,不能使用 continue 和 break ,可以使用 return 或 return false 跳出循环,效果与 for 中 continue 一样。注意该方法无法一次结束所有循环。

PHP遍历二叉树

遍历二叉树,这个相对比较复杂。二叉树的便利,主要有两种,一种是广度优先遍历,一种是深度优先遍历。什么是广度优先遍历?就是根节点进入,水平一行一行的便利。

javascript如何循环遍历对象?

在JavaScript中有多种循环遍历对象的方法,下面本篇文章就来给大家介绍一下使用JavaScript循环遍历对象的方法,希望对大家有所帮助。

js中循环总结,多种循环遍历的实现介绍(while,for,map,foreach等)

循环是所有语言最基础的语法。这篇文章将介绍avascript多种循环遍历的实现介绍,包括for ..in遍历方式 ,do..while,forEach,for…of,map等等,

JavaScript 中的遍历详解

编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试,我在下面定义了一个测试对象 obj。

js数组、对象、字符串的遍历

数组遍历:for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显,forEach --ES5语法;对象遍历:for...in --以任意顺序遍历一个对象自有的、继承的、可枚举的

为什么 JS 对象内部属性遍历的顺序乱了

查阅了 ECMA-262 3rd edition ,如下文 It is an unordered collection of properties 就说到 ES3 标准的对象不排序,插入是啥顺序,遍历就是啥顺序

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!