js遍历数组有多少种方法
如果你看完了你会体会到一个人能有多无聊，这东西都能看完！！？？
大概js有以下几种循环遍历的方法：
| 序号 | 方法 | 是否能遍历对象 | 备注 |
| 1 | fori循环 | 经典for循环，据说效率最高 | |
| 2 | fori加强版 | 减少获取length次数,效率更高 | |
| 3 |
forEach
|
return不会终止循环，return相当于for循环里的continue
|
|
| 4 | forin | 是 |
可以循环数组可以循环对象；index是string类型
|
| 5 | forof | 循环时候没给你传index | |
| 6 |
do While
|
||
| 7 |
while do
|
||
| 8 | map |
return不会终止循环，return相当于for循环里的continue
|
|
| 9 |
filter
|
return不会终止循环，return相当于for循环里的continue
|
|
| 10 |
reduce
|
用来拼接字符串或者数字相加的，和其它循环不一样 | |
| 11 |
entries
|
写法复杂 | |
| 12 | entries优化 | ||
| 13 |
arr.keys() or arr.values()
|
||
| 14 | Object.keys(obj) or Object.values(obj) | 是 | 可以循环数组可以循环对象；index是string类型 |
| 15 | arr.find() | ||
| 16 | arr.findIndex() | ||
| 17 | arr.every() |
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 /** 7 * 经典for循环 据说性能最高 8 * @param {Array} arr 9 */ 10 function foriFn(arr){ 11 for(let i=0; i<arr.length; i++){ 12 console.log('index :>> ', i); 13 console.log('item :>> ', arr[i]); 14 } 15 } 16 // index :>> 0 17 // item :>> aaa 18 // index :>> 1 19 // item :>> bbb 20 // index :>> 2 21 // item :>> ccc 22 23 foriFnPlus(arr);// 经典for循环稍微优化一下子 24 /** 25 * 经典for循环 优化 26 * 将数组的length缓存起来避免每次都取获取数组的length 27 * @param {Array} arr 28 */ 29 function foriFnPlus(arr){ 30 for(let i=0,len=arr.length; i<len; i++){ 31 console.log('index :>> ', i); 32 console.log('item :>> ', arr[i]); 33 } 34 } 35 // index :>> 0 36 // item :>> aaa 37 // index :>> 1 38 // item :>> bbb 39 // index :>> 2 40 // item :>> ccc 41 42 forEachFn(arr);// forEach遍历数组 return不会终止循环，return相当于for循环里的continue 43 /** 44 * forEach遍历数组 45 * return不会终止循环，return相当于for循环里的continue 46 * @param {Array} arr 47 */ 48 function forEachFn(arr){ 49 arr.forEach((item,index,a)=>{ 50 console.log('index :>> ', index); 51 console.log('item :>> ', item); 52 if(index){ 53 return; 54 } 55 }) 56 } 57 // index :>> 0 58 // item :>> aaa 59 // index :>> 1 60 // item :>> bbb 61 // index :>> 2 62 // item :>> ccc 63 64 /** 65 * forin循环 66 * 可以循环数组可以循环对象 67 * @param {Object,Array} arr 68 */ 69 function forinFn(arr){ 70 for (const idx in arr) { 71 if (arr.hasOwnProperty(idx)) { 72 const item = arr[idx]; 73 console.log('index :>> ', idx); 74 console.log('typeof index :>> ', typeof idx); 75 console.log('item :>> ', item); 76 } 77 } 78 } 79 forinFn(arr)// forin循环 循环时候得到的key时字符串类型的 80 // index :>> 0 81 // typeof index :>> string 82 // item :>> aaa 83 // index :>> 1 84 // typeof index :>> string 85 // item :>> bbb 86 // index :>> 2 87 // typeof index :>> string 88 // item :>> ccc 89 forinFn(obj)//forin循环 可以遍历对象 90 // index :>> a 91 // typeof index :>> string 92 // item :>> aaa 93 // index :>> b 94 // typeof index :>> string 95 // item :>> bbb 96 // index :>> c 97 // typeof index :>> string 98 // item :>> ccc 99 forinFn(deepObj)//forin循环 可以遍历对象 只遍历一层 100 // index :>> a 101 // typeof index :>> string 102 // item :>> aaa 103 // index :>> b 104 // typeof index :>> string 105 // item :>> { c: 'ccc' } 106 107 forofFn(arr)// forof循环 循环时候没有index 108 /** 109 * forOf循环 110 * 没给你传index 111 * @param {Array} arr 112 */ 113 function forofFn(arr){ 114 for (const item of arr) { 115 console.log('index :>> ', arr.indexOf(item)); 116 console.log('item :>> ', item); 117 } 118 } 119 // index :>> 0 120 // item :>> aaa 121 // index :>> 1 122 // item :>> bbb 123 // index :>> 2 124 // item :>> ccc 125 126 doWhileFn(arr)// do While循环 127 /** 128 * do while循环 129 * @param {Array} arr 130 */ 131 function doWhileFn(arr){ 132 do{ 133 console.log('item :>> ', arr.shift()); 134 }while(arr.length>0) 135 } 136 // item :>> aaa 137 // item :>> bbb 138 // item :>> ccc 139 whiledoFn(arr)// while do循环 140 /** 141 * while do 循环 142 * @param {Array} arr 143 */ 144 function whiledoFn(arr) { 145 while (arr.length>0) { 146 console.log('item :>> ', arr.shift()); 147 } 148 } 149 // item :>> aaa 150 // item :>> bbb 151 // item :>> ccc 152 153 mapFn(arr)// map循环 return不会终止循环，return相当于for循环里的continue 154 /** 155 * map循环 156 * return不会终止循环，return相当于for循环里的continue 157 * @param {Array} arr 158 */ 159 function mapFn(arr){ 160 arr.map((v,i,a)=>{ 161 console.log('index :>> ', i); 162 console.log('item :>> ', v); 163 if(i){ 164 return 165 } 166 console.log(i); 167 }) 168 } 169 // index :>> 0 170 // item :>> aaa 171 // 0 172 // index :>> 1 173 // item :>> bbb 174 // index :>> 2 175 // item :>> ccc 176 177 filterFn(arr)// filter循环 return不会终止循环，return相当于for循环里的continue 178 /* 179 * filter循环 180 * return不会终止循环，return相当于for循环里的continue 181 * @param {Array} arr 182 */ 183 function filterFn(arr){ 184 arr.filter((v,i,a)=>{ 185 console.log('index :>> ', i); 186 console.log('item :>> ', v); 187 if(i){ 188 return 189 } 190 console.log(i); 191 }) 192 } 193 // index :>> 0 194 // item :>> aaa 195 // 0 196 // index :>> 1 197 // item :>> bbb 198 // index :>> 2 199 // item :>> ccc 200 201 202 reduceFn(arr)// reduce方法 特殊应用场景使用 和上边的循环不一样 203 /** 204 * reduce循环 205 * @param {Array} arr 206 */ 207 function reduceFn(arr){ 208 let res = arr.reduce((i,j)=>{ 209 console.log('i :>> ', i); 210 console.log('j :>> ', j); 211 return i+j 212 }) 213 console.log('res :>> ', res); 214 } 215 // i :>> aaa 216 // j :>> bbb 217 // i :>> aaabbb 218 // j :>> ccc 219 // res :>> aaabbbccc 220 221 entriesFn(arr)// 遍历器entries循环 222 /** 223 * 遍历器循环 224 * @param {Array} arr 225 */ 226 function entriesFn(arr){ 227 let ets = arr.entries() 228 229 let val = ets.next().value 230 console.log('Array.isArray(val) :>> ', Array.isArray(val)); 231 console.log('val :>> ', val); 232 console.log('index :>> ', val[0]); 233 console.log('item :>> ', val[1]); 234 235 val = ets.next().value 236 console.log('val :>> ', val); 237 console.log('index :>> ', val[0]); 238 console.log('item :>> ', val[1]); 239 240 val = ets.next().value 241 console.log('val :>> ', val); 242 console.log('index :>> ', val[0]); 243 console.log('item :>> ', val[1]); 244 } 245 // Array.isArray(val) :>> true 246 // val :>> [ 0, 'aaa' ] 247 // index :>> 0 248 // item :>> aaa 249 // val :>> [ 1, 'bbb' ] 250 // index :>> 1 251 // item :>> bbb 252 // val :>> [ 2, 'ccc' ] 253 // index :>> 2 254 // item :>> ccc 255 entriesFnPlus(arr)// 遍历器entries循环优化 256 /** 257 * 遍历器循环简化版 258 * @param {Array} arr 259 */ 260 function entriesFnPlus(arr){ 261 let ets = arr.entries() 262 let nxt=ets.next(),val 263 while(!nxt.done){ 264 val = nxt.value 265 console.log('Array.isArray(val) :>> ', Array.isArray(val)); 266 console.log('val :>> ', val); 267 console.log('index :>> ', val[0]); 268 console.log('item :>> ', val[1]); 269 nxt = ets.next() 270 } 271 } 272 // Array.isArray(val) :>> true 273 // val :>> [ 0, 'aaa' ] 274 // index :>> 0 275 // item :>> aaa 276 // Array.isArray(val) :>> true 277 // val :>> [ 1, 'bbb' ] 278 // index :>> 1 279 // item :>> bbb 280 // Array.isArray(val) :>> true 281 // val :>> [ 2, 'ccc' ] 282 // index :>> 2 283 // item :>> ccc 284 285 keysValuesFn(arr)// 用数组的 arr.keys() arr.values() 方法遍历 286 /** 287 * 利用数组keys values属性的循环 288 * @param {Array} arr 289 */ 290 function keysValuesFn(arr){ 291 for (const index of arr.keys()) { 292 console.log('index :>> ', index); 293 } 294 for (const item of arr.values()) { 295 console.log('item :>> ', item); 296 } 297 } 298 // index :>> 0 299 // index :>> 1 300 // index :>> 2 301 // item :>> aaa 302 // item :>> bbb 303 // item :>> ccc 304 305 ObjectKeysValuesFn(arr)// 用对象的 Object.keys(arr)、Object.values(arr)方法返回的字符串数组 遍历 306 // index :>> 0 307 // index :>> 1 308 // index :>> 2 309 // item :>> aaa 310 // item :>> bbb 311 // item :>> ccc 312 ObjectKeysValuesFn(obj)// 可以遍历对象 313 // index :>> a 314 // index :>> b 315 // index :>> c 316 // item :>> aaa 317 // item :>> bbb 318 // item :>> ccc 319 ObjectKeysValuesFn(deepObj)// 可以遍历对象 只遍历一层 320 // index :>> a 321 // index :>> b 322 // item :>> aaa 323 // item :>> { c: 'ccc' } 324 /** 325 * 利用对象keys values属性的循环 326 * @param {Object} arr 327 */ 328 function ObjectKeysValuesFn(arr){ 329 for (const index of Object.keys(arr)) { 330 console.log('index :>> ', index); 331 } 332 for (const item of Object.values(arr)) { 333 console.log('item :>> ', item); 334 } 335 } 336 337 findFn(arr)// 用数组的 arr.find() 方法遍历 338 /** 339 * find 循环 340 * @param {Array} arr 341 */ 342 function findFn(arr){ 343 arr.find((v,i,a)=>{ 344 console.log('index :>> ', i); 345 console.log('item :>> ', v); 346 }) 347 } 348 // index :>> 0 349 // item :>> aaa 350 // index :>> 1 351 // item :>> bbb 352 // index :>> 2 353 // item :>> ccc 354 355 356 findIndexFn(arr)// 用数组的 arr.findIndex() 方法遍历 357 /** 358 * findIndex 循环 359 * @param {Array} arr 360 */ 361 function findIndexFn(arr){ 362 arr.findIndex((v,i,a)=>{ 363 console.log('index :>> ', i); 364 console.log('item :>> ', v); 365 }) 366 } 367 // index :>> 0 368 // item :>> aaa 369 // index :>> 1 370 // item :>> bbb 371 // index :>> 2 372 // item :>> ccc
over
