for of , for in 和 forEach,map 的区别

[TieMuZhen]

for of , for in 和 forEach,map 的区别

• for...of循环：具有iterator接口，就可以用for...of循环遍历它的成员(属性值)。
  哪些数据结构部署了Symbol.iterator属性：
  • 数组Array
  • 字符串String
  • arguments对象
  • Set
  • Map
  • Nodelist对象，类数组

凡是部署了iterator接口的数据结构都可以使用数组的扩展运算符(...)和解构赋值等操作。

for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。可以中断循环。

• for...in循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环。
• forEach: 只能遍历数组，不能中断，没有返回值(或认为返回值是undefined)。
• map: 只能遍历数组，不能中断，返回值是修改后的数组。

一、forEach()和map()

定义

forEach()方法: 针对每一个元素执行提供的函数。
map()方法: 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。

区别

forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原数组。而map()方法会得到一个新的数组并返回，不修改原数组。

例子

let arr =[1,2,3,4,5,6]

forEach

arr.forEach((value, key) => {
 return arr[key] = value * value;
});

执行结果如下：

map()

let list = arr.map(value => {
 return value * value;
});

执行结果如下：

执行速度对比

map()的执行速度 > forEach()的执行速度

如何使用

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(map(), filter(), reduce()等组合使用)来玩出更多的花样。

// 我们首先使用map将每一个元素乘以它们自身，然后紧接着筛选出那些大于10的元素。最终结果赋值给arr2。
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

二、for...in和for...of

var obj = {name: 'saucxs',age: 21,sex: 1};
for(key in obj){
    console.log(key, obj[key]);
    // name saucxs
    // age 21
    // sex 1
}
for(key of obj){
    console.log(key, obj[key]);
    // typeError :obj is not iterable报错
}

说明obj对象没有iterable属性报错，使用不了for of。

我们现在再看一个数组遍历的例子

var array = ['a','b','c'];
for(var key in array){
    console.log(key, array[key]);
    // 0 a
    // 1 b
    // 2 c
}
for(var key of array){
    console.log(key, array[key]);
    // a undefined
    // b undefined
    // c undefined
}

这回没有报错，为什么呢？

我们再看一个例子：

var array = ['a', 'b', 'c'];
array.name = 'saucxs'
for(key in array){
    console.log(key, array[key])
    // 0 a
    // 1 b
    // 2 c
    // name saucxs
}

如果我非常想让对象用for of？

可以使用Object.keys()获取对象的key值集合，再用for of，这样也可以给一个对象部署Symbol.iterator属性。

var obj = {name: 'saucxs',age: 18, sex: 1};
for(var key of Object.keys(obj)){
    console.log(key, obj[key]);
    // name saucxs
    // age 21
    // sex 1
}

模拟一个 for...of 方法

function for_of(data, fn){
    let iterator = data[Symbol.iterator]();
    let res = iterator.next();
    while(!res.done){
        fn(res.value);
        res = iterator.next();
    }
}

测试

let arr = [3, 4, 5]
for_of(arr, function(item) {
    console.log(item);
})