js遍历数组有多少种方法
Posted rainbowLover
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js遍历数组有多少种方法相关的知识，希望对你有一定的参考价值。
如果你看完了你会体会到一个人能有多无聊，这东西都能看完！！？？
大概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<arr.length; 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<len; 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
以上是关于js遍历数组有多少种方法的主要内容，如果未能解决你的问题，请参考以下文章