前端面试——javascript 数组和对象的遍历forEach、for in、for of、map之间的区别

对象和数组的区别

1、数组表示有序数据的集合，而对象表示无序数据的集合。数组的数据没有”名称”，但是有对应的索引；对象的数据有”名称”（属性名），而对象因为是无序数据的集合，所以不存在索引。
3、调用方法不同。
4、对象键值唯一，数组可以重复。
5、对象没有长度，不能用for循环。

for 循环

 var  arr = ['apple','peach','banana'];
        for(var i = 0;i< arr.length;i++){
            console.log(arr[i]) 
        }
       
for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      continue;
    }
    console.log(i); // 分别输出  1，2，4，5
  }
  
for (var i = 1; i <= 5; i++) {
    if (i === 4) {
      break;
    }
    console.log(i); // 分别输出  1，2, 3
  }
  
//使用return会终止函数的运行，直接返回return的值
 function testDemo(){
    for (let i = 0; i < 100; i++) {
      let line = "第" + i + "行";
      for (let j = 0; j < 10; j++) {
        line += j;
        if (i + j === 50) {
          return
        }
      }
      console.log(line)
    }
}
testDemo();  
  

1.for 循环可以与break、continue 和 return 配合使用，跳出循环
2.forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效。

for…in

for…in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）,其所遍历的为对象的属性名（键），而非属性值。

用于遍历对象obj的键名key，或数组arr的index（不推荐用于数组）
会遍历原型链上的属性，忽略 可枚举性 enumerable为false的属性。
缺点1：数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
缺点2：for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，包括原型链上的键。
缺点3：某些情况下，for…in循环会以任意顺序遍历键名

//字符串
var str="Hello"
for (let i in str){
    console.log(i)
}
// 0 1 2 3 4

//数组
var arr=["a","b","c"]
for (let i in arr){
    console.log(i)
}
// 0 1 2

//普通对象
var obj={a:1,b:2,c:3}
for (let i in obj){
    console.log(i)
}
// a b c

for…of

for…of (数组、set、map）
用于遍历数组或类数组的键值
只会遍历自身的属性
不同于forEach方法，它可以与break、continue和return配合使用

var myArray=[1,2,4,5,6,7,8]
for (var index of myArray) {
  console.log(index);
}
/*
	输出结果顺序唯一。输出的结果如下：
	1
	2
	4
	5
	6
	7
	8
*/

forEach

forEach() 方法不会返回执行结果，而是undefined，配合return使用；
forEach()会修改原来的数组。
回调3个参数value，index，arr（原数组）
回调函数内可以操作，改变原来数组
无法中途跳出forEach循环，break命令或return命令都不能奏效。

      let arr = [10, 20, 30];
      arr.forEach((index, item) => {
        console.log(item, "item"); //10,20,30
      });

for 、for of 不会跳过空元素，会把空元素输出一个为underfined
for in、forEach会直接跳过空元素

map

map() 不会对空数组进行检测。
1：map() 不会改变原始数组
2：函数的作用是对数组中的每一个元素进行处理，返回新的元素。

语法
map是数组的方法，有一个参数，参数是一个函数，函数中有3个参数
参数1：item必须。当前元素的值
参数2：index，可选。当前元素在数组中的索引值
参数3：arr可选。当前元素属于的数组对象

 var array1 = [1, 4, 9, 16];
  const map2 = array1.map(x => x * 3);
  console.log(map2);

every 和 some 和 filter

const a = [1, 2, 3]
a.some(v => v < 2) //true
a.every(v => v < 2) //false

let arr = [1, 3, 5, 8]
let arrFilter = arr.filter(ele => ele > 4)
console.log(arrFilter) // [5, 8]

some() 有一个元素满足条件，即返回true
every() 所有元素满足条件，即返回true
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

every、some、filter 注意:
1.不会对空数组进行检测；
2.不会改变原始数组；

遍历对象Object

Object.keys()、Object.values()、Object.entries()

Object.keys()：返回包含对象键名的数组
Object.values()：返回包含对象键值的数组
Object.entries()：返回包含对象键名和键值的数组

let obj = { id: 1, name: "xh", age: 18 };
console.log(Object.keys(obj)); //['id','name','age']
console.log(Object.values(obj)); //[1,'xh',18]
console.log(Object.entries(obj)); //[['id',1],['name','xh'],['age',18]]

reduce 高阶函数

对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。

prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
cur 必需。表示当前正在处理的数组元素；
index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
arr 可选。表示原数组；
init 可选。表示初始值

const arr = [1,2,3,4,5];
const sum = arr.reduce((prev,cur,index,arr) => {
    console.log(prev,cur,index);
    return prev + cur;
},5); 
console.log('arr:',arr,'sum:',sum);

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
var countedNames = names.reduce(function (allNames, name) {
  console.log(allNames,name);
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames);

参考其他博主：https://blog.csdn.net/qq_38970408/article/details/121018660