forEach, for in, for of 区别

forEach介绍

==forEach方法没办法使用 break 语句跳出循环,或者使用return从函数体内返回==

let data = [1, 2, 3, 7, 53, 9]
data.forEach((item, i) => {
    console.log(item)
    if(item == 2) return
})

// 每个item都打印出来

for-in介绍

以下代码会出现的问题:

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

==for-in循环设计之初,是给普通以字符串的值为key的对象使用的。而非数组。==

let data = [1, 2, 3, 7, 53, 9]
for(var index in data){
    typeof index   //string
    // index为数组循环的值
    // 0,1,2,3,4,5
}

for-of介绍

  1. 可以避免所有 for-in 循环的陷阱
  2. 不同于 forEach(),可以使用 break, continue 和 return
  3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
  4. 它也支持字符串的遍历
  5. for-of 并不适用于处理原有的原生对象
let data = [1, 2, 3, 7, 53, 9]
for(var index of data){
    typeof index   //number
    // index为数组循环的每一个值
    // 1,2,4,7,53,9
}

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

for-of 遍历 Set

set类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。
let data = [1,2,3,4,2,1,4,5]
let setData = new Set(data)
// setData = [3,5]
var uniqueWords = new Set(words);

for (var word of uniqueWords) {
  console.log(word);
}
//  可以遍历set数据

for-of 遍历 Map

javaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
let o = {name: '七分'}
let m = {name: '三分'}
let bookMap = new Map()
bookMap.set(o, 'seven value')
bookMap.set(m, 'three value')
for (var [key, value] of bookMap) {
  console.log(key + "'phone value is: " + value);
}
// key {name: '七分'}, {name: '三分'}

for-of 遍历原生对象

let params =[ 
    {
        name: '李',
        value: '18'
    },
    {
        name: '张',
        value: '21'
    }
]
for (var key of Object.keys(params)) {
  console.log(key + ": " + params[key]);
  // key 0,1
  // params[key] {name: '李',value: '18'},{name: '张',value: '21'}
 }

http://es6.ruanyifeng.com/#docs/iterator#for---of-%E5%BE%AA%E7%8E%AF

你可能感兴趣的:(forEach, for in, for of 区别)