前端各种遍历总结（map, filter, some, every, forEach, for...in, for...of ）

最近写项目遇到各种循环遍历问题下面进行一下简单的总结
参考文献：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

1.map

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。
下面是map()的基本用法：

var map = new Map();//声明
map.set("name","张三");//赋值
map.get("name");//取值 结果：张三
map.has("name");//判断元素是否存在 结果：true
map.delete("name");//删除元素  结果：true

下面示例介绍map()如何遍历数组

const array = [1, 3, 9, 17];
const newArray=array.map(item=>{
if(item == 3){
  return item*2
}
});
console.log(newArray);//打印结果为[undefined, 6, undefined, undefined]

$\color{red}{注意：}$ map()方法创建了一个新数组，但新数组并不是在遍历完array后才被赋值的，而是每遍历一次就得到一个值。所以，下面这样修改后就正确了：

const array = [1, 3, 9, 17];
const newArray=array.map(item=>{
if(item == 3){
  return item*2
}
return item
});
console.log(newArray);//打印结果为[1, 6, 9, 17]

$\color{red}{这里注意箭头函数有两种格式：}$
1.只包含一个表达式，这时花括号和return都省略了。
2.包含多条语句，这时花括号和return都不能省略。

2.filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
示例1：过滤符合条件的元素

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result); // 打印结果：["exuberant", "destruction", "present"]

示例2：过滤空字符串、undefined、null；

const  array = [null,'',undefined,4,[]];

const newArray = array.filter(item => item);

console.log(newArray);//[4, Array(0)]  空字符串里面不能包含空格

3.some

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even));//true

$\color{red}{注意：}$
1.只要有一个条件满足其结果即为true；
2.如果用一个空数组进行测试，在任何情况下它返回的都是false；
3.some一直在找符合条件的值，一旦找到，则遍历停止。

4.every

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));//true

$\color{red}{注意：}$
1.只要有一个条件不满足其结果即为false；
2.如果用一个空数组进行测试，在任何情况下它返回的都是true；
3.every从遍历开始，一旦有一个不符合条件，则不会继续遍历下去。

5.forEach

forEach() 方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));// 'a','b','c'

6.for...in

for...in 语句用于对数组或者对象的属性进行循环操作。
for...in文档

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

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

$\color{red}{注意：}$ for...in可以遍历对象

7.for...of

for...of文档

for...of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、Generator对象，以及字符串。

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

最后编辑于：2020.05.27 23:48:24