数组遍历方法归纳

2年前 (2022) 程序员胖胖胖虎阿

282 0 0

###（1）for ... in ...

<div style="border: 2px solid #EEE; padding: 10px"> for...in ... 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）</div> ``` // 遍历数组 var a = [1, 2, 3, 4, 5]; for(let i in a) { console.log(i) // 得到的是索引 or 属性 or 键 0 1 2 3 4 } console.log(i) // not defined ``` <image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191106191059938-1527108057.png" width="500"></image> ``` // 遍历对象 var obj = {x: 1, y: 2, z: 3}; for(let o in obj) { console.log(o) // x y z } ``` <image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191106191851628-182975223.png" width="500"></image> <br> ###（2）for ... of ... <div style="border: 2px solid #EEE; padding: 10px"> for...of ... 语句用于遍历数组的值（对数组的值进行循环操作）</div> ``` // 遍历数组 var a = [1, 2, 3, 4, 5]; for(var i of a) { console.log(i) // 得到的是数组的值 1 2 3 4 5 } console.log(i) // 5 ``` <image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191106192811796-1128315256.png" width="500"></image> #### ⚠️注意：for ... of ... 不可用于对象，会报错 obj is not iterable （不可迭代的） <image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191106193337102-1760407953.png" width="500"></image> <br> ###（3）for(let i = 0; i < array.length; i++) <div style="border: 2px solid #EEE; padding: 10px"> for(let i = 0; i < array.length; i++) 语句用于索引指向循环遍历数组 </div> ``` var arr = ['x', 'y', 'z']; for(var i = 0; i < arr.length; i++) { console.log('index: ', i, ' item: ', arr[i]) } /* index: 0 item: x index: 1 item: y index: 2 item: z */ ``` <br> ### （4）filter() 方法 <div style="border: 2px solid #EEE; padding: 10px">filter() 方法对数组中的每一项运行给定函数( callback )，通过遍历筛选返回符合条件( 筛选结果为 true )的数组，有三个参数（item, index, array)，返回一个新数组，不会改变原数组 </div>

<image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191106200409710-1895674302.png" width="500"></image> <br> ###（5）every() 方法

<div style="border: 2px solid #EEE; padding: 10px"> every() 方法对数组的项运行给定函数，如果函数定每一项都返回为 true，则最后结果返回为 true，否则为 false，可用来判断是否每一个值都满足某条件 </div> ####every() 方法有三个参数（item, index, array)，它的遍历在不满足条件时结束，遇到 false 即退出循环，只有全部都满足条件，才会遍历数组完整的数据 <image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191107150558950-1318838489.png" width="500"></image> <br> ###（6）some() 方法 <div style="border: 2px solid #EEE; padding: 10px"> some() 方法对数组的项运行给定函数，如果函数任一项返回为 true，则最后结果返回为 true，否则为 false，可用来判断数组中是否有满足某条件对值 </div> ####some() 方法有三个参数（item, index, array)，与every() 相反，它的遍历会在找到满足条件时结束，遇到 true 即退出循环，只有全部都不满足条件，才会遍历数组完整的数据 <image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191107153627758-316775170.png" width="500"></image> <br> ###（7）map() 方法 <div style="border: 2px solid #EEE; padding: 10px"> map() 方法对数组的每一项运行给定函数，返回每次函数调用的结果组成的新数组 </div> #### map() 方法有三个参数（item, index, array)，有返回值，是函数调用后返回的新数组，每一项都调用了函数，原函数在此过程中并不会发生改变，所调用的函数结果必须通过 return 方式返回给新数组，否则新数组获取的值将会是 undefined <image src="https://img2018.cnblogs.com/blog/1649251/201911/1649251-20191107160508004-586568910.png" width="500"></image>

补充一下

[1, 2, 3].map(parseInt)会返回什么呢？？？答案是： [1, NaN, NaN]

首先，map 的 callBack 的参数有 (item, index, array)，当没有写的时候，会根据其后调用的函数取用
而 parseInt 需要两个参数，（String, Radix） String （必填）--- 是要被解析的字符串 Radix （选填）--- 表示要解析的数字的基数，2 ~ 36之间，省略或者其值为 0 ，按 10 来解析；0x 或者 0X 是以 16 来解析；其值小于 2 或者大于 16，返回结果 NaN； String 超出 Radix 的范围返回结果 NaN，eg: Radix 为 4，可以对 '0', '1', '2', '3'解析，其余都返回NaN，parseInt('4', 4) = NaN
[1, 2, 3].map(parseInt) ==> [1, 2, 3].map((item, index) => { return parseInt(item, index) }) ==> parseInt('1', 0) = parseInt('1', 10) = 1 + parseInt('2', 1) = NaN + parseInt('3', 2) = NaN

<br> ###（8）forEach() 方法 <div style="border: 2px solid #EEE; padding: 10px"> forEach() 方法对数组的每一项运行给定函数，没有返回新数组，一般来讲是会改变原数组的，如果改变了数组地址指向的数据类型，是可以改变原数组的，如果只是单纯改变了数组的值，原数组不变 </div>