2020-10-16

ES6中的数组方法:find、filter、every、some、includes、reduce

1.find 找到需要找到的那一项,如果找不到就返回undifined,找一个正确的就不往后找了

(find返回的是找到的那一项)


const bookArr=[

    {

        id:1,

        bookName:"三国演义"

    },

    {

        id:2,

        bookName:"水浒传"

    },

    {

        id:3,

        bookName:"红楼梦"

    },

    {

        id:4,

        bookName:"西游记"

    }

];

console.log(bookArr.find(item=>item.id===1))  

{id:1,bookName:"三国演义"}

2.filter 把所有符合条件的选项放在一个新数组中返回,返回一个过滤后的新数组

let arr = [1,23,4,56];

let b = arr.filter((item,index)=>{ 

     console.log("item",item); 

     console.log("index",index); 

     return item>20; //根据回调函数的返回值,返回true就留下,返回false不要;})

console.log("b",b);[23,56]

3.evrery()如果每一个都是true,返回的都是true;假如有一个为false的话,则为false。返回的是一个布尔值 ;不修改原数组。找到一个false,就立马返回布尔值。

let arr=[3,5,13,19]

let b=arr.every((item,index)=>{

return item>18

})

console.log(b) false

4.some( ).只要找到数组中符合一个条件的,就返回true,而且不在继续往后寻找

5.includes 存在就返回true,不存在就返回false ,返回的是一个布尔值

6.reduce 收敛,求和;reduce()方法返回的是最后一次调用回调函数的返回值 

let arr = [12,3,45,6,78];

let  a = arr.reduce((prev,next)=>{

// prev : 第一次代表数组的第一项,以后都代表上一次回调函数的返回值;

console.log(prev,next);

return prev +next;

}); //arr数组变为[100,12,3,45,6,78];

console.log(a);

涉及到对象数组

let arr = [{count:3,price:10},{count:2,price:20},{count:6,price:12}];/*let s = arr.reduce((prev,next)=>{

if(typeof prev==="number"){

return prev+ next.count*next.price;

}else{

return prev.count*prev.price + next.count*next.price;

}

})*/let s = arr.reduce((prev,next)=>{ return prev + next.count*next.price;},0);console.log(s);


reduce还可以拼接数组

let ee = [[12,3,45,6],[7,88],[9]].reduce((prev,next)=>{ return prev.concat(next);})

//[12,3,45,6,7,88,9]


取数组 filter和map相连

allCompanies.filter(company => checkedCompanyIds.indexOf(company.business_unit_id) > -1).map(item => item.business_unit_name).join('、')


fromJS(this.state.checkedCompanyIds).toJS()  取的是数组  [  ]

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以前学习JS没有着重总结关于数组的方法,导致实现某些功能不能找对最合适的实现方法,浪费很多时间。今天总结一些...
    Mango97阅读 571评论 0 0
  • 1、es5和es6的区别,说一下你所知道的es6 ECMAScript5,即ES5,是ECMAScript的第五次...
    没糖_cristalle阅读 718评论 0 0
  • 1. 函数 1.1 函数的 3 种定义方法 1.1.1 函数声明 //ES5 functiongetSum(){}...
    Mrssssss阅读 390评论 0 0
  • 目录 DOM 事件代理 数组 对象 扁平化 去重 -unique() 拷贝 浅拷贝 深拷贝(copy()函数实现、...
    friendshi洛初Udo邭阅读 494评论 0 0
  • ECMAScript - 学习笔记 🎬 🧩nvm node.js 包管理工具 nvm github[https:/...
    Super三脚猫阅读 660评论 0 1