首页
视频
资源
登录
原
精
js 数组的遍历方式
4625
人阅读
2020/6/24 20:56
总访问:
96389
评论:
0
收藏:
0
手机
分类:
ES6
### 数组的遍历方式 #### ES6 之前数数组的遍历方式 > for 最原始的数组循环方式 > forEach 对当前的数组进行简单的循环 > map 对当前的数组进行循环 根据回调操作得到一个新数组 > filter 对当前的数组元素进行过滤 得到过滤之后的数组 > some 遍历数组有没有符合条件的元素 > every 遍历数组中每个值是否符合条件值 返回布尔值 > reduce 数组的累加器 > for in 数组的循环方式 #### ES6 新增数组遍历方式 > find 返回第一个通过测试的元素 > findIndex 返回第一个通过测试的元素的索引值 > for of 数组的遍历方式 #### ES5 详解 **for 最原始的数组遍历的方式 只要想到数组遍历方式 第一个就应该想到for循环** ```javascript let arr = [1, 2, 3] for(let i = 1, i < arr.length; i++) { console.log(arr[i]) } // 1, 2, 3 ``` **forEach 对当前的数组每项循环 传入的值是一个方法 只是简单的循环** ```javascript let arr = [1, 2, 3] // forEach 回调方法支持传入三个参数 // item 当前正在遍历的对象 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式不支持 break, continue 代表着在中途不能结束和跳出循环 arr.forEach(function(item, index, arr) { console.log(item, index, arr) }) // 1 0?[1, 2, 3] // 2 1?[1, 2, 3] // 3 2?[1, 2, 3] ``` **map: 也是对当前数组每项进行循环 会遍历数组中的每一个元素 根据回调操作 会返回一个新的数组 不会改变原有数组的值** ```javascript let arr = [1, 2, 3] // map 回调方法支持传入三个参数 // item 当前正在遍历的对象 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环 let result = arr.map(function(item, index, arr) { console.log(item, index, arr) item += 1 return item }) console.log(arr, result) // [1, 2, 3]?[2, 3, 4] ``` **filter: 过滤 会返回一个新的数组 返回的数组是原来的数组中通过筛选之后的数组 如果没有匹配值返回一个 空数组 [] ** ```javascript let arr = [1, 2, 3] // filter 回调方法支持传入三个参数 // item 当前正在遍历的对象 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环 let result = arr.filter(function(item, index, arr) { console.log(item, index, arr) return item === 2 // 相当于判断语句 }) console.log(result) // [2] ``` **some: 遍历数组中有没有符合条件的元素 返回的是一个 布尔值 如果如何就返回 true 否则 返回 false 不会改变原有数组的值** ```javascript let arr = [1, 2, 3] // some 回调方法支持传入三个参数 // item 当前正在遍历的对象 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环 let result = arr.some(function(item, index, arr) { console.log(item, index, arr) return item === 4 }) console.log(result) // false ``` **every: 检测数组中的每一个值是否符合条件值 返回的是一个 布尔值 如果如何就返回 true 否则 返回 false 不会改变原数组** ```javascript let arr = [1, 2, 3] // every 回调方法支持传入三个参数 // item 当前正在遍历的对象 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环 let result = arr.some(function(item, index, arr) { console.log(item, index, arr) return item === 4 }) console.log(result) // false ``` **reduce: 接受一个函数为累加器** ```javascript let arr = [1, 2, 3] // reduce 函数接受两参数 一个是回调函数 一个是初始值 // 什么是初始值 如果需求是要得到数组中的每项和 初始值即 0 以此类推 // reduce 回调方法支持传入四个参数 // prev 对应上一次执行的返回值 如果是第一次 就对应初始值 // current 当前正在遍历的数组中的元素 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环 let result = arr.reduce(function(prev, current, index, arr) { console.log(prev, current, index, arr) return prev + current }, 0) console.log(result) // 6 ``` 实际应用场景: 求出数组的每项和 最值 去重 求出最值: ```javascript let arr = [1, 2, 3] let result = arr.reduce(function(prev, current, index, arr) { return Math.max(prev, current) }, 0) console.log(result) // 3 ``` 去重: ```javascript let arr = [1, 2, 3, 3, 2, 1] let result = arr.reduce(function(prev, current, index, arr) prev.indexOf(current) === -1 && prev.push(current) return prev }, []) console.log(result) // [1, 2, 3] ``` **for in 也是用来循环遍历数组的 在参数中 定义一个变量 index 代表数组的索引值 in 上需要比遍历的数组** ```javascript let arr = [1, 2, 3] for(let index in arr) { console.log(index, arr) } // 0?[1, 2, 3] // 1?[1, 2, 3] // 2?[1, 2, 3] ``` for in 可以正常的遍历数组 但是在遍历数组的时候有一些问题 如: ```javascript // 我们数组的原型上增加一个方法 foo Array.prototype.foo = function () { console.log('haha') } let arr = [1, 2, 3] for(let index in arr) { console.log(index, arr[index]) } ``` ![for in 遍历数组存在的问题](https://img.tnblog.net/arcimg/17585965017/e8b63b20f17e4834b3b570bc57542b67.png "for in 遍历数组存在的问题") 通过截图可知 不仅仅是输出了 数组中的内容 而且输出了数组原型上定义的方法 所以 在实际的业务中使用 for in 是有问题的 #### ES6 新增的遍历方式详解 **find: 返回第一个通过测试的元素 如果没有找到 返回值为 undefined 不改变原数组** ```javascript let arr = [1, 2, 3, 2, 4] // find 回调方法支持传入三个参数 // item 当前正在遍历的数组中的元素 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环 let result = arr.find(function(item, index, arr) { console.log(item, index, arr) return item === 2 }) console.log(result) // 2 ``` **findIndex: 返回第一次出现的元素的索引值 如果找不到返回值为 -1 不改变原数组** ```javascript let arr = [1, 2, 3, 2, 4] // find 回调方法支持传入三个参数 // item 当前正在遍历的数组中的元素 // index 当前正在遍历的数组的索引 从 0 开始 // arr 当前遍历的数组本身 // 当前数组遍历方式中不支持 break, continue 代表着在中途不能结束和跳出循环 let result = arr.findIndex(function(item, index, arr) { console.log(item, index, arr) return item === 2 }) console.log(result) ``` **for of: 推荐的数组的循环方式:** ```javascript let arr = [1, 2, 3, 2, 4] for(let item of arr) { console.log(item) // 1, 2, 3, 2, 4 } // 这里的 arr.values() 方法的得到的和上面得到的是一样的 for(let item of arr.values()) { console.log(item) // 1, 2, 3, 2, 4 } // 通过以上代码输出可以看出得到数组的每项值 如何得到数组的索引?? for(let item of arr.keys()) { console.log(item) // 0, 1, 2, 3, 4 } // 如何得到值和索引值: for(let [index, item] of arr.entries()) { console.log(index, item) } ```
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
叼着奶瓶逛酒吧
大概你身上总有我喜欢的味道,所以我一见你就开心的笑
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
祈祷永无bug
8篇
初吻给了奶嘴
1篇
Vue课程笔记
3篇
ES6
5篇
TypeScript
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术