js中遍历方法的比较和使用场景

89 阅读3分钟

基本语句

1.for

既可以用来循环数组也可以用来循环类数组的数据结构,同时也可以通过break或者return来退出循环。

2.for...in...

用法:

  • 该语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。为遍历对象属性而构建的,不建议与数组一起使用,而且它的效率较低。
  • 你在处理有key-value数据(比如属性用作“键”),需要检查其中的任何键是否为某值的情况时,还是推荐用for ... in

语法: for(varible in object) {statement}

variable 每次迭代的时候,会被赋值为不同的属性名

object:非Symbol类型的可枚举属性被迭代的对象

例1:

    var obj = { a: 1, b: 2, c: 3 };

    for(var prop in obj){
        console.log("obj"+obj[prop]);
    }

3. for...of..

用法:在可迭代对象(Array,Set,Map,String)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句 for(variable of iterable){ statement }

variable: 每一个迭代中,将不同属性的值分配给变量

iterable:被迭代枚举属性的对象

例2:

let iterable = "boo";
for(let value of iterable){
    console.log(value);
}

例3:

let iterable = new Map([
    ["a",1],
    ["b",2],
    ["c",3],
]);

for(let entry of iterable){
    console.log(entry);
}

for(let [key, value] of iterable){
    console.log([key,value]);
}

遍历方法

1.forEach()

用法:

可以用在Array,Set,Map,NodeList等,为数组的每个元素执行一次给定的函数 作为一个迭代方法,按照索引升序的方式为元素调用一次回调函数,总是返回undefine,常用在链式调用的末尾执行某些操作。:除非抛出异常,否则没有办法停止或者终端foreach()循环

语法:

forEach(callbackFn)

forEach(callbackFn, thisArg)

callbackFn: 为数组中每个元素执行的函数,并丢弃返回值,传入(element,index,array),只为对以复制的元素调用,传递给回调函数为访问该元素时的值。 thisArg(可选):执行回调函数用作this的值

例四:

const rating = [5,4,5];
let sum = 0;
const sumFunction = async(a,b)=>a+b;
ratings.forEach(async(rating)=>{
    sum = awite sumFunction(sum, rating); //this指向rating这个数组
})

2.map()

用法:

创建一个新数组,这个新数组由原数组中的每一个元素都调用一次提供的函数的返回值

语法:

map(callbackFn) map(callbackFn, thisArg)

参数使用与forEach相同,但返回值为一个新数组,每个元素都是回调函数的返回值。

例五:

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

forEach()和Map()区别:

  • 返回值的区别:前者不会返回有意义的值的,
  • 前者不会分配新的存储空间,map()会分配内存空间
  • 执行速度:forEach()的执行速度比map()的速度慢
  • 使用场景:前者适合不打算改变数据,只想利用数据做一些事情,后者适用于要改变数据值的时候,返回一个新的数组能够和别的方法(filter(), map(), reduce())一起组合使用。