前端-reduce、some、every、map、forEach、find、filter、使用

最新推荐文章于 2024-05-15 14:16:12 发布

浅浅一笑^*^

最新推荐文章于 2024-05-15 14:16:12 发布

阅读量428

点赞数 1

分类专栏： reduce fliter过滤器 forEach 文章标签：字符串过滤器 javascript

本文链接：https://blog.csdn.net/weixin_46409887/article/details/105849653

版权

reduce 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

forEach

2 篇文章 0 订阅

订阅专栏

fliter过滤器

1 篇文章 0 订阅

订阅专栏

1）reduce
1.reduce有四个参数。第一项是prev上一项 next下一项 index当前索引 arr原数组

<script>
    //1.reduce有四个参数。第一项是prev上一项  next下一项  index当前索引 arr原数组
    // var arr=[1,2,3,4];
    //  var h=arr.reduce((prev,next,indexs,arrs)=>{
    //      console.log(prev+next);
    //        return prev+next;
    //    });
    // console.log(h);//10

    //2.加入从后台调取数据  
    // var arr2=[
    //     {pice:30,const:2},
    //     {pice:40,const:2},
    //     {pice:20,const:1}
    // ];
    // var k=arr2.reduce((p,n)=>{
    //     console.log(p,n);
    //     return p+n.pice*n.const
    // },0);//添加0是因为每次返回都是这个值
    // console.log(k);

    //3.把多维数组变成一堆数组，扁平化数组 用reduce实例
    var arr3=[[1,2,3],[3,4],[5,6]];
    var m=arr3.reduce((p,n)=>{
       console.log(p,n);// p=[1, 2, 3] n=[3, 4]
       return p.concat(n);//concat数组的拼接
    });
    console.log(m);//[1,2,3,3,4,5,6]
</script>

2）some
2.some 查找，原数组不变，只要找到符合一项条件的就返回true,所有的都不符合就返回false(返回结果boolean类型)

<script>
    //some 查找，原数组不变，只要找到符合一项条件的就返回true,所有的都不符合就返回false(返回结果boolean类型)
    var ary=[1,2,3,4];
    let arr2=ary.some((item,index)=>{
        return item>2;
    });
    console.log(arr2);//true
</script>

3)every
3.every 查找,原数组不变,只要有一项不符合就返回false ，全部条件满足才返回true.

<script>
    //every 查找,原数组不变,只要有一项不符合就返回false ，全部条件满足才返回true.
    var arr=[1,2,3,4];
    let new1=arr.every((item,index)=>{
        return item>1;
    });
    console.log(new1);//false
</script>

4)map
4.map是映射原数组不变 return什么就映射什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul"></ul>
<script>
    //map是映射 原数组不变 return什么就映射什么。
    var arr=[1,2,3,4];
    let k=arr.map((item,index)=>{
        console.log(item,index);//参数,下标
        return ul.innerHTML+=`<li>${item}</li>`;//es6的模板字符串 相当于字符串的拼接
    });
    console.log(k);
</script>
</body>
</html>

5)forEach
for循环是编程式，每一个步骤都展示出来
5.forEach是声明式，直接可拿来使用就可
例:（循环数组的，不支持return，没有返回值，遇到基本类型原数组不变，遇到引用类型原数组改变）
/*
基本类型:Undefined、Null、String、Number、Boolean
引用类型:object、Array、RegExp、Date、Function
特殊的基本包装类型(String、Number、Boolean)以及单体内置对象(Global、Math)。
*/

<script>
    //for循环是编程式，每一个步骤都展示出来
    //forEach是声明式，直接可拿来使用就可
    // 例子:（循环数组的，不支持return，没有返回值，遇到基本类型原数组不变，遇到引用类型原数组改变）
    /*
    基本类型:Undefined、Null、String、Number、Boolean
    引用类型:object、Array、RegExp、Date、Function
    特殊的基本包装类型(String、Number、Boolean)以及单体内置对象(Global、Math)。
    */
    var arr=[{n:1},{n:2},{n:3}];
    arr.forEach((item,index)=>{//去改变原数组
        console.log(item,index);//每一项，每一项下标
        item.n*=2;//直接操作原数组*2
    });
    console.log(arr);

</script>

6）find
6.find查找，原数组不变，只要找到符号条件的，就返回条件的第一项

<script>
    //find查找，原数组不变，只要找到符号条件的，就返回条件的第一项
    var arr=[1,2,3,4];
    let newArr=arr.find((item,index)=>{
        console.log(item,index);//每一项，每一项的下标
        return item>2;
    });
    console.log(newArr);//3

</script>

7)filter
7.filter过滤器 ,原数组不变，返回新数组，把过滤后返回true的每一项放到新数组中。

<script>
    //filter过滤器 ,原数组不变，返回新数组，把过滤后返回true的每一项放到新数组中。
    var arr=[1,2,3,4];
    var n=arr.filter((item,index)=>{
        console.log(item,index);
        return item!=2;
    });
    console.log(n);//1 3 4

</script>