JS遍历数组的三种⽅法：map、forEach、filter
前端对数组进⾏遍历、处理，JS⾃带的遍历⽅法有很多种，往往不加留意，就可能导致知识混乱的现象。js原⽣⾃带的常⽤的对数组遍历处理的⽅法，分别为：map、forEach、filter。
<1>、Js⾃带的map()⽅法
1.⽅法概述
  map（）⽅法返回⼀个由原数组中的每个元素调⽤⼀个指定⽅法后的返回值组成的新数组
var newArray =["1","2","3"].map(function(e,i,arr){return parseInt(e,10)})
map中回调函数中的e参数为：当前正在遍历的元素
  map中回调函数中的i参数为：当前元素索引
  map中回调函数中的arr参数为：原数组本⾝
3.使⽤说明
  3.1 ⽀持return返回值；
  3.2 return是啥，相当于把数组中的这⼀项变为啥（并不影响原来的数组，只是相当于把原数组克隆⼀份，把克隆的这⼀份数组中的对应项改变了）
  3.3 map只能对元素进⾏加⼯处理，产⽣⼀个新的数组对象。⽽不能⽤它来进⾏筛选（筛选⽤filter），为什么不能，看个例⼦就知道了：
4.例⼦
  4.1 在字符串中使⽤
    在⼀个String上使⽤map⽅法获取字符串中每个字符所对应的ASCII码组成的数组
var map = Array.prototype.map
var a = map.call("Hello World",function(e){return e.charCodeAt(0);})
// a的值为[72,101,108,108,111,32,87,111,114,108,100]
5.易犯错的点
  5.1 很多时候，map给回调函数传的是⼀个值，但是也有可能传2个、3个值，例如下⾯的例⼦
var map = Array.prototype.map
var a = map.call("Hello World",function(e){return e.charCodeAt(0);})
// a的值为[72,101,108,108,111,32,87,111,114,108,100]
为什么会这样，因为parseInt就是⼀个函数，它就是作为map的⼀个回调函数，parseInt接收两个参数，⼀个是String，⼀个是进制
上⾯的函数就可以化为：
["1","2","3"].map(parseInt(string, radix));
即
["1","2","3"].map(function(string, radix){return parseInt(string, radix)})
// 所以才返回结果为：[1, NaN, NaN]
6.与map相关
  6.1 Map对象js数组方法总结
  es6提供⼀个对象Map，看看这个Map建的对象到底是啥东西
它是⼀个对象，size是它的属性，⾥⾯的值封装在[[Entries]]这个数组⾥⾯
myMap.set(1,"a");// 相当于java的map.put();
myMap.set(2,"b");
myMap.set(3,"c");
myMap.size();
<(1);
<(2);
<(3);
<2>、Js⾃带的forEach()⽅法
1.⽅法概述
  forEach（）⽅法返回⼀个由原数组中的每个元素调⽤⼀个指定⽅法后的返回值组成的新数组
2.格式说明
  forEach⽅法中的function回调有三个参数，
  第⼀个参数为：当前正在遍历的元素
  第⼆个参数为：当前元素索引
  第三个参数为：原数组本⾝
[].forEach(function(value, index, array))
3.使⽤说明
  3.1 这个⽅法没有返回值，仅仅是遍历数组中的每⼀项，不对原来数组进⾏修改
  但是可以⾃⼰通过数组索引来修改原来的数组
  3.2 forEach()不能遍历对象，可以使⽤for in
4.缺点
  4.1 您不能使⽤break语句中断循环，也不能使⽤return语句返回到外层函数
  4.2 ES5推出的，实际性能⽐for还弱
5.例⼦
  5.1 通过数组索引改变原数组
var obj =[1,2,3,4,5,6]
var res = obj.forEach(function(item, index, arr){
  arr[index]= item *10;
})
console.log(res);// --> undefined
console.log(obj);// --> [10,20,30,40,50,60]
5.2 如果数组在迭代的时候被修改，则当前元素与前⾯的元素会跳过。因为forEach()不会在迭代之前创建数组的副本
var words =['1','2','3','4'];
words.forEach(function(word){
  console.log(word);
  if(word ==='2'){
    words.shift();
  }
});
// 1
// 2
// 4
6.与forEach相关
  6.1 $.each 与 for in
    可遍历数组，可遍历对象
      // 6.1.1遍历数组
var arr =[1，2，3，4，5]
var res = $.each(arr,function(index, value){
  console.log(index, value);
})
console.log(res);// 返回值，被遍历的函数
// 6.1.2遍历对象
var obj ={name:"psg", age:22, gender:"male"};
/
/ for in 遍历
for(var key in obj){
  console.log(key, obj[key]);
}
// $.each 遍历
$.each(obj,function(key, value){
  console.log(key, value);
})
<3>、Js⾃带的filter()⽅法
1.⽅法概述
  filter（）⽅法是对原数组进⾏过滤筛选，产⽣⼀个新的数组对象
2.注意事项
  2.1 filter()不会对空数组进⾏检测（如果对空数组进⾏筛选，返回值位undefined）  2.2 filter()不会改变原始数组
  2.3 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组
3.格式说明
filter⽅法中的function回调有三个参数，
    第⼀个参数为：当前正在遍历的元素
    第⼆个参数为：当前元素索引
    第三个参数为：原数组本⾝
[].filter(function(value, index, array)， thisValue)
4.例⼦
　4.1 在⼀个Array中，删除偶数，只保留奇数
var arr =[1,2,3,4,5,6,9,10,15];
var r = arr.filter(function(x){
  return x %2!==0;
});
r;// [1，3，5，9，15]
4.2 把⼀个Array中的空字符串删掉
var arr =['A','','B',null, undefined,'C',' '];
var r = arr.filter(function(e){
  return s && s.trim();// 注意：IE9⼀下的版本没有trim()⽅法
});
// ['A', 'B', 'C']
4.3 巧妙去除Array的重复元素
var r, arr =['A','B','C','D','B','A']
r = arr.filter(function(e, i, self){
  return self.indexOf(e)=== i;
})
console.log(r);// --> ['A', 'B', 'C', 'D']
4.4 筛选素数
function get_primes(arr){
  var i;
  return arr.filter(function(element){
    var flag =true;
    if(element <2){
      flag =false;
    }else{
      for(var i =2; i < element; i++){        if(element % i ==0){
          flag =false;
          break;
        }
      }
    }
    return flag;
  })
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。