for in 和 for of 的区别

1、for...in 循环：只能获得对象的键名，不能获得键值

      for...of 循环：允许遍历获得键值

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var arr = ['red', 'green', 'blue'] for(let item in arr) {   console.log('for in item', item) } /*   for in item 0   for in item 1   for in item 2 */ for(let item of arr) {   console.log('for of item', item) } /*   for of item red   for of item green   for of item blue */

2、对于普通对象，没有部署原生的 iterator 接口，直接使用 for...of 会报错

1 2 3 4 5 6 7 8 9

var obj = {    'name': 'Jim Green',    'age': 12  }  for(let key of obj) {    console.log('for of obj', key)  }  // Uncaught TypeError: obj is not iterable

可以使用 for...in 循环遍历键名

1 2 3 4 5 6 7

for(let key in obj) {    console.log('for in key', key)  }  /*    for in key name    for in key age  */

也可以使用 Object.keys(obj) 方法将对象的键名生成一个数组，然后遍历这个数组

1 2 3 4 5 6 7

for(let key of Object.keys(obj)) {    console.log('key', key)  }  /*    key name    key age  */

3、for...in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。for...of 则不会这样

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

let arr = [1, 2, 3] arr.set = 'world'  // 手动添加的键 Array.prototype.name = 'hello'  // 原型链上的键 for(let item in arr) {   console.log('item', item) } /*   item 0   item 1   item 2   item set   item name */ for(let value of arr) {   console.log('value', value) } /*   value 1   value 2   value 3 */

4、forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效

1 2 3 4 5 6 7 8 9 10 11 12 13

let arr = [1, 2, 3, 5, 9] arr.forEach(item => {   if(item % 2 === 0) {     return   }   console.log('item', item) }) /*   item 1   item 3   item 5   item 9 */

for...of 循环可以与break、continue 和 return 配合使用，跳出循环

1 2 3 4 5 6 7

for(let item of arr) {    if(item % 2 === 0) {      break    }    console.log('item', item)  }  // item 1

5、无论是 for...in 还是 for...of 都不能遍历出 Symbol 类型的值，遍历 Symbol 类型的值需要用 Object.getOwnPropertySymbols() 方法

{
  let a = Symbol('a')
  let b = Symbol('b')

  let obj = {
    [a]: 'hello',
    [b]: 'world',
    c: 'es6',
    d: 'dom'
  }

  for(let key in obj) {
    console.info(key + ' --> ' + obj[key])
  }

  /*
    c --> es6
    d --> dom
  */

  let objSymbols = Object.getOwnPropertySymbols(obj)
  console.info(objSymbols)    //  [Symbol(a), Symbol(b)]
  objSymbols.forEach(item => {
    console.info(item.toString() + ' --> ' + obj[item])
  })

  /*
    Symbol(a) --> hello
    Symbol(b) --> world
  */

  // Reflect.ownKeys 方法可以返回所有类型的键名，包括常规键名和Symbol键名
  let keyArray = Reflect.ownKeys(obj)
  console.log(keyArray)      //  ["c", "d", Symbol(a), Symbol(b)]
}

总之，for...in 循环主要是为了遍历对象而生，不适用于遍历数组

for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象

js遍历数组的几种方法 

第一种：for循环，也是最常见的

const arr = [11,22,33,44,55,66,77,88]

for (let i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }

第二种：forEach（）

 1)、forEach（）遍历普通数组

arr.forEach( function(item){
            console.log(item)
        } )

 2）、forEach（）遍历对象类型数组

const arr = [
            {id:1,name:'zhangsan'},
            {id:2,name:'lisi'},
            {id:3,name:'wangwu'}
        ]

arr.forEach( function(item){
            console.log(item.id + '---' +  item.name)
        })

输出结果：

第三种： map（）方法

map即是 “映射”的意思 ，原数组被“映射”成对应新数组

var newArr = arr.map( function(value,index){
    console.log(value + '---' + index)
    return value + 10
})

console.log(newArr)

输出结果：

注意：forEach（）和map（）区别：

1、forEach：用来遍历数组中的每一项，这个方法执行没有返回值，不影响原数组

2、map：支持return，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组

第四种： for....in   方法

for....in 是es5标准， 此方法遍历数组效率低，主要是用来循环遍历对象的属性

1)、 for......in  遍历数组

for(let item in arr){
            console.log(arr[item])
        }

2)、for.....in 遍历对象

循环遍历对象的属性，js中动态获取key，得到某对象中相对应的value = obj[key]

const obj = {
            a:1,
            b:2,
            c:3
        }

for(let key in obj){
            console.log(key + '---' + obj[key] )
        }

输出结果：

第五种： for.......of    方法    （es6支持）

for(let item of arr){
            console.log(item)
        }