JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

时间:2023-03-05 11:16:32

JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach。

JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

  7、for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组,但是不推荐这样使用,

   for–in是用来循环带有字符串key的对象的方法)。

   缺点:只能获得对象的键名,不能直接获取键值。

   var obj = {a:1, b:2, c:3};
   for (var prop in obj) {
    console.log("obj." + prop + " = " + obj[prop]);
   }
   // print: "obj.a = 1" "obj.b = 2" "obj.c = 3"

  8、for of (在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。

   for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)

   等可迭代的数据结构等(不包括对象))。

   // 字符串
   let str = "hello";
   for (let s of str) {
    console.log(s); // h e l l o
   }

   // 遍历数组
   let list = [1, 2, 3, 4, 5];
   for (let e of list) {
    console.log(e);
   }
   // print: 1 2 3 4 5

   // 遍历对象
   obj = {a:1, b:2, c:3};
   for (let key of Object.keys(obj)) {
    console.log(key, obj[key]);
   }
   // print: a 1 b 2 c 3
   说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。

   一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。

   // entries (entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。语法:array.entries())

   IE11 及其更早的浏览器版本不支持 entries 方法

   let arr = ['a', 'b', 'c'];
   for (let pair of arr.entries()) {
    console.log(pair);
   }
   // [0, 'a']
   // [1, 'b']
   // [2, 'c']

补充:对forEach, map 的补充。它俩都可以传三个参数 value数组中的当前项,index当前项的索引,array原始数组。

1. forEach 在对 item 进行修改的时候,如果 item 是原始类型的值,item 对应的 的内存地址实际并没有变化,进行操作的只是值。

如果 item 是 引用类型的值,item 对应多的内存地址也没有变化,但是内存地址对应的值,已经重写了。

JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

2. map方法体现的是数据不可变的思想。该思想认为所有的数据都是不能改变的,只能通过生成新的数据来达到修改的目的,因此直接对数组元素对象属性进行操作的行为都是不可取的。这种思想其实有很多好处,最直接的就是避免了数据的隐式修改。

JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

以下代码为IE6-8 forEach,map的兼容写法:

 Array.prototype.myForEach = function myForEach(callback,context){
context = context || window;
if('forEach' in Array.prototype){
this.forEach(callback,context);
return;
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = ,len = this.length; i < len;i++) {
callback && callback.call(context,this[i],i,this);
}
}
Array.prototype.myMap = function myMap(callback,context){
context = context || window;
if('map' in Array.prototype){
return this.map(callback,context);
}
//IE6-8下自己编写回调函数执行的逻辑
var newArr = [];
for(var i = ,len = this.length; i < len;i++) {
newArr.push(callback.call(context,this[i],i,this));
}
return newArr
} var eachArr1 = [,,,,];
eachArr1.myForEach(function(item,index,arr){
arr[index] = item *
})
var eachArr2 = eachArr1.myMap(function(item,index){
return item * ;
})
console.log(eachArr1) console.log(eachArr2)

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

参考:https://www.cnblogs.com/shuiyi/p/5058524.html