如果你看完了你会体会到一个人能有多无聊，这东西都能看完！！？？

大概js有以下几种循环遍历的方法：

1 let arr = ['aaa','bbb','ccc']

2 let obj = {a:'aaa',b:'bbb',c:'ccc'}

3 let deepObj = {a:'aaa', b:{c:'ccc'}}

4

5 // foriFn(arr);// 经典for循环

6 // index :>> 0

7 // item :>> aaa

8 // index :>> 1

9 // item :>> bbb

10 // index :>> 2

11 // item :>> ccc

12

13 // foriFnPlus(arr);// 经典for循环稍微优化一下子

14 // index :>> 0

15 // item :>> aaa

16 // index :>> 1

17 // item :>> bbb

18 // index :>> 2

19 // item :>> ccc

20

21 // forEachFn(arr);// forEach遍历数组 return不会终止循环，return相当于for循环里的continue

22 // index :>> 0

23 // item :>> aaa

24 // index :>> 1

25 // item :>> bbb

26 // index :>> 2

27 // item :>> ccc

28

29 // forinFn(arr)// forin循环 循环时候得到的key时字符串类型的

30 // index :>> 0

31 // typeof index :>> string

32 // item :>> aaa

33 // index :>> 1

34 // typeof index :>> string

35 // item :>> bbb

36 // index :>> 2

37 // typeof index :>> string

38 // item :>> ccc

39 // forinFn(obj)//forin循环 可以遍历对象

40 // index :>> a

41 // typeof index :>> string

42 // item :>> aaa

43 // index :>> b

44 // typeof index :>> string

45 // item :>> bbb

46 // index :>> c

47 // typeof index :>> string

48 // item :>> ccc

49 // forinFn(deepObj)//forin循环 可以遍历对象 只遍历一层

50 // index :>> a

51 // typeof index :>> string

52 // item :>> aaa

53 // index :>> b

54 // typeof index :>> string

55 // item :>> { c: 'ccc' }

56

57 // forofFn(arr)// forof循环 循环时候没有index

58 // index :>> 0

59 // item :>> aaa

60 // index :>> 1

61 // item :>> bbb

62 // index :>> 2

63 // item :>> ccc

64

65 // doWhileFn(arr)// do While循环

66 // item :>> aaa

67 // item :>> bbb

68 // item :>> ccc

69 // whiledoFn(arr)// while do循环

70 // item :>> aaa

71 // item :>> bbb

72 // item :>> ccc

73

74 // mapFn(arr)// map循环 return不会终止循环，return相当于for循环里的continue

75 // index :>> 0

76 // item :>> aaa

77 // 0

78 // index :>> 1

79 // item :>> bbb

80 // index :>> 2

81 // item :>> ccc

82

83 // filterFn(arr)// filter循环 return不会终止循环，return相当于for循环里的continue

84 // index :>> 0

85 // item :>> aaa

86 // 0

87 // index :>> 1

88 // item :>> bbb

89 // index :>> 2

90 // item :>> ccc

91

92

93 // reduceFn(arr)// reduce方法 特殊应用场景使用 和上边的循环不一样

94 // i :>> aaa

95 // j :>> bbb

96 // i :>> aaabbb

97 // j :>> ccc

98 // res :>> aaabbbccc

99

100 // entriesFn(arr)// 遍历器entries循环

101 // Array.isArray(val) :>> true

102 // val :>> [ 0, 'aaa' ]

103 // index :>> 0

104 // item :>> aaa

105 // val :>> [ 1, 'bbb' ]

106 // index :>> 1

107 // item :>> bbb

108 // val :>> [ 2, 'ccc' ]

109 // index :>> 2

110 // item :>> ccc

111 // entriesFnPlus(arr)// 遍历器entries循环优化

112 // Array.isArray(val) :>> true

113 // val :>> [ 0, 'aaa' ]

114 // index :>> 0

115 // item :>> aaa

116 // Array.isArray(val) :>> true

117 // val :>> [ 1, 'bbb' ]

118 // index :>> 1

119 // item :>> bbb

120 // Array.isArray(val) :>> true

121 // val :>> [ 2, 'ccc' ]

122 // index :>> 2

123 // item :>> ccc

124

125 // keysValuesFn(arr)// 用数组的 arr.keys() arr.values() 方法遍历

126 // index :>> 0

127 // index :>> 1

128 // index :>> 2

129 // item :>> aaa

130 // item :>> bbb

131 // item :>> ccc

132

133 // ObjectKeysValuesFn(arr)// 用对象的 Object.keys(arr)、Object.values(arr)方法返回的字符串数组 遍历

134 // index :>> 0

135 // index :>> 1

136 // index :>> 2

137 // item :>> aaa

138 // item :>> bbb

139 // item :>> ccc

140 // ObjectKeysValuesFn(obj)// 可以遍历对象

141 // index :>> a

142 // index :>> b

143 // index :>> c

144 // item :>> aaa

145 // item :>> bbb

146 // item :>> ccc

147 // ObjectKeysValuesFn(deepObj)// 可以遍历对象 只遍历一层

148 // index :>> a

149 // index :>> b

150 // item :>> aaa

151 // item :>> { c: 'ccc' }

152

153 /**

154 * 经典for循环 据说性能最高

155 * @param {Array} arr

156 */

157 function foriFn(arr){

158 for(let i=0; i

159 console.log('index :>> ', i);

160 console.log('item :>> ', arr[i]);

161 }

162 }

163

164 /**

165 * 经典for循环 优化

166 * 将数组的length缓存起来避免每次都取获取数组的length

167 * @param {Array} arr

168 */

169 function foriFnPlus(arr){

170 for(let i=0,len=arr.length; i

171 console.log('index :>> ', i);

172 console.log('item :>> ', arr[i]);

173 }

174 }

175

176 /**

177 * forEach遍历数组

178 * return不会终止循环，return相当于for循环里的continue

179 * @param {Array} arr

180 */

181 function forEachFn(arr){

182 arr.forEach((item,index,a)=>{

183 console.log('index :>> ', index);

184 console.log('item :>> ', item);

185 if(index){

186 return;

187 }

188 })

189 }

190

191 /**

192 * forin循环

193 * 可以循环数组可以循环对象

194 * @param {Object,Array} arr

195 */

196 function forinFn(arr){

197 for (const idx in arr) {

198 if (arr.hasOwnProperty(idx)) {

199 const item = arr[idx];

200 console.log('index :>> ', idx);

201 console.log('typeof index :>> ', typeof idx);

202 console.log('item :>> ', item);

203 }

204 }

205 }

206

207 /**

208 * forOf循环

209 * 没给你传index

210 * @param {Array} arr

211 */

212 function forofFn(arr){

213 for (const item of arr) {

214 console.log('index :>> ', arr.indexOf(item));

215 console.log('item :>> ', item);

216 }

217 }

218

219 /**

220 * do while循环

221 * @param {Array} arr

222 */

223 function doWhileFn(arr){

224 do{

225 console.log('item :>> ', arr.shift());

226 }while(arr.length>0)

227 }

228

229 /**

230 * while do 循环

231 * @param {Array} arr

232 */

233 function whiledoFn(arr) {

234 while (arr.length>0) {

235 console.log('item :>> ', arr.shift());

236 }

237 }

238

239 /**

240 * map循环

241 * return不会终止循环，return相当于for循环里的continue

242 * @param {Array} arr

243 */

244 function mapFn(arr){

245 arr.map((v,i,a)=>{

246 console.log('index :>> ', i);

247 console.log('item :>> ', v);

248 if(i){

249 return

250 }

251 console.log(i);

252 })

253 }

254

255 /*

256 * filter循环

257 * return不会终止循环，return相当于for循环里的continue

258 * @param {Array} arr

259 */

260 function filterFn(arr){

261 arr.filter((v,i,a)=>{

262 console.log('index :>> ', i);

263 console.log('item :>> ', v);

264 if(i){

265 return

266 }

267 console.log(i);

268 })

269 }

270

271 /**

272 * reduce循环

273 * @param {Array} arr

274 */

275 function reduceFn(arr){

276 let res = arr.reduce((i,j)=>{

277 console.log('i :>> ', i);

278 console.log('j :>> ', j);

279 return i+j

280 })

281 console.log('res :>> ', res);

282 }

283

284 /**

285 * 遍历器循环

286 * @param {Array} arr

287 */

288 function entriesFn(arr){

289 let ets = arr.entries()

290

291 let val = ets.next().value

292 console.log('Array.isArray(val) :>> ', Array.isArray(val));

293 console.log('val :>> ', val);

294 console.log('index :>> ', val[0]);

295 console.log('item :>> ', val[1]);

296

297 val = ets.next().value

298 console.log('val :>> ', val);

299 console.log('index :>> ', val[0]);

300 console.log('item :>> ', val[1]);

301

302 val = ets.next().value

303 console.log('val :>> ', val);

304 console.log('index :>> ', val[0]);

305 console.log('item :>> ', val[1]);

306 }

307

308 /**

309 * 遍历器循环简化版

310 * @param {Array} arr

311 */

312 function entriesFnPlus(arr){

313 let ets = arr.entries()

314 let nxt=ets.next(),val

315 while(!nxt.done){

316 val = nxt.value

317 console.log('Array.isArray(val) :>> ', Array.isArray(val));

318 console.log('val :>> ', val);

319 console.log('index :>> ', val[0]);

320 console.log('item :>> ', val[1]);

321 nxt = ets.next()

322 }

323 }

324

325 /**

326 * 利用数组keys values属性的循环

327 * @param {Array} arr

328 */

329 function keysValuesFn(arr){

330 for (const index of arr.keys()) {

331 console.log('index :>> ', index);

332 }

333 for (const item of arr.values()) {

334 console.log('item :>> ', item);

335 }

336 }

337

338 /**

339 * 利用对象keys values属性的循环

340 * @param {Object} arr

341 */

342 function ObjectKeysValuesFn(arr){

343 for (const index of Object.keys(arr)) {

344 console.log('index :>> ', index);

345 }

346 for (const item of Object.values(arr)) {

347 console.log('item :>> ', item);

348 }

349 }

over

标签：index,arr,遍历,console,log,val,js,item,数组

来源： https://www.cnblogs.com/rainbowLover/p/13269993.html