数据类型_array_es6新增的数组遍历方法
数组遍历
- [1]map方法
- [2]filter方法
- [3]forEach方法
- [4]some方法
- [5]every方法
- [6]findIndex方法
- [7]includes方法
- [8]reduce方法
[1]map方法
(1)作用:以某种规则映射
数组;
(2)语法
arr.map((item,index)=>{return 值 })
(3)返回值
map方法 不对原数组进行操作而是返回一个新数组;
map方法的返回值为 (return)值 组成的新数组;
map方法其实返回的是
一层深拷贝
的数组;const arr = ['a',{text:'吃食',id:1,children:[{text:'水果',id:11,},{text:'零食',id:12,},{test:'肉类',id:13,}]},{text:'服装',id:2,children:[{text:'春装',id:21},{text:'夏装',id:22},{text:'秋装',id:23},{text:'冬装',id:23},]}]const maparr = arr.map(item => item)console.log('arr', arr)console.log('maparr', maparr)maparr[0] = 'b'maparr[1].id=1111console.log('arr', arr)console.log('maparr', maparr)
- 第一次打印
map方法不对原数组进行操作而是返回一个由 (return)值 组成的新数组;
- 第二次打印
可以看出,map拷贝为1层深拷贝;
- 当我们修改数组中基本数据类型时,不会影响arr;
- 当我们修改数组中复杂数据类型时,会影响arr;
- 第一次打印
(4)举例说明
数组对象中,只需要每个元素的某个属性
<!-- 获取每个数组元素的name属性 --> <script>let arr = [{ name: 'chaochao', sex: '女' },{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },{ name: 'linlin', sex: '女' }]let newArr = arr.map(item => item.name)console.log(newArr) //['chaochao','niuniu','wenwen','linlin'] </script>
[2]filter方法
(1)作用:以某种规则过滤
数组元素
(2)语法
arr.filter((item,index)=>{return boolean ? ture : false }) // 若是返回值为true,就将该数据添加到返回数组中,若不是就不添加
(3)返回值
filter方法与map方法类似
- filter方法 不对原数组进行操作而是返回一个新数组;
- filter方法其实返回的是
一层深拷贝
的数组;
filter方法的返回值为 过滤后的新数组;
举例说明
<!-- 返回性别为男的信息 --> <script>let arr = [{ name: 'chaochao', sex: '女' },{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },{ name: 'linlin', sex: '女' }]let newArr = arr.filter(item => item.sex=='男')console.log(newArr) //[{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },] </script>
[3]forEach方法
(1)作用:相当于for循环,对数组数据做某些处理;
(2)语法
数组.forEach((item,index)=>{// 对数据做处理 })
(3)返回值
- 该方法没有返回值,
对当前数组进行处理
;
(4)注意点
forEach方法中的return有时不会终止循环
->具体原因和解决办法可看forEach中的return,
(5)举例说明
<script>let arr = [{ name: 'chaochao', sex: '女' },{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },{ name: 'linlin', sex: '女' }]arr.forEach((item, index) => {item.age = 18})console.log(arr)</script>
[4]some方法
(1)作用:判断数组中是否有符合条件的元素、
(2)语法
// 循环遍历 -> 判断当前元素是否符合条件 // 若是返回值为false -> 不符合条件 -> 继续判断 // 若是返回值为true -> 符合条件 -> 结束循环 arr.some(item => {return boolean ? true : false })
(3)举例说明
<script>let arr = [{ name: 'chaochao', sex: '女' },{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },{ name: 'linlin', sex: '女' }]let bol = arr.some((item, index) => {// 判断该数组中是否有男生return item.sex === '男'})console.log(bol) //true</script>
[5]every方法
(1)作用:判断数组中的元素是否全部符合条件;
(2)语法
arr.every(item=>{return 表达式/变量
})
(3)返回值
- 循环遍历数组,每个元素 return 值
- 若是 return true -> 当前元素符合条件 -> 继续遍历;
- 若是 return false -> 当前元素不符合条件 -> 终止
(4)举例说明
let arr = [{ name: 'chaochao', sex: '女' },{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },{ name: 'linlin', sex: '女' }
]
let bol = arr.every((item, index) => {// 判断该数组中是否全部为男生return item.sex === '男'
})
console.log(bol) //false
[6]findIndex方法
(1)作用:查找数组有没有符合条件的元素,若是有,返回第一个符合元素的下标,若是没有返回false
(2)语法
数组.findIndex((item,index)=>{if(boolean){// 为true, 结束执行,返回当前元素的索引// 若是为false,继续执行}
})
(3)举例说明
<script>let arr = [{ name: 'chaochao', sex: '女' },{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },{ name: 'linlin', sex: '女' }]let index = arr.findIndex((item, index) => {// 返回第一个男生的索引return item.sex === '男'})console.log(index) //1</script>
[7]includes方法
作用:判断该数组中是否有符合条件的元素,有则返回true,没有返回false
[8]reduce方法
/*reduce方法接收两个参数 [1]回调函数function [2]初始值 initreduce方法会遍历数组中的每一个元素,每遍历一次就会执行一次回调函数。当遍历完之后会将最后的结果返回出去。pre:函数上一次计算的结果,最初值为init;cur:遍历的当前元素;index:当前元素的索引arr:原数组
*/
arr.reduce(function(pre,cur,index,arr){return XXX
},init)
可以使用reduce方法进行求和计算
this.cartList.reduce(function(pre,cur){return cur.checked ? pre+cur.goods_price*cur.num : pre
},0)
数据类型_array_es6新增的数组遍历方法相关推荐
- js笔记(三)ES5、ES5新增的数组的方法、字符串的方法、字符编码、对象的序列化和反序列化、bind
数组方法.字符串方法总结 大目录 小目录 一.ES5严格模式 1. 严格模式: 2. 严格模式的行为变更: 二.ES5新增的数组的方法 1. 判断是否为数组:Array.isArray(): 2. 判 ...
- php的遍历方法,PHP数组遍历方法总结
在PHP中数组分为两类: 数字索引数组和关联数组. 其中数字索引数组和C语言中的数组一样,下标是为0,1,2- 而关联数组下标可能是任意类型,与其它语言中的hash,map等结构相似. 下面介绍PHP ...
- ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
- js 数组遍历方法详解(map、filter、find、findIndex、reduce)
目录 前言 map map是什么 map方法的结构及入参 语法糖 map一般不改变原数组 filter 说明 例子 find 和 findIndex 说明 例子 reduce 说明 例子 尾言 前言 ...
- ES6中新增数组遍历方法
ES6中新增的方法 遍历方法: forEach(),fifter(),some(): array.forEach(function(currentValue,index,arr)) // curren ...
- JSON.parse()和JSON.stringify()和数组遍历方法
一.JSON.parse()和JSON.stringify() 网络中的信息的传输,传输的都是字符串,XML 用来传输数据,现在大多数web开发都是用json数据结构. 1.前端 ----string ...
- js 数组遍历符合条件跳出循环体_Js数组遍历方法对比总结
引言: ES6为javascript为数组遍历提供了新的一种方式: for....of.....那之前的遍历方法各存在哪些缺点?for...of...有什么好处?接下来,我们先回顾一下有多少种方式. ...
- JavaScript 数组遍历方法的对比
前言 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 代码: var ...
- 浅谈JS的数组遍历方法
用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...
最新文章
- LeetCode 15. 3Sum--Java,Python解法
- scala 处理 Response返回 时间报错问题
- linux使用shell函数扩充命令,Linux Shell系列教程之(十五) Shell函数简介 | Linux大学...
- exchange 2010 指定用户邮箱连接CAS服务器
- 《Qt数据类型》--QByteArray,QString,int,hex之间的转化
- Java忽略算术溢出,IEEE-754:“最小”溢出条件
- 20162317 2017-2018-1 《程序设计与数据结构》第8周学习总结
- java第二章复习_JAVA第二章知识点
- suse查看mysql内存使用情况_MySQL 慢查询日志(Slow Query Log)
- 让数据库运行在浏览器里?TiDB + WebAssembly 告诉你答案
- 负载均衡获得真实源IP的6种方法 【转】
- StackedGAN详解与实现(采用tensorflow2.x实现)
- freeldr 如何调用_BootMain的
- 第八届蓝桥杯省赛C/C++本科B组真题解析
- 百度算法频频更新,草根站长的出路何在?
- pandas 聚合 df.groupby.agg
- ffmpeg播放器实现详解 - 快进快退控制
- ie input兼容 vue_vue+iview 兼容IE11浏览器的实现方法
- 计算机编程课程顺序_您可以在八月开始的500项免费在线编程和计算机科学课程
- [附源码]计算机毕业设计springboot家庭医生签约服务管理系统