for...in VS. for...of

Anchorer 发布于2019-08-23 12:11 / 1090人阅读

摘要：在种和一样都具有遍历数组的功能，但是他们的返回结果并不相同，使用遍历数组时，无法使用中断循环，也无法使用中断，当然使用也不能返回到外层函数。枚举对象循环不支持普通对象，如果想迭代一个对象的属性，可以使用内建的方法使用方法获取对象的数组

先看下面这两种写法：
1.

tabList.forEach((tab, i) => {
    if (tab.is_main) {
        this.tabStores.push();
    }else{
        this.tabStores.push();
    }
});

tabList.map((tab, i) => {
    let ViewComponent = null;
    if (tab.is_main) {
         ViewComponent = ( ); 
    }else {
         ViewComponent = ( );
    }
    return (  {ViewComponent} );
})

刚学习的时候一直觉得map和forEach是同样的东西，上面的两种写法可以随便互换，后来有机会仔细查了一下，发现并不是这样。
在ES5种 forEach 和 map 一样都具有遍历数组的功能，但是他们的返回结果并不相同，使用 forEach 遍历数组时，无法使用break中断循环，也无法使用 return false 中断，当然使用 return 也不能返回到外层函数。例如：

var arr = [1, 2, 3];
arr.forEach(function (value) {
  console.log(value);
  if (value == 2) {
    return false;
  }
});
// 结果是：1, 2, 3

for in VS. for of

for...in循环出的是key，for...of循环出的是value
遍历数组：

var arr = [2, 5, 7];
for (let temp in arr){//枚举数组
    console.log(temp);
}
//0 1 2
for (let temp of arr){//迭代数组
    console.log(temp);
}
//2 5 7

使用for...in的时候如果想要获取数组内的value，可以采用索引的方式，例如arr[temp];但是这个做法并不好，因为：1.temp并不是一个数字，而是一个string，会无意间增加字符串计算；2.for in 不仅可以枚举数组自身。数组的原型对象、数组对象本身的属性也都可以枚举出来（可用hasOwnProperty()方法过滤非自有属性）；3.这段代码可能按照随机顺序遍历数组； 4.for... in不适用于数组的遍历，更加适用于对象。

枚举对象：

var obj = {
    a: 1,
    b: [],
    c: fn,
};
for ( let temp in obj){
    console.log(temp);
}
// a b c
for (let temp of obj){
    console.log(temp);
}
// Uncaught TypeError: obj is not iterable

for...of循环不支持普通对象，如果想迭代一个对象的属性，可以使用内建的Object.keys()方法；

for(let key of Object.keys(obj)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key + ":" + obj[key]);
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98078.html

JavaScript 的 4 种数组遍历方法： for VS forEach() VS for/in

摘要：对于，除非使用箭头函数，它的回调函数的将会变化。使用测试下面的代码，结果如下打印打印要点使用的规则要求所有回调函数必须使用箭头函数。译者按： JS 骚操作。原文：For vs forEach() vs for/in vs for/of in JavaScript 译者: Fundebug 本文采用意译，版权归原作者所有我们有多种方法来遍历 JavaScript 的数组或者...

joyqi 2019-08-26 13:35 评论0 收藏0
Iterator 和 for..of vs for...in

摘要：迭代器遍历器提高访问具有遍历借口数据的效率相当于指针默认是可遍历借口有方法将当前指针移动到下个位置，返回一个对象数组默认有迭代器属性可以用在数组类数组类似于数组类数组自定义遍历器普通循环遍历迭代器遍历遍历遍历用来遍历对象 Iterator迭代器(遍历器) 提高访问具有遍历借口数据的效率相当于指针(默认是-1)；可遍历借口有next方法(next将当前指针移动到下个位置，返回一个对...

ThreeWords 2019-08-21 16:02 评论0 收藏0
一文彻底弄懂 for forEach for-in for-of 的区别

基本语法下面列出了这几个遍历语法规则： for (let index = 0; index < array.length; index++) { const element = array[index] // ... } array.forEach(element => { // ... }) for (const key in array) { // ......

newsning 2019-08-23 15:32 评论0 收藏0
一些当前 Node.js 中最流行 ES6 特性的 benchmark （V8 / Chakra）

摘要：前言项目地址如果有想要增加的特性，欢迎更新，然后。环境大致结论许多情况下下的特性表现相对更好。前言项目 github 地址：https://github.com/DavidCai1993/ES6-benchmark 如果有想要增加的特性 benchmark ，欢迎更新benchmarks/ ，然后 PR 。环境 CPU: Intel Core(TM) i5-2410M 2.30...

ZHAO_ 2019-08-19 17:54 评论0 收藏0
es6--let和const

摘要：同时这个变量立即被初始化，初始值为当语句执行到赋值语句时，这个变量改变其初始值。对一个还未初始化的变量进行操作将会引起。循环和循环使用申明变量时和循环一样。的运行过程和三者的表现和在循环过程中相似。 let和const 标签（空格分隔）： es6 let命令这个命令是用来申明变量的，但是和es5不同的是，用它来声明的变量是局部变量，存在于局部作用域(blocked scope): ...

lufficc 2019-08-20 10:41 评论0 收藏0