javascript map forEach filter some every在购物车中的实战演练区分用法
1.map forEach
1.map 循环遍历每一项,返回一个新的数组
例: 购物车商品小计:
//购物车
var cart=[
{"id":101,"name":"大米","count":1,"price":3.3,"check":1},
{"id":102,"name":"小米","count":2,"price":3.3,"check":1},
{"id":103,"name":"二米","count":3,"price":3.3,"check":1},
]
//每个购物车中的小计
var cartPrices =cart.map(item=>{
return (item.count*item.price).toFixed(2)
})
console.log(cartPrices);
2.forEach 循环遍历每一项,并不返回值
例:计算商品价格的总和:
//购物车
var cart=[
{"id":101,"name":"大米","count":1,"price":3.3,"check":1},
{"id":102,"name":"小米","count":2,"price":3.3,"check":1},
{"id":103,"name":"二米","count":3,"price":3.3,"check":1},
]
//每个购物车中的小计
var cartPrices = cart.map(item=>{
return (item.count*item.price).toFixed(2)
})
//计算总和
var totalPrice = 0
cartPrices.forEach((item,index)=>{
totalPrice+=parseFloat(item);
})
console.log(totalPrice.toFixed(2));
2.filter 过滤出正确的那一项
例: 显示购物车信息
//商品ID
var id = 101;//101胶水'.'
//购物车
var cart=[
{"id":101,"name":"大米","count":1,"price":3.3,"check":1},
{"id":102,"name":"小米","count":2,"price":3.3,"check":1},
{"id":103,"name":"二米","count":3,"price":3.3,"check":1},
]
//过滤出该商品信息
var goods = cart.filter(item=>{
return item.id == id;
})
console.log(goods);
3.some 和 every 过滤每一项是否有正确的
1.some 如果有满足条件返回true不在向下执行 ,如果没有满足条件返回false
例: 购物车是否选中
//商品ID
var id = 101;//101胶水'.'
//购物车
var cart=[
{"id":101,"name":"大米","count":1,"price":3.3,"check":0},
{"id":102,"name":"小米","count":2,"price":3.3,"check":1},
{"id":103,"name":"二米","count":3,"price":3.3,"check":1},
]
//过滤购物车商品是否选中状态
var ischeck = cart.some(item=>{
if(item.id == id){
return item.check;
}
})
console.log(ischeck)
2.every 数组的每一项是否都满足条件返回true,否则返回false
例:购物车商品是否全选状态
//商品ID
var id = 101;//101胶水'.'
//购物车
var cart=[
{"id":101,"name":"大米","count":1,"price":3.3,"check":1},
{"id":102,"name":"小米","count":2,"price":3.3,"check":0},
{"id":103,"name":"二米","count":3,"price":3.3,"check":1},
]
//过滤购物车商品是否选中状态
var isallcheck = cart.every(item=>{
return item.check;
})
console.log(isallcheck)
javascript map forEach filter some every在购物车中的实战演练区分用法的更多相关文章
- js数组遍历(for in ,for of ,map,foreach,filter)的区别
一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...
- javascript中some,every,map,filter是只用和ansyc中的each,eachLimit,map,mapLImit,filter的使用
var t = [1,2,3,4,5]; //some找到数组中第一个符合要求的值后就不在继续执行//用来判断数组中是否存符合要求的值,返回结果true|false//function返回类型为boo ...
- javaScript 的 map() reduce() foreach() filter()
map(映射), reduce(规约), forEach(遍历), filter(过滤),它们都是高阶函数,都是以传入不同的函数来以不同的方式操作数组元.ie都不支持 一.map方法 *概述 map( ...
- JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()
ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...
- forEach、map、filter、find、sort、some等易错点整理
一.常用方法解析 说起数组操作,我们肯定第一反应就是想到forEach().map().filter()等方法,下面分别阐述一下各方法的优劣. 1.forEach 1.1 基础点 forEac ...
- [Javascript] Chaining the Array map and filter methods
Both map and filter do not modify the array. Instead they return a new array of the results. Because ...
- every();some();filter();map();forEach()各自区别:
every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...
- ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)
目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...
- forEach、map、filter、reduce的区别
1.相同点: 都会循环遍历数组中的每一项: map().forEach()和filter()方法里每次执行匿名函数都支持3个参数,参数分别是:当前元素.当前元素的索引.当前元素所属的数组: 匿名函数中 ...
随机推荐
- Vue实例data对象里允许有哪些类型数据
做项目中遇到了data赋值的问题,总结了下常用的data赋值的数据类型.之前一直不确定是否能在data里写函数,实践证明data里也是可以对函数赋值的. export default { name: ...
- EPOCH, BATCH, INTERATION
CIFAR10 数据集有 50000 张训练图片,10000 张测试图片.现在选择 Batch Size = 256 对模型进行训练. 每个 Epoch 要训练的图片数量: 训练集具有的 Batch ...
- ubuntu下载超快的一个站点
http://mirrors.163.com/ubuntu-releases/14.04/
- BF字符串匹配算法
Brute Force算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串T的第一个字符进行匹配,若相等,则继续比较S的第二个字符和 T的第二个字符: 若不相等,则比较S的第二个 ...
- Java基础(2)面向对象和封装,对象的创建和使用、java对象的内存图
1 类和对象 类:是一类事物的描述,抽象的.猫 对象:是一类事物的实例,具体的.某只猫 2 类的定义 成员变量和成员方法 //定义一个学生类 public class Student { //成员变量 ...
- dblogin userid ogg ERROR: Unable to connect to database using user ogg
测试环境,初步配置ogg,添加ogg用户连接数据库,提示无权限报错. 1.0 报错信息 GGSCI (enmo) > dblogin userid ogg,password ogg ERROR: ...
- multi-thread debug
1.不要去解锁一个未被加锁的mutex锁: 2.不要一个线程中加锁而在另一个线程中解锁: 3.使用mutex锁用于保护临界资源,严格按照“加锁-->写入/读取临界资源-->解锁”的流程执行 ...
- CFG文件格式
大多数情况下,很多程序都要保存用户的设置,办法有很多:注册表,日志文件·..... 而很多程序都使用了一个专用的文件.为了方便起见,常常命名为*.cfg,有时甚至直接命名为Config.cfg. 这只 ...
- 纯C:AES256
尼玛的WordPress把格式全搞乱了 aes256.h #ifndef _AES256_H_ #define _AES256_H_ #include <stdio.h> #include ...
- 1.。net框架
1..net框架结构 主要包含公共语言运行时(CLR)和框架类库(.NET Framework 类库 ,FCL) 2.CLR 1.对于一个将要面向.NET平台进行开发的人来说,了解一下.NET平台的整 ...