1.map forEach

1.map 循环遍历每一项,返回一个新的数组

例: 购物车商品小计:

  1. //购物车
  2. var cart=[
  3. {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
  4. {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
  5. {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
  6. ]
  7. //每个购物车中的小计
  8. var cartPrices =cart.map(item=>{
  9. return (item.count*item.price).toFixed(2)
  10. })
  11. console.log(cartPrices);
2.forEach 循环遍历每一项,并不返回值

例:计算商品价格的总和:

  1. //购物车
  2. var cart=[
  3. {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
  4. {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
  5. {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
  6. ]
  7. //每个购物车中的小计
  8. var cartPrices = cart.map(item=>{
  9. return (item.count*item.price).toFixed(2)
  10. })
  11. //计算总和
  12. var totalPrice = 0
  13. cartPrices.forEach((item,index)=>{
  14. totalPrice+=parseFloat(item);
  15. })
  16. console.log(totalPrice.toFixed(2));

2.filter 过滤出正确的那一项

例: 显示购物车信息

  1. //商品ID
  2. var id = 101;//101胶水'.'
  3. //购物车
  4. var cart=[
  5. {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
  6. {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
  7. {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
  8. ]
  9. //过滤出该商品信息
  10. var goods = cart.filter(item=>{
  11. return item.id == id;
  12. })
  13. console.log(goods);

3.some 和 every 过滤每一项是否有正确的

1.some 如果有满足条件返回true不在向下执行 ,如果没有满足条件返回false

例: 购物车是否选中

  1. //商品ID
  2. var id = 101;//101胶水'.'
  3. //购物车
  4. var cart=[
  5. {"id":101,"name":"大米","count":1,"price":3.3,"check":0},
  6. {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
  7. {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
  8. ]
  9. //过滤购物车商品是否选中状态
  10. var ischeck = cart.some(item=>{
  11. if(item.id == id){
  12. return item.check;
  13. }
  14. })
  15. console.log(ischeck)
2.every 数组的每一项是否都满足条件返回true,否则返回false

例:购物车商品是否全选状态

  1. //商品ID
  2. var id = 101;//101胶水'.'
  3. //购物车
  4. var cart=[
  5. {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
  6. {"id":102,"name":"小米","count":2,"price":3.3,"check":0},
  7. {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
  8. ]
  9. //过滤购物车商品是否选中状态
  10. var isallcheck = cart.every(item=>{
  11. return item.check;
  12. })
  13. console.log(isallcheck)

javascript map forEach filter some every在购物车中的实战演练区分用法的更多相关文章

  1. js数组遍历(for in ,for of ,map,foreach,filter)的区别

    一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...

  2. javascript中some,every,map,filter是只用和ansyc中的each,eachLimit,map,mapLImit,filter的使用

    var t = [1,2,3,4,5]; //some找到数组中第一个符合要求的值后就不在继续执行//用来判断数组中是否存符合要求的值,返回结果true|false//function返回类型为boo ...

  3. javaScript 的 map() reduce() foreach() filter()

    map(映射), reduce(规约), forEach(遍历), filter(过滤),它们都是高阶函数,都是以传入不同的函数来以不同的方式操作数组元.ie都不支持 一.map方法 *概述 map( ...

  4. JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  5. forEach、map、filter、find、sort、some等易错点整理

    一.常用方法解析   说起数组操作,我们肯定第一反应就是想到forEach().map().filter()等方法,下面分别阐述一下各方法的优劣. 1.forEach 1.1 基础点   forEac ...

  6. [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 ...

  7. every();some();filter();map();forEach()各自区别:

    every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...

  8. ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)

    目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...

  9. forEach、map、filter、reduce的区别

    1.相同点: 都会循环遍历数组中的每一项: map().forEach()和filter()方法里每次执行匿名函数都支持3个参数,参数分别是:当前元素.当前元素的索引.当前元素所属的数组: 匿名函数中 ...

随机推荐

  1. NAVICAT for 32位/64位 及破解工具PatchNavicat

    Navicat提供多达 7 种语言供客户选择,被公认为全球最受欢迎的数据库前端用户介面工具. 它可以用来对本机或远程的 MySQL.SQL Server.SQLite.Oracle 及 Postgre ...

  2. PRCT-1302 the OCR has an invalid ip address

    PRCT-1302 the OCR has an invalid ip address 1. 报错信息 an internal error occurred within cluster verifi ...

  3. Caution: request is not finished yet

    /********************************************************************** * Caution: request is not fi ...

  4. 当Jaxb遇到泛型

    前言: 最近的工作内容跟银行有些交互, 对方提供的数据格式采用xml(不是预期的json/protobuf). 为了开发方便, 需要借助jaxb来实现xml和java对象之间的映射. 它还是有点像ja ...

  5. jquery使用ajax提交form表单

    $.ajax({ type: jqform.attr('method'), // 提交方式 get/post url: jqform.attr('action'), // 需要提交的 url data ...

  6. 后台管理Models

    1.后台的配置 登录地址 :http://localhost:8000/admin 创建后台管理员(超级用户): 在终端输入:./manage.py createsuperuser Username ...

  7. Gym -102007 :Benelux Algorithm Programming Contest (BAPC 18) (寒假自训第5场)

    A .A Prize No One Can Win 题意:给定N,S,你要从N个数中选最多是数,使得任意两个之和不大于S. 思路:排序,然后贪心的选即可. #include<bits/stdc+ ...

  8. C++学习(十八)(C语言部分)之 指针2

    指针1.指针的概述 指针是什么? 指针是一个地址 是一个常量 int 整型 int a a是变量 指针用来做什么? 方便使用数组或者字符串 像汇编语言一样处理内存地址2.指针变量 什么是指针变量? 是 ...

  9. easyui表单校验

    痛苦使人清醒,痛苦使人警惕.生于忧患,死于安乐.付出总会有回报. 1.下面跟大家分享使用easyui时表单中的值如何校验. 1.1 首先,在你的jsp/html页面引入JQuery和easyui的js ...

  10. Go Example--通道遍历

    package main import ( "fmt" ) func main() { queue := make(chan string, 2) queue <- &quo ...