for of_for of循环 - CSDN
精华内容
参与话题
  • 【ES6】for of用法

    万次阅读 多人点赞 2018-05-31 12:51:25
    前言:for of是ES6新增的循环方法。前面已经说到了 【JavaScript】for、forEach 、for in、each循环详解。那for of又是怎么使用的? 一、使用例子 使用例子(一) var arr = ['nick','freddy','mike','james']; ...

    前言:for of是ES6新增的循环方法。前面已经说到了 【JavaScript】for、forEach 、for in、each循环详解。那for of又是怎么使用的?

    一、使用例子

    使用例子(一)

    var arr = ['nick','freddy','mike','james'];
    for(var item of arr){	
        console.log(item);
    }

    输出结果:

    遍历数组里的每一项。

     

    二、使用例子(二)

    var arr = [
        { name:'nick', age:18 },
        { name:'freddy', age:24 },
        { name:'mike', age:26 },
        { name:'james', age:34 }
    ];
    for(var item of arr){	
        console.log(item.name,item.age);
    }

    输出结果:

    遍历数组里的每一项。 

     

    二、与for in 区别

    区别①:for of无法循环遍历对象

    var userMsg = {
        0: 'nick',
        1: 'freddy',
        2: 'mike',	
        3: 'james'
    };
     
    for(var key in userMsg){
        console.log(key, userMsg[key]);	
    }
    console.log('-----------分割线-----------');
    for(var item of userMsg){	
        console.log(item);
    }

    输出结果:

     

    区别②:遍历输出结果不同

    var arr = ['nick','freddy','mike','james'];
    for(var key in arr){
        console.log(key);	
    }
    console.log('-----------分割线-----------');
    for(var item of arr){	
        console.log(item);
    }

    输入结果:

    不难看出,for in循环遍历的是数组的键值(索引),而for of循环遍历的是数组的值。

     

    区别③:for in 会遍历自定义属性,for of不会

    var arr = ['nick','freddy','mike','james'];
    arr.name = "数组";
    
    for(var key in arr){
        console.log(key+': '+arr[key]);	
    }
    console.log('-----------分割线-----------');
    for(var item of arr){	
        console.log(item);
    }

    输入结果:

    给数组添加一个自定义属性name,并且赋值"数组"。然后进行遍历输出的,会发现新定义的属性也被for in输出来了,而for of并不会对name进行输出。

     

    展开全文
  • 1 遍历数组通常用for循环 ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断...

    1 遍历数组通常用for循环

    ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。

    Array.prototype.method=function(){
      console.log(this.length);
    }
    var myArray=[1,2,4,5,6,7]
    myArray.name="数组"
    for (var index in myArray) {
      console.log(myArray[index]);
    }

    2 for in遍历数组的毛病

    1.index索引为字符串型数字,不能直接进行几何运算
    2.遍历顺序有可能不是按照实际数组的内部顺序
    3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性
    所以for in更适合遍历对象,不要使用for in遍历数组。

    那么除了使用for循环,如何更简单的正确的遍历数组达到我们的期望呢(即不遍历method和name),ES6中的for of更胜一筹.

    Array.prototype.method=function(){
      console.log(this.length);
    }
    var myArray=[1,2,4,5,6,7]
    myArray.name="数组";
    for (var value of myArray) {
      console.log(value);
    }

    记住,for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

    for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name

    3 遍历对象

    遍历对象 通常用for in来遍历对象的键名

    Object.prototype.method=function(){
      console.log(this);
    }
    var myObject={
      a:1,
      b:2,
      c:3
    }
    for (var key in myObject) {
      console.log(key);
    }

    for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

    for (var key in myObject) {
      if(myObject.hasOwnProperty(key)){
        console.log(key);
      }
    }

    同样可以通过ES5的Object.keys(myObject)获取对象的实例属性组成的数组,不包括原型方法和属性

    Object.prototype.method=function(){
      console.log(this);
    }
    var myObject={
      a:1,
      b:2,
      c:3
    }

    总结

    • for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是,它可以正确响应break、continue和return语句
    • for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用for-in循环(这也是它的本职工作)或内建的Object.keys()方法:
    for (var key of Object.keys(someObject)) {
      console.log(key + ": " + someObject[key]);
    }
    遍历map对象时适合用解构,例如;
    for (var [key, value] of phoneBookMap) {
       console.log(key + "'s phone number is: " + value);
    }
    • 当你为对象添加myObject.toString()方法后,就可以将对象转化为字符串,同样地,当你向任意对象添加myObjectSymbol.iterator方法,就可以遍历这个对象了。
      举个例子,假设你正在使用jQuery,尽管你非常钟情于里面的.each()方法,但你还是想让jQuery对象也支持for-of循环,你可以这样做:
    jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

    所有拥有Symbol.iterator的对象被称为可迭代的。在接下来的文章中你会发现,可迭代对象的概念几乎贯穿于整门语言之中,不仅是for-of循环,还有Map和Set构造函数、解构赋值,以及新的展开操作符。

    • for...of的步骤
      or-of循环首先调用集合的Symbol.iterator方法,紧接着返回一个新的迭代器对象。迭代器对象可以是任意具有.next()方法的对象;for-of循环将重复调用这个方法,每次循环调用一次。举个例子,这段代码是我能想出来的最简单的迭代器:
    var zeroesForeverIterator = {
     [Symbol.iterator]: function () {
       return this;
      },
      next: function () {
      return {done: false, value: 0};
     }
    };

    JS数组遍历:

    1.普通for循环

    var arr = [1,2,0,3,9];
     for ( var i = 0; i <arr.length; i++){
        console.log(arr[i]);
    }

    2.优化版for循环

    使用变量,将长度缓存起来,避免重复获取长度,数组很大时优化效果明显

    for(var j = 0,len = arr.length; j < len; j++){
        console.log(arr[j]);
    }

    3.forEach

    ES5推出的,数组自带的循环,主要功能是遍历数组,实际性能比for还弱

    arr.forEach(function(value,i){
      console.log('forEach遍历:'+i+'--'+value);
    
    })

    forEach这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

    4.map遍历

    map即是 “映射”的意思 用法与 forEach 相似,同样不能使用break语句中断循环,也不能使用return语句返回到外层函数。

    arr.map(function(value,index){
        console.log('map遍历:'+index+'--'+value);
    });

    map遍历支持使用return语句,支持return返回值

    var temp=arr.map(function(val,index){
      console.log(val);  
      return val*val           
    })
    console.log(temp);  

    forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持

    5.for-of遍历

    ES6新增功能

    for( let i of arr){
        console.log(i);
    }
    • for-of这个方法避开了for-in循环的所有缺陷
    • 与forEach()不同的是,它可以正确响应break、continue和return语句 

    for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象。for-of循环也支持字符串遍历

     

    JS对象遍历:

    1.for-in遍历

    for-in是为遍历对象而设计的,不适用于遍历数组。(遍历数组的缺点:数组的下标index值是数字,for-in遍历的index值"0","1","2"等是字符串)

    for-in循环存在缺陷:循环会遍历对象自身的和继承的可枚举属性(不含Symbol属性)

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

    2.使用Object.keys()遍历

    返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

    var obj = {'0':'a','1':'b','2':'c'};
    
    Object.keys(obj).forEach(function(key){
    
         console.log(key,obj[key]);
    
    });

    3.使用Object.getOwnPropertyNames(obj)遍历

    返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性). 

    var obj = {'0':'a','1':'b','2':'c'};
    Object.getOwnPropertyNames(obj).forEach(function(key){
    
        console.log(key,obj[key]);
    
    });

    4.使用Reflect.ownKeys(obj)遍历

    返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.  

    var obj = {'0':'a','1':'b','2':'c'};
    Reflect.ownKeys(obj).forEach(function(key){
    
      console.log(key,obj[key]);
    
    });

     

    展开全文
  • JS中forfor...offor...in区别

    千次阅读 2019-04-11 17:52:20
    forforoffor…in区别 forEach() foeEach()不能使用break语句跳出循环,或者使用return从函数体内返回 for-in() 为循环“enumerable”对象设计的 循环遍历对象自身和继承的可枚举属性(不含Symbol) 会...

    for 、for…of、for…in区别

    • forEach()
      • foeEach()不能使用break语句跳出循环,或者使用return从函数体内返回
    • for-in()
      • 为循环“enumerable”对象设计的
      • 循环遍历对象自身和继承的可枚举属性(不含Symbol)
      • 会循环原型链和手动添加的键,返回键名key
      • 某些情况下,循环顺序随机
    • for-of()(ES6)
      • 可以使用break,continue,return
      • 支持数组类数组对象的遍历,循环读取键值
      • 也支持字符串的遍历
    展开全文
  • [乐意黎原创]JS里的for…in和forof的用法与区别

    万次阅读 多人点赞 2018-05-07 09:57:38
    for...in 循环 for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 for...in 语句用于对数组或者对象的属性进行循环操作。 for ... in 循环中的代码每执行一次,就会对数组的元素...

     

    for...in 循环

    for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

     

    for...in 语句用于对数组或者对象的属性进行循环操作。

    for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

    for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。

    for (variable in object) {...}

    variable

    在每次迭代时,将不同的属性名分配给变量。

    object

    被迭代枚举其属性的对象。

    for...in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototypeString.prototype的不可枚举属性,例如 String 的 indexOf()  方法或 ObjecttoString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。

     

    数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。不能保证for ... in将以任何特定的顺序返回索引。for ... in循环语句将返回所有可枚举属性,包括非整数类型的名称和继承的那些。

    因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时,最好用整数索引去进行for循环(或者使用 Array.prototype.forEach() 或 for...of 循环)。

     

    语法:

    for (变量 in 对象){ 在此执行代码 }

    “变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。

    var mycars = new Array()
    mycars[0] = "Saab"
    mycars[1] = "Volvo"
    mycars[2] = "BMW"
    
    mycars.color = "white"
    
    for (var x in mycars)
    {
       console.log(mycars[x]);
    }

    var mycars = ["Saab", "Volvo", "BMW"];
    
    mycars.color = "white"
    
    for (var x in mycars)
    {
       console.log(mycars[x]);
    }

    var mycars = {1:"Saab", 2:"Volvo", 3:"BMW"};
    
    mycars.color = "white"
    
    for (var x in mycars)
    {
       console.log(mycars[x]);
    }

    var mycars = {"1":"Saab", "2":"Volvo", "3":"BMW"};
    
    mycars.color = "white"
    
    for (var x in mycars)
    {
       console.log(mycars[x]);
    }


    for...of 循环

    for … of循环是ES6引入的新的语法,用for … of循环遍历集合

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

    for (variable of iterable) {
        //statements
    }variable在每次迭代中,将不同属性的值分配给变量。iterable被迭代枚举其属性的对象。
    var mycars = new Array()
    mycars[0] = "Saab"
    mycars[1] = "Volvo"
    mycars[2] = "BMW"
    
    mycars.color = "white"
    
    for (var x of mycars)
    {
       console.log(x);
    }

     

    ar mycars = ["Saab", "Volvo", "BMW"];
    
    mycars.color = "white"
    
    for (var x of mycars)
    {
       console.log(x);
    }

     

    var mycars = {1:"Saab", 2:"Volvo", 3:"BMW"};
    
    mycars.color = "white"
    
    for (var x of mycars)
    {
       console.log(x);
    }
    //错误用法


    or...offor...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
    }
    Object.prototype.objCustom = function() {};
    Array.prototype.arrCustom = function() {}; 
    
    let iterable = [3, 5, 7]; 
    iterable.foo = 'hello';

    每个对象将继承objCustom属性,并且作为Array的每个对象将继承arrCustom属性,因为将这些属性添加到Object.prototypeArray.prototype。由于继承和原型链,对象iterable继承属性objCustomarrCustom

    for (let i in iterable) {
      console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" 
    }

    此循环仅以原始插入顺序记录iterable 对象的可枚举属性。它不记录数组元素357 或hello,因为这些不是枚举属性。但是它记录了数组索引以及arrCustomobjCustom。如果你不知道为什么这些属性被迭代,array iteration and for...in中有更多解释。

    for (let i in iterable) {
      if (iterable.hasOwnProperty(i)) {
        console.log(i); // logs 0, 1, 2, "foo"
      }
    }

    这个循环类似于第一个,但是它使用hasOwnProperty() 来检查,如果找到的枚举属性是对象自己的(不是继承的)。如果是,该属性被记录。记录的属性是012foo,因为它们是自身的属性(不是继承的)。属性arrCustomobjCustom不会被记录,因为它们是继承的。

    for (let i of iterable) {
      console.log(i); // logs 3, 5, 7 
    }

    该循环迭代并记录iterable作为可迭代对象定义的迭代值,这些是数组元素 357,而不是任何对象的属性。

     


    For 循环

    for 循环是您在希望创建循环时常会用到的工具。

    下面是 for 循环的语法:

    for (语句 1; 语句 2; 语句 3)
      {
      被执行的代码块
      }
    

    语句 1 在循环(代码块)开始前执行

    语句 2 定义运行循环(代码块)的条件

    语句 3 在循环(代码块)已被执行之后执行

    实例

    for (var i=0; i<5; i++)
      {
      x=x + "The number is " + i + "<br>";
      }

     


    总结

    for … in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。 

     

    for … in循环将把name包括在内,但Array的length属性却不包括在内。

    for … of循环则完全修复了这些问题,它只循环集合本身的元素。



    以上

    -------------------------------

    乐意黎

    2018-05-07

    展开全文
  • for of 实现原理

    千次阅读 2019-01-13 10:45:59
    for of 是我们经常使用的一个属性,它可以非常方便的遍历数组,除此之外,它还可以用来遍历类数组对象,Set和Map等,那么问题就来了,为什么它可以遍历Map却不能遍历普通的对象呢?今天就来探索一下for of底层的秘密...
  • for:遍历数组 //对象数组 var arr = [ {Monday: '星期一', Monday: '星期二', Wednesday: '星期三'} ] for (var i=0; i&amp;amp;lt;arr.length;i++){ // i是下标(索引) console.log(i) console.log(arr...
  • for offor in 的区别

    万次阅读 2018-05-23 09:47:46
    for in 一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性,语句都会被执行。... 不建议使用for in 遍历数组,因为输出的顺序是不固定的。...for of ...
  • forEach、for in 、 for of三者的区别

    万次阅读 多人点赞 2018-05-04 11:42:57
    在开发过程中经常需要循环遍历数组或者对象,forEach、for in 、 for of这三种方法使用最多 但却一值傻傻分不清楚。。今天来一个大区分。。 for循环 其实除了这三种方法以外还有一种最原始的遍历,自Javascript...
  • JS中 for in 与 for of的区别

    千次阅读 2018-10-06 14:32:21
    for of遍历的是数组元素值。 Array.prototype.method=function(){} var myArray=[1,2,4]; myArray.name="数组"; for (var index in myArray) console.log(myArray[index]); //0,1,...
  • 简述js中 for in 与 for of 区别

    万次阅读 2017-06-07 23:55:52
    for in是ES5标准,遍历key. for of是ES6标准,遍历value.for (var key in arr){ console.log(arr[key]); }for (var value of arr){ console.log(value); }
  • js中循环语句有forEach,for in,for of 三种了一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,array[i]); } 结果如下: 0 1 1 2 2 3...
  • for in 与for of循环的区别

    千次阅读 2018-04-09 14:09:06
    欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 ...
  • js中for in与for of之间的差异

    千次阅读 2018-03-19 10:55:59
    推荐在循环对象属性的时候,使用for…in,在遍历数组的时候的时候使用foroffor…in循环出的是key,forof循环出的是value 注意,forof是ES6新引入的特性。修复了ES5引入的for…in的不足 forof不能循环...
  • JavaScript 中 for in 和for of的区别

    千次阅读 2018-08-23 17:48:10
    for of 只能用于数组遍历,for in还可以用于对象属性的遍历 eg, 1. 遍历数组: let array = [1,2,3,'lynn','Lanny'] console.log('for of: ') for (let value of array){ console.log(value); } c...
  • 写在前面JavaScript中,茴香豆的'茴'有四种写法……开玩笑的,是数组的遍历有四种方法,本文将会分别展示四种遍历的用法,分析他们的区别,最后比较他们的性能。...for(var i = 0; i &lt; arr.length; i++){  ...
  • for in、for of、forEach的区别

    千次阅读 2017-07-14 11:04:14
    forEachforEach()是数组的一个方法,用于遍历数组的每一项,并对每一项执行一个callback函数。 forEach()没有返回值,返回值总是undefined。let a = ["a","b","c"]; a.forEach(function(item...// cfor…ofES6提出
  • 看一个列子,分析一下两个遍历的区别: 数组中: var arr=["a","b","c","d"]; for(var a in arr){ ...for(var a of arr){ console.log(a); } // 打印值 a b c d 对象中: var obj = {
  • js for in 和for of的区别

    千次阅读 2017-09-25 11:50:46
    参考文档 https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450082788640f82a480be8481a8ce8272951a40970000 ...for of 遍历的是value  手动给对象添加属性后, fo
  • forEach:(可以三个参数,第一个是value,第二个是index,第三个是数组体) 缺点:不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据, 方法不能使用break,continue语句跳出循环,或者使用return从...
  • 前端各种循环的区别for of 等等

    千次阅读 2018-07-21 15:53:47
    for… in Array和Object 获取可枚举的实例和原型属性名 Object.keys() Array和Object 返回可枚举的实例属性名组成的数组 Object.getPropertyNames() Array和Object 返回除原型属性以外的...
1 2 3 4 5 ... 20
收藏数 3,877,892
精华内容 1,551,156
关键字:

for of