三种遍历JS map数组，forEach和filter示例的方法

前言

最近，由于项目原因，通常会在前端对数组进行遍历和处理. JS附带有许多遍历方法. 通常，如果您不注意，可能会导致知识混乱，但仍然有一些. 坑. 前端时间总结了ediary原生js中数组遍历的常用方法，这些方法是: map，forEach，filter，在解释知识点的同时，将比较熟人的功能，这将有助于考虑其优缺点. 该方法的缺点.

首先，Js随附的map（）方法

1. 方法概述

map（）方法返回一个新数组，该数组由调用指定方法后的原始数组中每个元素的返回值组成

2. 格式说明

var newArray = [1,2,3].map(fucntion(e,i,arr){return parseInt(e,10)})

3. 使用说明

3.1支持返回值；

3.2返回值是什么，等同于更改数组中的此项（不影响原始数组，但等效于克隆原始数组，更改克隆的数组中的对应项，直到上一次）

3.3 map只能处理元素以产生新的数组对象. 它不能用于过滤（用于过滤的过滤器），为什么不这样做，请参阅示例以了解:

4. 例子

4.1在字符串中使用

在字符串上使用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. 与地图相关

6.1地图对象

es6提供了一个对象映射，查看此映射创建的对象是什么

这是一个对象，大小是其属性，并且内部的值封装在[[Entries]]数组中

myMap.set(1, a); // 相当于java的map.put();
myMap.set(2, b);
myMap.set(3, c);
myMap.size();
myMap.get(1);
myMap.get(2);
myMap.get(3);

Js的第二种forEach（）方法

1. 方法概述

forEach（）方法返回一个新数组，该数组由调用指定方法后的原始数组中每个元素的返回值组成

2. 格式说明

forEach方法中的函数回调具有三个参数，

[].forEach(function(value, index, array))

3. 使用说明

3.1此方法没有返回值，它仅遍历数组中的每个项目而无需修改原始数组

但是您可以自己通过数组索引修改原始数组

3.2 forEach（）无法遍历对象，可以用于in

4. 缺点

4.1您不能使用break语句来中断循环，也不能使用return语句返回到外部函数

4.2 ES5推出，实际性能不如

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 $ .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);
})

三个，Js自己的filter（）方法

1. 方法概述

filter（）方法用于过滤原始数组并生成一个新的数组对象

2. 注意事项

2.1 filter（）不会检测到空数组（如果对空数组进行了过滤js遍历字符串数组，则返回值是不确定的）

2.2 filter（）不会更改原始数组

2.3返回包含所有符合条件的元素的数组. 如果没有符合条件的元素js遍历字符串数组，则返回一个空数组

3. 格式说明

forEach方法中的函数回调具有三个参数，

[].filter(function(value, index, array)， thisValue)

4. 例子

4.1在数组中，删除偶数并仅保留奇数

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删除数组中的空字符串

var arr = [A, , B, null, undefined, C,  ];
var r = arr.filter(function(e) {
  return s && s.trim(); // 注意：IE9一下的版本没有trim()方法
});
r; // [A, B, C]

4.3巧妙地删除数组的重复元素

var r, arr = [A, B, C, D, B, A]
r = arr.filter(function(e, i, self) {
  return self.indexOf === 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;
  })
}

如果感觉良好，请喜欢和支持. 欢迎留言或进入我的个人小组855801563接收[建筑信息主题集合90期]，[BATJTMD JAVA面试问题1000+]，该小组致力于学习通信技术并分享面试，拒绝广告的机会，我还将不时在小组中回答和讨论问题

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-192538-1.html