- // 遍历数组
- var arr = [1, 2, 3]
- let newArr = arr.map((item) => item * 2)
- console.log(newArr);//[2,4,6]
二、多个 for 之间区别
( V) M& w: L& t) \1、使用场景差异( o6 X8 b: S- F0 k' V. S
for循环是最早最原始的循环遍历语句,for 内部定义一个变量,按照条件进行循环遍历,通常是数组的长度,当超过长度时就停止循环,一般遍历的都是数组或类数组。 遍历对象时,由于对象没有长度,所以使用 Object.keys() 获取对象的所有属性,以数组形式返回。
) M7 {! `7 q I
for / in主要是用来遍历对象上的可枚举属性,包括原型对象上的属性,按任意顺序进行遍历,遍历对象时获取到的是属性的键值,遍历的是数组,数组的下标当做键值。
; \8 g2 c' w8 m8 M for / of用于遍历可迭代对象的数据,包括 Array、Map、Set、String、TypedArray、arguments 对象等等。
2 W9 I# Z# n( r- H for await...of用于遍历异步可迭代对象,该语句只能在一个async function 内部使用。
* {- h4 [$ q3 N2 n4 I$ T# R9 f
forEach 是 for 的加升级版,使用更简单,携带参数更多,但本质还是数组的循环,每个元素都执行一次回调,不会改变原数组。
5 L# k# r# w) T/ H; a map是给原数组每个元素都执行一次回调,返回一个新数组,不会改变原数组。
% A; ~* j& V- R$ K: ^
2、功能差异- H: m/ `" Y. X6 i& M& n
forEach、map 不支持跳出循环,其他不支持。
( m- H1 k* e+ `( c
for await ... of 能够支持异步操作,其他的不支持。
% I6 _" _" Z8 I; y7 K: }, {7 _% ~; K6 P 对于纯对象的遍历, for ... in 枚举更方便。
- L) i0 p- v7 J+ w1 X
对于数组遍历,如果不需要索引,可以直接使用 for...of 获取值,还可支持 break 或 return ;如果还需要索引,使用 forEach 更适合,但不支持 return。
1 T2 Y5 {3 |# i6 C6 }
如果是一个数组映射成另一个数组,使用 map 最合适。
, B7 p& z. N8 p" v+ ^. ^3、性能差异
8 g* A7 m5 R& q2 T+ b& h 在测试环境、测试数据条件一致的情况下,性能排序为:for > for of > forEach > map > for in。
% X! |4 K: @# X/ D2 f1 A7 E/ J for 因为没有额外的函数调用和上下文,所以性能是最快的。
5 d$ |/ a) h8 ]( T% \. u" \
for ... of 具有 iterator 接口的数据结构,可以使用它来迭代成员,直接读取键值。
7 t5 u7 R3 g1 d8 I! _ forEach 是 for 的语法糖,还有许多的参数和上下文,因此会慢一些。
* `7 S- Q% K3 j
map 因为它返回的是一个等长的全新数组,数组创建和赋值产生的性能开销较大。
2 b/ d# q. H" d6 i for...in 性能最差,因为需要列举对象的所有属性,有转化过程,开销比较大。
; K5 d8 ^4 f% n: M; h+ t0 E三、for 的使用
) r# t+ O9 L2 { 在项目开发中,我们应该根据实际需求,去选择一个合适的 for 遍历。以下是一些使用建议:
, k+ S9 Y6 ~, g# a+ |; Y- 如果需要把数据映射成另外一个数组,如变成对应布尔值,推荐使用 map ,不会修改原数组,使用语法简单。
- 数组遍历时,可以使用 for 、forEach 或 for...of。
- 遍历的是纯对象时,推荐使用 for ... in 。
- 如果是需要对迭代器遍历,推荐使用 for ... of。
- 如果是在数组中筛选符合条件的数组,使用 fillter 。
8 V! x& Z6 d% ]* S1 T4 K+ m# I: q