精华内容
下载资源
问答
  • 【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进行输出。

     

    展开全文
  • forEach、for in 、 for of三者的区别

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

    在开发过程中经常需要循环遍历数组或者对象,使用最多的方法forEach、for…in 、 for…of,整理一下他们的异同点

    for循环

    其实除了这三种方法以外还有一种最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组

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

    for循环中可以使用return、break等来中断循环

    forEach

    对数组的每一个元素执行一次提供的函数(不能使用return、break等中断循环),不改变原数组,无返回值undefined。

    let arr = ['a', 'b', 'c', 'd']
    arr.forEach(function (val, idx, arr) {
        console.log(val + ', index = ' + idx) // val是当前元素,index当前元素索引,arr数组
        console.log(arr)
    })
    

    输出结果:

    a, index = 0
    (4) ["a", "b", "c", "d"]
    b, index = 1
    (4) ["a", "b", "c", "d"]
    c, index = 2
    (4) ["a", "b", "c", "d"]
    d, index = 3
    (4) ["a", "b", "c", "d"]
    

    for…in

    循环遍历的值都是数据结构的键值

    let obj = {a: '1', b: '2', c: '3', d: '4'}
    for (let o in obj) {
        console.log(o)    //遍历的实际上是对象的属性名称 a,b,c,d
        console.log(obj[o])  //这个才是属性对应的值1,2,3,4
    }
    

    总结一句: for in也可以循环数组但是特别适合遍历对象

    for…of

    它是ES6中新增加的语法,用来循环获取一对键值对中的值

    循环一个数组
    let arr = ['China', 'America', 'Korea']
    for (let o of arr) {
        console.log(o) //China, America, Korea
    }
    
    循环一个普通对象(报错)
    let obj = {a: '1', b: '2', c: '3', d: '4'}
    for (let o of obj) {
        console.log(o)   //Uncaught TypeError: obj[Symbol.iterator] is not a function
    }
    

    一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。例子中的obj对象没有Symbol.iterator属性 所以会报错。

    哪些数据结构部署了 Symbol.iteratoer属性了呢?

    • 数组 Array
    • Map
    • Set
    • String
    • arguments对象
    • Nodelist对象, 就是获取的dom列表集合

    如果想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of

    let obj = {a: '1', b: '2', c: '3', d: '4'}
    for (let o of Object.keys(obj)) {
        console.log(o) // a,b,c,d
    }
    

    或者使用内置的Object.values()方法获取对象的value值集合再使用for of

    let obj = {a: '1', b: '2', c: '3', d: '4'}
    for (let o of Object.values(obj)) {
        console.log(o) // 1,2,3,4
    }
    
    循环一个字符串
    let str = 'love'
    for (let o of str) {
        console.log(o) // l,o,v,e
    }
    
    循环一个Map
    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
    
    for (let [key, value] of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    
    for (let entry of iterable) {
      console.log(entry);
    }
    // [a, 1]
    // [b, 2]
    // [c, 3]
    
    循环一个Set
    let iterable = new Set([1, 1, 2, 2, 3, 3]);
    
    for (let value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    
    展开全文
  • for offor in 的区别

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

    for in

    1. 一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性,语句都会被执行。
    2. 不建议使用for in 遍历数组,因为输出的顺序是不固定的。
    3. 如果迭代的对象的变量值是null或者undefined, for in不执行循环体,建议在使用for in循环之前,先检查该对象的值是不是null或者undefined

    for of

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

    两者的区别

    遍历对象

    var s={a:1,b:2,c:3}
    var s1=Object.create(s);
    for(var prop in s1){
        console.log(prop);//a b c
        console.log(s1[prop]);//1 2 3
    }
    for(let prop of s1){
        console.log(prop);//报错如下 Uncaught TypeError: s1 is not iterable 
    }
     for(let prop of Object.keys(s1)){ // 这里的不可以获取到s1的key的
        console.log(prop);// 啥都不输出
         console.log(s1[prop]);//1 2 3
    }   
    for(let prop of Object.keys(s1)){ // 这里的不可以获取到s1的key的
        console.log(prop);// a,b,c
         console.log(s[prop]);//1 2 3
    }   
    

    遍历数组

    var a=[1,2,3]
    for(let i in a){
        console.log(i);     //0 1 2
        console.log(a[i]); //1 2 3
     }
     for(let i of a){
        console.log(i); //1 2 3
    }
    

    遍历字符串

    区别同上

    展开全文
  • for of 实现原理

    千次阅读 2019-01-13 10:45:59
    for of 是我们经常使用的一个属性,它可以非常方便的遍历数组,除此之外,它还可以用来遍历类数组对象,Set和Map等,那么问题就来了,为什么它可以遍历Map却不能遍历普通的对象呢?今天就来探索一下for of底层的秘密...

    for of 是我们经常使用的一个属性,它可以非常方便的遍历数组,除此之外,它还可以用来遍历类数组对象,Set 和 Map 等,那么问题就来了,为什么它可以遍历 Map 却不能遍历普通的对象呢?今天就来探索一下 for of 底层的秘密。

    首先,我们要知道 for of 是用来遍历可迭代对象的,那么如何判断一个对象是否是可迭代对象呢? js 引擎是通过判断对象是否具有 Symbol.iterator 来判断的,如下:

    [][Symbol.iterator] // [Function: values]
    {}[Symbol.iterator] // undefined
    

    我们看到数组具有 Symbol.iterator 属性,并返回了一个函数,而对象返回了 undefined 说明没有该属性,所以普通的对象不是可迭代对象。那么 for of 底层是否是通过Symbol.iterator 来实现遍历的呢?我们来验证一下,代码如下:

    const obj = {
      0: 'a',
      1: 'b',
      length: 2,
      [Symbol.iterator]: Array.prototype[Symbol.iterator]
    }
    
    for (const item of obj) {
      console.log(item) // a b
    }
    

    答案是肯定,这里解释下什么是迭代器,其实所谓的迭代器就是具有 next() 方法的对象,每次调用 next() 都会返回一个结果对象,该结果对象有两个属性,value 表示当前的值,done 表示遍历是否结束。知道了迭代器的特点,我们就可以模拟一个 forof 方法,代码如下:

    let arr = [5, 6, 7, 8, 9]
    
    function forof(arr, cb) {
      let iterator = arr[Symbol.iterator]()
    
      let result = iterator.next()
      while (!result.done) {
        cb(result.value)
        result = iterator.next()
      }
    }
    
    forof(arr, function (item) {
      console.log(item)
    })
    

    既然知道了 for of 的实现原理,那么我们是不是可以将普通的对象改造成可迭代对象?答案是肯定的,代码如下:

    function createIterator(obj) {
      let arr = Object.entries(obj)
      let i = 0
      return {
        next() {
          let done = i >= arr.length ? true : false
          let value = !done ? arr[i++] : undefined
          return {
            done,
            value
          }
        }
      }
    }
    
    const obj = {
      name: 'iwen',
      age: 18
    }
    
    obj[Symbol.iterator] = function () {
      return createIterator(obj)
    }
    for (const [key, value] of obj) {
      console.log(key, value)  // name iwen  age 18
    }
    

    完。

    参考:
    https://github.com/mqyqingfeng/Blog/issues/90

    展开全文
  • 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...
  • 1、测试目的:对比JS 中for、while、for in、for offor each效率 2、测试环境: Node环境和Chrome浏览器环境 3、测试方法:分别使用上述待测接口遍历数组 测试代码如下: 测试结果: Node环境结果如下 ...
  • 简述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); }
  • ES6补充篇-for of + iterator

    千次阅读 2020-10-03 01:22:13
    1、for of循环方式 在ES6提供了一种新的遍历数据结构的方式 for of 这种循环方式会作为以后遍历所有的数据结构的统一方式 for of示例如下 1、遍历数组 let arr = ['first', 'second', 'third', 'four']; for ...
  • 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-09-25 11:50:46
    参考文档 https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450082788640f82a480be8481a8ce8272951a40970000 ...for of 遍历的是value  手动给对象添加属性后, fo
  • js笔记一:js中forEach,for in,for of循环的用法

    万次阅读 多人点赞 2017-01-04 11:21:11
    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...
  • Es6 中for of 使用

    千次阅读 2018-07-04 14:34:52
    var arr = ['apple', 'banana', 'orange', 'pear'] //for in 数组,json 都可以遍历 for(var i in arr){ console.log(i) //i 代表的是数组的...//在Es6中 for of 只能遍历数组,但不能遍历json , 主要是配合 new M...
  • for of  用for of循环时,该过程可以被打断。循环出的结果不是数组的下标,而是数组中的元素。   for in 过程不能被打断,循环出的结果是数组的下标。     forEach 过程不能被打断。其他与for of类似,...
  • forin与forof的区别知多少?

    千次阅读 2018-08-14 18:41:44
    在ES6中有一对遍历数组的for循环,他们的长相差不多,但是具体使用的时候还是有点区别的。 &lt;!DOCTYPE html&gt; ...forin与forof的区别&lt;/title&gt; &lt;/head&gt; &a
  • 数组操作的区别 1、forEach:  1、不能遍历对象  2、不支持break,支持return 2、for in: 1、可以遍历数组和对象  2、会把序列转换为字符串 3、支持break跳出循环,不支持return 3、for of:  ...
  • 我写了个小DEMO熟悉for of循环遍历DOM,却发现一些问题并不知道怎么解决。代码如下面。 js代码如下: var DOM1 = document.getElementsByTagName("li"); console.log(DOM1); for (let d of DOM1) { console....
  • 2.for of用来枚举对象的值 3.foreach() 对数组中的每一项运行指定函数,这个方法没有返回值 ​​​​​​​array.forEach(function(item,index,array){ //执行操作 }) 4.$.each...
  • javascript中for offor in的区别

    千次阅读 2018-09-04 17:48:38
    推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...offor...in循环出的是key,for...of循环出的是value 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足 ...
  • js中for in与for of之间的差异

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

    千次阅读 2015-08-15 13:34:28
    使用 Symbol.iterator for of s6 学习笔记
  • for:遍历数组 //对象数组 var arr = [ {Monday: '星期一', Monday: '星期二', Wednesday: '星期三'} ] for (var i=0; i&amp;amp;lt;arr.length;i++){ // i是下标(索引) console.log(i) console.log(arr...
  • js中的for in 和 for of 的区别

    千次阅读 2019-04-09 21:01:29
    for...in和for...of的区别 [ ]for...in是ES5的标准,该方法遍历的是对象的属性名称(key:键名)。一个Array对象也是一个对象,数组中的每个元素的索引被视为属性名称,所以在使用for...in遍历Array时,拿到的是每个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,021,305
精华内容 808,522
关键字:

forof